前端學習---css基本知識

来源:https://www.cnblogs.com/charles8866/archive/2018/03/14/8560738.html
-Advertisement-
Play Games

css基本知識 我們先看一個小例子： 我們可以看到我們在div中加了style,裡面有background-color，height等屬性，這樣就使的原本什麼都沒有的div添加了背景色高度等。 css的編寫 在標簽上設置style屬性：width,height,background....... 寫 ...


css基本知識

 我們先看一個小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color:#2459a2;height: 48px;">1</div>
    <div style="background-color:red;">2</div>
    <div style="background-color:green;">3</div>
</body>
</html>

 

我們可以看到我們在div中加了style,裡面有background-color，height等屬性，這樣就使的原本什麼都沒有的div添加了背景色高度等。

css的編寫

  • 在標簽上設置style屬性：width,height,background.......
  • 寫在head裡面，寫一個<style>標簽中寫樣式：
<head>
<style>
#i1{
  background-color:red;
  height:48px      
}
</style>
</head>
  •  單獨創建一個.css格式的文件，在.css文件中寫入樣式，在html文件中的head標簽中引入該.css文件：
<link rel="stylesheet" href="common.css" />

 css中的註釋：/**/

選擇器使用css

 1.標簽選擇器：

div{background-color:red; } 
<div > </div>

2.class選擇器：

.bd{background-color:red; } 
<div class='bd'> </div> 

3.id選擇器：

#idselect{background-color:red; } 
<div id='idselect' > </div>

4.關聯選擇器（空格）

#idselect p{background-color:red; } 
<div id='idselect' > <p> </p> </div>

5.組合選擇器：（逗號）

input,div,p{ background-color:red; } 

6.屬性選擇器：

input[type='text']{ width:100px; height:200px; } 

css中的優先順序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            font-size: 58px;
            #color:black;
        }

    </style>
</head>
<body>
    <div class="c1 c2">asdfas</div>
</body>
</html>

 上面我們設置了一個div有兩個class名稱，然後先設置了一個color:white,顯示的效果如下：

下麵我們在.c2的css中把color:black的註釋去掉，顯示的效果如下：

我們再在<div>標簽中添加：style="color:blue"，那麼顯示的效果如下：

 

這就涉及到了css樣式的優先順序：（就近原則）

　　style--->c2----c1(這裡c2,c1的優先順序是看在css中誰的樣式寫在下麵，如果上面head標簽的style標簽中兩個位置互換，那麼就是c1的優先順序大於c2)

常用的css中的樣式

 1.邊框

預設4個邊都加上：

　　 border:1px solid/dotted red (1像素，實線/虛線，紅色)：

只加左邊和右邊：

　　border-left-right:1px solid/dotted red 

 2.height,width,line-height,color,font-size,font-weight:

height,width:高度，寬度

　　height:48px;width:200px     or     height:48px;width:80%（可以用具體的值也可以用百分比）

text-align:center，水平方向居中

line-height行高：

　　如果我們想要把文字垂直居中就可以用這個屬性（行高像素==height像素）,即height:48px，line-height:48px，則字體就居中了。

font-size字體大小：font-size:12px;

font-weight字體的樣式：100-900,bold(加粗),bolder（更粗），inherit,initial,lighter,normal,unset

color字體顏色；

3.float屬性：浮動

如果我們寫了2個div,那這2個div就會每個各占一行，如果我們想讓一個div在左邊占20%，一個div在右邊80%，想要兩個div在一行對接起來，那就需要用到float

首先看看我們不用float的效果：

<div style="background-color: red;width:20%;">div1</div>
<div style="background-color: green;width:80%">div2</div>

 

 如果我們讓這兩個div都向左浮動：

<div style="background-color: red;width:20%;float:left;">div1</div>
<div style="background-color: green;width:80%;float:left">div2</div>

 兩個就重合在一起，並且一個站20%，一個占80%

如果我改成div1占20%往左浮動，div2占60%往右浮動：那麼中間就會空出20%

<div style="background-color: red;width:20%;float:left;">div1</div>
<div style="background-color: green;width:60%;float:right">div2</div>

 現在我們寫一個盒子，裡面有一些div：

<div style="width: 300px; border: 1px solid red;">
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
</div>

 我們可以發現用了float我們就可以做到類似很多前端頁面一塊一塊的樣式，我們最外面的div的高度是隨著裡面小div不斷的增多而增多的。

 

但是有一個問題，我們可以看到上面有一個紅色的線，他是外層div的邊框，為什麼父div的邊框沒有了呢，只有一個了呢？這個就是使用float之後會產生的問題。

解決方法：

在父div中的最後加上這麼一段：<div style="clear:both;"></div>

 

這樣，父div的邊框就顯現了出來

4.display

首先我們看一段：

<div style="background-color: red;">div1</div>
<span style="background-color: green;">span1</span>

現在我們想要讓塊級標簽變成一個行內標簽：display:inline

<div style="background-color: red;display:inline;">div1</div>
<span style="background-color: green;">span1</span>

我們想要讓span這個行內標簽變成塊級標簽：display:block;

********

行內標簽：無法設置高度，寬度，padding,margin

塊級標簽：可以設置高度，寬度，padding,margin

<span style="background-color: red;width:200px;height:48px;">span1</span>
<a style="background-color: red;">chaolianjei</a>

 我們可以發現一點效果都沒有

  

display:inline-block;

　　具有inline，預設自己有多少占多少；

　　具有block，可以設置高度，寬度，padding,margin

<span style="background-color: red;width:200px;height:48px;display: inline-block;">span1</span>
<a style="background-color: red;">chaolianjei</a>

 加了display:inline-block;之後，span就可以設置寬高了：

 

display:none;讓標簽消失：

 

5.padding margin(0 auto)內邊距，外邊距：

margin:

　　margin:0 auto;上下為0，左右居中

6.position:

  • fixed---->固定在頁面的某個位置，滾輪滾動，位置也不會變
  • absolute---->絕對定位，單用它，滾輪滾動時，位置會改變，要和relative一起使用
  • relative

fixed：

我們先看一串代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 50px;height:50px;background-color: black;color:white">返回頂部</div>
    <div style="height: 5000px;background-color: #dddddd"></div>
</body>
</html>

 

現在我們希望的是 “返回頂部” 這個div 固定在瀏覽器的右下角

<div style="width: 50px;height:50px;background-color: black;color:white;
    position:fixed;bottom:20px;right:20px;"
    >返回頂部</div>

 

 我在style中添加了

position:fixed;bottom:20px;right:20px;

 這樣我們就把那個div固定在右下角了。

 

我們再看一個例子：有的網站，它的菜單欄是一直在瀏覽器的上面的，即使是滾動條滾動，頭部的菜單欄也不會變，這個我們應該怎麼做呢：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:48px;
            background-color: black;
            color: #dddddd;
            position:fixed;
            top:0;
            right:0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height:5000px;
            margin-top:50px ;
        }
    </style>
</head>
<body>
    <div class="pg-header">頭部</div>
    <div class="pg-body">內容</div>
</body>
</html>

 

 其實只需要加上上面色的代碼就可以了，下麵的margin-top是為了讓pg-body的能夠往下來一點，顯示出全部內容

 relative+absolute:

我現在有3個div:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div1</div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div2</div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div3</div>
</body>
</html>

我想要在div1的左下角放一個黑色的小方框， div2的右下角放一個黑色的小方框，div3的左上角放一個黑色的小方框，應該怎麼做 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
        div1
        <div style="width:50px;height:50px;background-color: black;position:absolute;left:0;bottom:0"></div>
    </div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
        div2
        <div style="width:50px;height:50px;background-color: black;position:absolute;right:0;bottom:0"></div>
    </div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
        div3
        <div style="width:50px;height:50px;background-color: black;position:absolute;left:0;top:0"></div>
    </div>
</body>
</html>

只要relative 和 absolute 相配合，然後設置top,left,right,bottom的值就可以了，這個值可以是正數也可以是負數

 

還有一個場景：我們點一個按鈕，然後就會跳出一個小視窗，這個時候視窗以外的東西就沒有辦法進行操作了，如：我點擊了大模態框，之後跳出了large model，但是灰色的地方是沒有辦法進行操作的

這就是一個典型的三層模式：本身文本是一層，灰色的遮罩是一層，彈出的框是一層。那我們怎麼實現這個呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:400px;height:100px;background-color: white;
        position: fixed;top:50%;left: 50%;
        margin-top: -50px;margin-left:-200px;
        z-index:10;"></div>
    <div style="position: fixed;background-color: black;top:0;bottom:0;right:0;left: 0; opacity: 0.6;z-index: 9;"></div>

    <div style="height:5000px;background-color: green;"></div>
</body>
</html>

 效果如圖所示：下麵有一個green的div，然後有一個black的div，只是設置了透明度，最上面有一個居中的白色div

分析：首先我們先說兩個新的屬性：

opcity:0.6;設置透明度，值為0-1

z-index:9，設置優先順序，值越高優先順序越大

我們先實現兩個div，一個是綠色的，一個是黑色的。這個很簡單。下麵要再加上第三層。最關鍵的就是這上面兩個屬性，如果透明屬性沒有的話，在做兩層的時候，黑色的就會把綠色徹底覆蓋住，如果沒有優先順序屬性的話，那麼在做第三個div的時候就會不知道誰覆蓋了誰。

這裡我們還要記錄的是居中方法：

position: fixed;top:50%;left: 50%;
margin-top: -50px;margin-left:-200px;

 設置50%，然後用margin返回寬高的一半，這樣就能夠讓一個div居中顯示

 7.overflow

 我們設置了一個div的寬度和高度，現在想要在這個div中放入一個圖片，那圖片有自己的高度和寬度。如果直接發放進去就會超出div的範圍顯示，那我們怎麼辦呢？

在style中加入overflow屬性：

  • hidden：超出的部分隱藏
  • auto:超出的部分會給滾動條

 

8.hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top:0;
            right:0;
            left:0;
            height:48px;
            background-color: #2459a2;
            line-height:48px;
        }
        .pg-body{
            margin-top:50px;
        }
        .w{
            width:980px;
            margin:0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding:0 10px;
            color:white;
        }
        /*當滑鼠移動到當前標簽的時候，以下css屬性才會生效*/
        .pg-header .menu:hover{

            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">logo</a>
            <a class="menu">全部</a>
            <a class="menu">42區</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w"></div>
    </div>
</body>
</html>

 hover當滑鼠移動到超鏈接的時候，就會對hover的css里的屬性生效

 

9.background

background-image:url('image/4.jpg')：背景是一個圖片，如果這個div比圖片的尺寸還要大的話，圖片就會一直重覆著放

　　應用場景：漸變色的背景，我們只需要一個很窄的圖片，就可以利用這個屬性，讓整個背景都是這個漸變色的圖片

 background-repeat:no-repeat/repeat-x/repeat-y：改屬性設置圖片是否要重覆，水平重覆還是垂直重覆

background-position:10px 10px 選取一張圖上的某一個位置進行顯示

　　應用場景：網站有的時候用一張圖上存儲了很多的圖標，要用哪個圖標就可以選哪個坐標

頁面佈局

 一、主站佈局：

<div class="pg-header">
        <div style="width:980px;margin:0 auto;">
            內容自動居中
        </div>

</div>
<div class="pg-content"></div>
<div class="pg-footer"></div>

 

 二、後臺管理佈局

同樣都是三個部分，頭部，中間內容，和尾部：

我們先看看中間的變化：

一類是中間內容的菜單和內容都不動，右邊內容多的時候出現滾動條

我們用position:fixed做的話應該怎麼做呢：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0 auto;
        }
        .left{
            float:left;

        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color: #2459a2;
            color:white;
        }
        .pg-content .menu{
            position: fixed;
            top:48px;
            left:0;
            bottom:0;
            width:200px;
            background-color: #dddddd;

        }
        .pg-content .content{
            position: fixed;
            top:48px;
            bottom: 0;
            left:200px;
            right:0;
            background-color:purple;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Expo大作戰(十五)--expo中splash啟動頁的詳細機制
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • iOS學習——iOS原生實現二維碼掃描
    最近項目上需要開發掃描二維碼進行簽到的功能，主要用於開會簽到的場景，所以為了避免作弊，我們再開發時只採用直接掃描的方式，並且要屏蔽從相冊讀取圖片，此外還在二維碼掃描成功簽到時後臺會自動上傳用戶的當前地點，如何自動定位獲取用戶的當前地點在上一篇隨筆iOS學習——自動定位中已經講過了，本文就簡單地說一下 ...
  • Expo大作戰(十四)--expo中消息推送的實現
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • Android 調用系統裁剪不返回數據的情況下用文件修改時間判斷用戶到底裁沒裁剪
    做公司項目發現的問題，在調用系統的裁剪的時候，如果設置返回圖片，有的手機提示內容不能大於40k（搞笑呢吧）,所以就要先設置保存路徑，然後設置不用返回圖片，在回調里直接去路徑里拿圖片就可以了。 但項目的要求是如果客戶進裁剪頁面點了返回鍵（並沒有裁剪），返回之後不能顯示路徑存好的圖片，所以解決思路就是設 ...
  • 使用ionic cordova build android --release --prod命令打包報錯解決方法
    使用ionic cordova build android --release --prod命令打包報有如下錯誤及解決方法 只要把以下內容添加到build-extras.gradle或(build***.gradle)即可 ...
  • iOS - NSString 封裝
    在實際項目開發過程中，發現字元串使用頻率還是非常高的，NSString提供了很多相關的API，但是在開發過程中發現很多業務功能都是相同的。因此根據在開發過程中遇到的字元串使用場景，進行了簡單封裝。具體代碼如下： NSString+Category.h 代碼: NSString+Category.m ...
  • Android 自定義View1
    目標是做一個牛叉的日曆，但是要先一步步來，先看效果圖 簡單一點說就是吧自定義view平分成七個部分，每個部分寫上一個字，然後自定義view可以跟隨手指滑動，併在抬起手指後恢復到初始位置，並且點擊view可以判斷出點的是哪個view（都是用坐標算出來） 代碼也簡單，看一下就ok 萬事開頭難，估計日曆系 ...
  • Android-滑動解鎖高亮文字自定義TextView
    public class HightLightTextView extends TextView { // 存儲view的寬度 private int mTextViewWidth = 0; // 畫筆 private Paint mPaint; // 線性渲染 private LinearGrad... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類