web前端之CSS（2/4）

阿新 • • 發佈：2021-12-17

CSS

CSS就是Cascading Style Sheet的縮寫，中文譯作“層疊樣式表”或者是“級聯樣式表”，是用於控制網頁外觀處理並允許將網頁的表現與內容分離的一種標記性語言，CSS不需要編譯,可以直接由瀏覽器執行(屬於瀏覽器解釋型語言)，是Web網頁開發技術的重要組成部分。

那麼接下來，繼續看下，使用CSS有什麼好處吧。

使用CSS樣式可以有效地對頁面進行佈局，更加靈活多樣。
使用CSS樣式可以對頁面字型、顏色、背景和其他效果實現精確控制，同時對它們的修改和控制變得更加快捷，更加強大。
站點中所有的網頁風格都使用一個CSS檔案進行統一控制，達到一改全改。還可以快速切換主題，我們可以把HTML比作是骨架，CSS是衣服。同一個HTML骨架結構，不同CSS樣式，所得到的美化佈局效果不同。
CSS可以支援多種裝置,比如手機,PDA,印表機,電視機,遊戲機等。
CSS可以將網頁的表現與結構分離，使頁面載入得更快,更利於維護，這也是我們的最終目的。

CSS基本語法:

CSS的基本語法由選擇器、屬性、屬性的值組成，如果選擇符有多個屬性，由分號隔開。

注意，這裡的程式碼都是英文格式，例如花括號、冒號和分號。

1、CSS的引入方式

CSS樣式有三種不同的使用方式，分別是行內樣式，嵌入樣式以及連結式。我們需要根據不同的場合不同的需求來使用不同的樣式。

行內樣式

行內樣式，就是寫在元素的style屬性中的樣式，這種樣式僅限於元素內部起作用。當個別元素需要應用特殊樣式時就可以使用內聯樣式。但不推薦大量使用內聯樣式，因為那樣不利於後期維護。

<div style="color: white;background-color: #369;text-align: center">行內設定</div>

嵌入式

嵌入式，是把CSS樣式寫在HTML文件內部head標籤中的style標籤裡。瀏覽器載入HTML的同時就已經載入了CSS樣式了。當單個文件需要特殊，單獨的樣式時，可以使用內部樣式表。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>title</title>
      <meta charset="utf8">

      <style>
          div{
              color: white;
              background-color: #369;
              text-align: center
          }
      </style>
  </head>
  <body>
  
  <div> 嵌入式</div>

  </body>
</html>

連結式

連結式，就是把CSS樣式寫在HTML文件的外部，一個字尾為 .css 的外部樣式表中，然後使用時在head標籤中，使用link標籤的href屬性引入檔案即可。當CSS樣式需要應用在很多頁面時，外部樣式表是最理想的選擇。在使用外部樣式表的情況下，我們可以通過改變一個檔案來改變這所有頁面的外觀。

common.css

div{
      color: white;
      background-color: #369;
      text-align: center
}

html檔案

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>title</title>
      <meta charset="utf8">

      <link rel="stylesheet" href="common.css">
  </head>
  <body>

  <div>連結式</div>
  
  </body>
</html>

2、CSS的選擇器

3.2.1、基本選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
           #i1{
               color: red;
           }
           .c1{
               color: red;
           }
           .c2{
               font-size: 32px;
           }

    </style>


</head>
<body>

<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>

<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>

</body>
</html>

3.2.2、組合選擇器

後代子代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*後代選擇器:子、孫、重孫等等，都算後代，如下，可以唯一定位html中的第一個c2的div，往下幾代都能生效，生效的是一系列後代中最後那個class對應的標籤，可以寫好幾代，譬如：.c1 .c2 .c3 .c4 則c4生效*/
        .c1 .c2{
            color: red;
        }

        
        .c3 .c5{
            color: red;
        }
        /*子代選擇器：使用>符號連線，必須是父子關係標籤*/
        .c3 > .c5{
            color: red;
        }

        .c3 .c4 .c5{
            color: red;
        }
        
    </style>


</head>
<body>

<!--後代選擇器-->
<div class="c1">
    <div class="c2">item1</div>
</div>
<div class="c2">item2</div>

<!--子代選擇器-->
<div class="c3">
    <div class="c4">
        <div class="c5">item3</div>
    </div>
     <div class="c5">item4</div>
</div>

</body>
</html>

與或選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*與選擇器：兩個條件，標籤名.類名，中間無空格，則唯一定位*/
        div.c1{
            color: red;
        }
         /*或選擇器：幾個相同css內容的標籤通過逗號連線，即可使這幾個被定位的標籤同時生效。*/
        p.c1,#i1{
            color: red;
        }


    </style>


</head>
<body>

<!--與選擇器-->
<div class="c1">item1</div>
<p class="c1">item2</p>
<div>item3</div>
<p id="i1">item4</p>


</body>
</html>

兄弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*毗鄰選擇器：使用加號連線，向下緊挨著的那個標籤，加號後面那個生效*/
       #i1 + div.c1{
           color: red;
       }
        /* 下面這個不生效，因為不是毗鄰 */
       #i1 + div.c2{
           color: red;
       }

        /*兄弟選擇器：使用波浪號~連線，波浪號後面的所有滿足條件的標籤都生效，即使中間間隔其他標籤*/
        #i1 ~ div.c2{
           color: red;
        }
        #i1 ~ div{
           color: red;
        }


    </style>


</head>
<body>
    
<p id="i1">item0</p>
<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>


</body>
</html>

3.3.3、屬性選擇器

### 【補充】標籤的class屬性值可以有多個，使用空格分隔，這樣這個標籤可以擁有2個class的css樣式，例如<div class="c1 c2 c3">hello</div>

E[att]          匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
                
E[att=val]      匹配所有att屬性等於“val”的E元素   div[class=”error”] { color:#f00; }
 
E[att~=val]     匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配屬性值以指定值開頭的每個元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配屬性值以指定值結尾的每個元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配屬性值中包含指定值的每個元素    div[class*="test"]{background:#ffff00;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*屬性選擇器*/
        [type="text"]{
            border: 1px solid red;
        }

        [index]{
            font-size: 32px;
            font-style: italic;
        }

        [href*="png"]{
            color: red;
        }

    </style>


</head>
<body>


<input type="text">
<input type="password">

<div index="1">1</div>
<div index="2">2</div>
<div index="3">3</div>

<ul>
    <li><a href="1.png">item1</a></li>
    <li><a href="2.jpg">item2</a></li>
    <li><a href="3.jpg">item3</a></li>
    <li><a href="4.png">item4</a></li>
    <li><a href="5.gif">item5</a></li>
</ul>

</body>
</html>

3.3.4、偽類選擇器

anchor偽類：專用於控制連結的顯示效果

:link	a:link	選擇所有未被訪問的連結。
:visited	a:visited	選擇所有已被訪問的連結。
:active	a:active	選擇活動連結。
:hover	a:hover	選擇滑鼠指標位於其上的連結。


    <style>
           a:link{
               color: red;
           }
           a:visited{
               color: coral;
           }
           a:hover{   /* 滑鼠懸浮時  */
               color: blue;
           }
           a:active{   /* 按下滑鼠時 */
               color: rebeccapurple;
           }

    </style>

before after偽類

before/after偽類相當於在元素內部插入兩個額外的標籤，其最適合也是最推薦的應用就是圖形生成。在一些精緻的UI實現上，可以簡化HTML程式碼，提高可讀性和可維護性。

:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個元素。
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個元素。
:before	p:before	在每個元素的內容之前插入內容。
:after	p:after	在每個元素的內容之後插入內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* item1變色 */
        .c1 p:first-child{
            color: red;
        }

        .c1 div:last-child{
            color: red;
        }

        p#i1:after{
            content:"hello";
            color:red;
            display: block;
        }

    </style>


</head>
<body>

<div class="c1">
    <p>item1</p>
    <p>item2</p>
    <div>item3</div>
    <p>item4</p>
</div>

<p id="i1">p標籤</p>

</body>
</html>

：after相當於在標籤內部新生成了一個標籤，相當於生成了一個子標籤，位置在父標籤內容的後面。

3.3.5、樣式繼承

CSS的樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。總的來說，一個HTML文件就是一個家族，然後html元素有兩個子元素，相當於它的兒子，分別是head和body，然後body和head各自還會有自己的兒子，最終形成了一張以下的家族譜。

在上圖中，可以看到，body的子元素有三個，h1、p和ul，ul也有幾個子元素，p也有1個子元素，那麼li和a就都是body的後代元素。有時可能我們在body裡面設定了一些屬性，結果，body下面所有的後代元素都可能享受到，這就是樣式繼承。就像一句俗語一樣，“龍生龍，鳳生鳳，老鼠的兒子會打洞”。樣式繼承，可以給我們的網頁佈局帶來很多的便利，讓我們的程式碼變得更加簡潔，但是，如果不瞭解，或者使用不當，也有可能會給我們帶來很多不必要的麻煩。

因此，如果瞭解了哪些樣式是會繼承到後代元素的，那麼就可以避免這些問題的發生了。

文字相關屬性
font-family	font-size	letter-spacing	line-height
font-style	font-variant	text-align	text-indent
font-weight	font	text-transform	word-spacing
color	direction
列表相關屬性
list-style-image	list-style-position	list-style-type	list-style
表格和其他相關屬性
border-collapse	border-spacing	caption-side	empty-cells
cursor

3.3.6、選擇器優先順序

繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文字中。

body{color:red;}    <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

p{color:green}

發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

優先順序

所謂CSS優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。樣式表中的特殊性描述了不同規則的相對權重。

/*
!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

1 內聯樣式表的權值最高               style=""           1000；

2 統計選擇符中的ID屬性個數。         #id                100

3 統計選擇符中的CLASS屬性個數。      .class             10

4 統計選擇符中的HTML標籤名個數。     標籤名              1

按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取捨時按照從左到右的順序逐位比較。
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
            .c1{
                color: red;
            }
            #i1{
                color: coral;
            }
            div{
                color: greenyellow;
            }

            /*.c2 .c3 .c4 span{*/
            /*    color: orange;*/
            /*}*/

            .c2 .c4 span{
                color: blue;
            }

            .c2 .c3 .c5{
                color: rebeccapurple;
            }

            .c2 .c4 .c5{
                color: darkcyan;
            }
            
            /* !important除錯的時候臨時使用，其他css樣式全部失效。 */
            .c2{
                color:red !important;  
            }

    </style>

</head>
<body>


<div class="c1" id="i1">item1</div>


<div class="c2">
    <div class="c3">
        <div class="c4">
            <span class="c5">item2</span>
        </div>
    </div>
</div>


</body>
</html>

1、有!important宣告的規則高於一切。

2、如果!important宣告衝突，則比較優先權。

3、如果優先權一樣，則按照在原始碼中出現的順序決定，後來者居上。

4、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全域性選擇符*定義的規則)。

5、用數字表示只是說明思想，一萬個class也不如一個id權值高

3、CSS的屬性操作

3.3.1、文字屬性

font-style（字型樣式風格）

/*
屬性值：
normal：設定字型樣式為正體。預設值。 
italic：設定字型樣式為斜體。這是選擇字型庫中的斜體字。
oblique：設定字型樣式為斜體。人為的使文字傾斜，而不是去使用字型庫的斜體字。
*/

font-weight（字型粗細）

/*
屬性值：
normal：設定字型為正常字型。相當於數字值400
bold：設定字型為粗體。相當於數字值700。
bolder：設定字型為比父級元素字型更粗的字型。
lighter：設定字型為比父級元素字型更細的字型。
number：用數字表示字型粗細。從小到大，越來約粗，取值範圍：100、200、300、400、500、600、700、800、900。
注意：
font-weight的常用值有兩個normal和bold，其他的值在瀏覽器中的支援並不好。
*/

font-size（字型大小）

/*
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以設定值為具體的數值加上對應的計算單位來表示字型的大小。字型單位有畫素（ px ）、字元（ em，預設1em等於16px，2em等於32px，根據不同瀏覽器的預設字型大小而決定 ）、百分比（ % ），磅[點]（ pt ）。
字型不指定大小時，主流瀏覽器預設是15畫素到16畫素。舊版本的谷歌瀏覽器，字型最小隻能設定成12畫素，新版已經修復。*/

font-family（字型族）

/*
font-family可以指定元素使用的字體系列或字型族。當我們使用font-family指定字型族的時候，可以指定多種字型,作為候補。指定多個字型的時候，需要使用逗號隔開。
如果css中沒有聲明當前內容使用的字型族的時候，預設：
	中文：  宋體 [ win7以後預設是 微軟雅黑 ]
	英文：  Arial
*/

color（字型顏色）

// 可以使用color來表示字型的顏色，顏色值最常用的有三種形式，英文單詞，十六進位制，RGB十進位制。更高階的有 RGBA、HSL、HSLA，不過低版本的瀏覽器並不支援。

 <style>
        .c1{
            color: red;
        }
        .c1{
            color: #369;
        }
        .c1{
            color: RGB(0,0,255);
        }
        /* 最後一位是透明度 */
        .c1{
            color: RGBA(0,0,255,0.5);
        }
</style>

另外要注意，使用十六進位制表示顏色值的時候，如果字元的格式類似於“AAAAAA”的這種，六個字元一樣的；又或者是“AABBCC”，這種，一二，三四，五六位置上的數字一樣的，我們可以使用簡寫來表達。譬如，#112233，可以簡寫為 #123

text-align（文字對齊方式）

/*
text-align屬性可以設定文字內容的水平對齊方式。屬性值常用的有
左對齊left、居中對齊center、右對齊right。justify 實現兩端對齊文字效果。
*/

【補充】寬高屬性

塊級（block）：
獨佔一行，可以設定寬高屬性。
內聯（inline)：
按內容佔比，不可以設定寬高屬性。

line-height（字型行高）

// 字型行高即字型最底端與字型內部頂端之間的距離。值可以是normal、px、number、%。

行高 = 字型大小 + 上半行距 + 下半行距

vertical-align

vertical-align 屬性設定元素的垂直對齊方式。

<img src="" alt=""><span>yuan</span>

text-decoration

// 使用text-decoration可以設定文字內容的裝飾線條，正常的文字是沒有線條的，常用的值有none，underline，overline，line-through四種。

3.3.2、背景屬性

background-color（背景顏色）

頁面的背景顏色有四種屬性值表示，分別是transparent（透明），RGB十進位制顏色表示，十六進位制顏色表示和顏色單詞表示。

屬性使用：

/*
background-color: transparent;   // 透明 
background-color: rgb(255,0,0); //  紅色背景 
background-color: #ff0000;  //  紅色背景
background-color: red;    // 紅色背景 
*/

background-image（背景圖片）

background-image可以引入一張圖片作為元素的背景影象。預設情況下，background-image放置在元素的左上角，並在垂直和水平方向重複平鋪。

語法：

// background-image: url('圖片地址')

當同時定義了背景顏色和背景影象時，背景影象覆蓋在背景顏色之上。所以當背景圖片沒有被載入到，或者不能完全鋪滿元素時，就會顯示背景顏色。

background-repeat（背景平鋪方式）

CSS中，當使用影象作為背景了以後，都是預設把整個頁面平鋪滿的，但是有時候在很多場合下面，頁面並不需要這種預設的效果，而可能需要背景影象只顯示一次，或者只按照指定方式進行平鋪的時候，可以使用background-repeat來進行設定。

background-repeat專門用於設定背景影象的平鋪方式，一般有四個值，預設是repeat（平鋪），no-repeat（不平鋪），repeat-x（X軸平鋪），repeat-y（Y軸平鋪）。

background-position（背景定位）

CSS中支援元素對背景影象的定位擺放功能，就是利用background-position屬性來實現，以頁面中元素的左上角為原點（0，0），把元素的內部區域當成一個座標軸（上邊框為X軸，越往左X的值越大，左邊框為Y軸，越往下Y軸的值就越大，反之亦然），然後計算出背景圖片的左上角與圓點的距離（x軸和y軸的距離），然後把背景圖片放入到指定的位置上，對背景圖片的位置進行精確的控制和擺放。

background-position的值分成兩個，使用空格隔開，前面一個是背景圖片左上角的x軸座標，後面一個是背景圖片左上角的y軸座標。兩個值都可以是正、負值。

語法：

// background-position: x軸座標 y軸座標

背景定位的值除了是具體的數值以外，還可以是左（left）、中（center）、右（right）

background（背景樣式縮寫）

和字型屬性一樣，多個不同背景樣式屬性也是可以同時縮寫的，不過不需要像字型那樣按照一定的順序，背景樣式的縮寫屬性的順序是不固定的，可以任意編排。

語法：

// background: 背景顏色  背景圖片  背景平鋪方式  背景定位;

【補充：應用場景】使用瀏覽器開發者工具可以臨時除錯css樣式的引數。可以實時檢視效果。應用：通過控制position來顯示圖片的一部分內容，這樣，可以將好多小圖示、小圖片放在一張圖片中，通過position的引數變化來顯示某個圖示，而不用把每個圖示都做成一個圖片，減少載入圖片的數量。

3.3.3、邊框屬性

border-style（邊框風格）

定義邊框的風格，值可以有

/*
none：沒有邊框，當border的值為none的時候，系統將會忽略[border-color]
hidden：隱藏邊框，低版本瀏覽器不支援。
dotted：點狀邊框。
dashed：虛線邊框。
solid：實線邊框。
double：雙實線邊框，兩條單線與其間隔的和等於border-width值。
*/

border-style的值可以縮寫的：

/*
只有一個值的時候表示同時控制上下左右的邊框風格。
只有兩個值的時候表示分別控制上下、左右的邊框風格。
有三個值的時候表示分別控制上、左右、下的邊框風格。
有四個只的時候表示分別控制上、右、下、左的邊框風格。
*/

border-style還可以單獨指定不同方向：

/*
border-top-style		設定上邊的邊框風格
border-bottom-style	     設定下邊的邊框風格
border-left-style		設定左邊的邊框風格
border-right-style		設定右邊的邊框風格
*/

border-width（邊框寬度）

使用border-width可以定義邊框的厚度，值可以是medium，thin，thick和指定數值的寬度。同時，border-width也可以進行縮寫：

/*
只有一個值的時候表示同時控制上下左右的邊框寬度。
只有兩個值的時候表示分別控制上下、左右的邊框寬度。
有三個值的時候表示分別控制上、左右、下的邊框寬度。
有四個只的時候表示分別控制上、右、下、左的邊框寬度。
*/

border-width也可以單獨指定不同方向：

/*
border-top-width		設定上邊的邊框寬度
border-bottom-width	    設定下邊的邊框寬度
border-left-width		設定左邊的邊框寬度
border-right-width		設定右邊的邊框寬度
*/

border-color（邊框顏色）

定義邊框的顏色，值表示的方式可以是十六進位制，RGB十進位制和單詞表示法。

同上，border-color的縮寫：

/*
只有一個值的時候表示同時控制上下左右的邊框顏色。
只有兩個值的時候表示分別控制上下、左右的邊框顏色。
有三個值的時候表示分別控制上、左右、下的邊框顏色。
有四個只的時候表示分別控制上、右、下、左的邊框顏色。
*/

border-color也可以單獨指定不同方向：

/*
border-top-color		設定上邊的邊框顏色
border-bottom-color	設定下邊的邊框顏色
border-left-color		設定左邊的邊框顏色
border-right-color		設定右邊的邊框顏色
*/

邊框樣式縮寫

還可以把邊框風格，邊框寬度，邊框顏色進行組合在一起，進行縮寫：語法：

// border: 邊框寬度 邊框樣式 邊框顏色;

注意，border的縮寫值可以不按照順序來進行書寫。這樣的縮寫可以同時控制4個方向的邊框樣式。

3.3.4、列表屬性

CSS中提供了一些列表屬性可以用來：

(1)、設定不同的列表項標記為有序列表

(2)、設定不同的列表項標記為無序列表

(3)、設定列表項標記為影象

list-style-type（系統提供的列表專案符號）
list-style-image（自定義的列表專案符號）

 li { list-style-image:url('qq.gif'); }

3.3.5、dispaly屬性

display可以指定元素的顯示模式，它可以把行內元素修改成塊狀元素，也可以把別的模式的元素改成行內元素。diisplay常用的值有四個。

語法：

/*
display: block;		 	// 聲明當前元素的顯示模式為塊狀元素
display: inline;		// 聲明當前元素的顯示模式為行內元素
display: inline-block; 	 // 聲明當前元素的顯示模式為行內塊狀元素
display: none;			// 聲明當前元素的顯示模式為隱藏，標籤還存在，空間位置也會清理出來   
visibility：hidden；// 雖然標籤隱藏，但是空間位置不會被清理，依然佔位。
*/

【應用】如下圖，使用了display屬性，使原本的內聯標籤span變成了塊狀標籤，那麼就可以設定寬高屬性了，第2張圖同理，使div變成了內聯標籤：

【補充】

<hr> 橫線

如上圖，實際上幾塊內容都是div放在下面，通過js程式碼讓單擊某個標題的時候，對應的div的display：none取消，其他的div設定為display：none，即可實現了不同div的切換，因為display：none是不佔空間的。inline、block、none之間切換。

【inline-block】佈局核心：如何能夠讓多個可以設定長寬的元素在一行顯示？譬如，導航欄多個選單如何在一行顯示的同時還能夠控制它的長寬？塊級標籤雖然可以控制寬高，但是獨佔一行，內聯標籤雖然一行可以顯示多個，但是無法控制寬高。

【解決方法】

- display：inline-block；既不佔一行，還能調整寬高。（幾乎沒坑） 
- float

3.3.6、盒子模型（重點）

盒模型是CSS的核心知識點之一，它指定元素如何顯示以及如何相互互動。HTML頁面上的每個元素都可以看成一個個方盒子，這些盒子由元素的content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）組成。

如下圖，瀏覽器開發者工具中的盒模型：

padding（內邊距及其縮寫）：在內容大小的基礎上往外擴充相應的大小。

內邊距，也叫“內補白”，表示頁面中元素的邊框與內容的距離。內邊距的值不能是負值，相當於table標籤的cellpadding屬性。

內邊距可以設定多個值：

/*
當padding只有一個值的時候表示同時控制上下左右的內邊距。
當padding只有兩個值的時候表示分別控制上下、左右的內邊距。
當padding有三個值的時候表示分別控制上、左右、下的內邊距。
當padding有四個只的時候表示分別控制上、右、下、左的內邊距。
*/

內邊距也可以進行單獨設定：

/*
padding-top 			設定上邊的外邊距
padding -bottom 		設定下邊的外邊距
padding -left			設定左邊的外邊距
padding -right			設定右邊的外邊距
*/

margin（外邊距及其縮寫）

外邊距，也叫“外補白”，表示頁面中元素與元素之間的距離。外邊距越大，兩者的距離就越遠，反之，如果外邊距越小，則元素之間的距離就越近，外邊距的值可以是正數，也可以是負值。

margin也可以像padding一樣設定多個值和單獨方向設定，用法一樣。

1、在網頁的開發過程中，需要讓一個元素相對於父級元素作水平居中時，可以藉助margin的特性來實現。

使用margin讓元素自身居中： margin: 0 auto;

2、瀏覽器的預設邊距清零

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .c1{
           width: 100%;
           height: 600px;
           border: 1px solid red;

       }

       .c2{
           width: 50%;
           height: 40px;
           background-color: rebeccapurple;
           margin: 10px auto;
       }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2"></div>
    <div class="c2"></div>
</div>
</body>
</html>

邊距案例：

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
        <meta charset="utf8">
        <style>

            *{
                margin: 0;
                padding: 0;
            }

            .c1{
                width: 80%;

                margin: 100px auto;

            }

            .c1 .J_categoryList{
                list-style: none;

            }
            .c1 .J_categoryList li{
                display: inline-block;
                margin: 10px;

            }
            .c1 .J_categoryList li a{
                font-size: 16px;
                color: #333;
                padding: 20px;
                border: 1px solid rebeccapurple;
                text-decoration: none;
            }

        </style>
  </head>
  <body>
<div class="c1">
      <ul class="J_categoryList">
          <li><a href=""><span>紅米</span></a></li>
          <li><a href=""><span>電視</span></a></li>
          <li><a href=""><span>筆記本</span></a></li>
          <li><a href=""><span>家電</span></a></li>
          <li><a href=""><span>小米手機</span></a></li>
      </ul>
</div>
  </body>
</html>

【body】body預設有個margin，所以div無法貼到瀏覽器邊緣。重新設定body的margin值即可。

【應用案例】居中效果

例如：小米官方網站的居中類似（也是利用margin：0 auto；）：

【佈局方式】目前使用比較多的佈局方式：DIV + CSS

例如：小米官網，我們要佈局，第一件事就是畫盒子，一個盒子可以理解成div，因為div是塊級標籤，它裡面可以巢狀塊級標籤和內聯標籤，最上方的導航條就可以看成一個盒模型，下面可以作為一個大盒子，也可以把下面的做成一個一個小盒子，沒有固定的模式，可以靈活掌握。

【案例】

3.3.7、float屬性（重點）

流動佈局

流動模型（Flow），即文件流，瀏覽器開啟HTML網頁時，從上往下，從左往右，逐一載入。

在正常情況下，HTML元素都會根據文件流來分佈網頁內容的。

文件流有2大特徵：

① 塊狀元素會隨著瀏覽器讀取文件的順序，自上而下垂直分佈，一行一個的形式佔據頁面位置。

② 行內元素會隨著瀏覽器區隊文件的順序，從左往右水平分佈，一行多個的形式佔據頁面位置。行內元素擺放滿一行以後才會到下一行繼續排列。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title></title>
    <style>
    div{ border: 1px solid #f00; margin: 4px; }
    .d3{ width: 100px; }
    </style>
  </head>
  <body>
    <div>d1</div>
    <div>d2</div>
    <div class="d3">
      <span>span1</span>
      <a>a1</a>
      <a>a2</a>
      <span>span2</span>
    </div>
  </body>
</html>

浮動模型（正常的文件流可以理解為底層的ps文字等，浮動元素可以理解為ps裡面的上層圖層，凌駕於底層之上）

要學習浮動模型的佈局模式，就要了解CSS提供的浮動屬性（float）。浮動屬性是網頁佈局中最常用的屬性之一，通過浮動屬性不但可以很好的實現頁面佈局，而且還可以依靠它來製作導航欄等頁面功能。

簡單浮動：

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>簡單浮動</title>
    <style>

        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;
            float: left;
        }

        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            float: left;

        }

        .c3{
            width: 400px;
            height: 200px;
            background-color: lightblue;
            float: left;
        }
        

    </style>
  </head>
  <body>

   <div class="c1"></div>
   <div class="c2"></div>
   <div class="c3"></div>

  </body>
</html>

效果如下：

如果只c2設定為float：left；則效果如下：

這種情況下，c2是浮動的，但是它的位置是浮動在上一個元素c1垂直往下緊挨著的位置浮動的，c3沒有浮動，則在文件流中正常排布，放在c1垂直正下方緊挨著的位置，那麼c2就飄在c3的正上方，那麼就出現了上述的情況，c3飄在c2的上方。
第一和第三浮動，則效果如下：

第一個浮動，第一個前面沒有元素，則頂在最前面，第二個不浮動，上一個元素是浮動的，第二個正常文件流，也頂在左上角，第三個浮動，第二個不浮動，第三個在第二個垂直正下方排布。

【左右浮動區別】相左浮動就貼在左側，向右浮動就貼在右側，佔滿一行再換行

如下圖，向左向右浮動案例：

【浮動原理】

字圍效果

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>字圍效果</title>
    <style>

        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;

        }

        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            float: left;

        }

        .c3{
            width: 400px;
            height: 400px;
            background-color: lightblue;

        }
        
    </style>
  </head>
  <body>

   <div class="c1">111</div>
   <div class="c2">222</div>
   <div class="c3">333</div>>

  </body>
</html>

案例：

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>字圍案例</title>
    <meta charset="utf8">
    <style>

        .c1{
            width: 500px;
        }

        img{
            float: left;
            width: 300px;
            height: 200px;
        }

      
    </style>
  </head>
  <body>
    <div class="c1">
           <img src="" alt="">
           <span class="text">
           </span>
    </div>

  </body>
</html>

效果如下：

【解釋】float並不是完全浮動，而是半浮動，因此浮動只遮蓋圖層，而不會遮蓋文字內容，就形成了這種字圍效果，文字會被擠到旁邊。例如前面的例子，如果只把c1浮動，則c2中的文字不會被覆蓋，而是擠到了一邊，不常用，但要了解。效果如下：

當一個元素被設定浮動後，將具有以下特性：

任何申明為float 的元素都會自動被設定為一個行內塊狀元素，具有行內塊狀元素的特性。

假如某個元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

在標準瀏覽器中如果浮動元素a脫離了文件流，那麼排在浮動元素a後的元素將會往回排列佔據浮動元素a本來所處的位置，使頁面佈局產生變化。

如果水平方向上沒有足夠的空間容納浮動元素，則轉向下一行。

字圍效果：文字內容會圍繞在浮動元素周圍。

浮動元素只能浮動至左側或者右側。

浮動元素只能影響排在其後面元素的佈局，卻無法影響出現在浮動元素之前的元素。

清除浮動

網頁佈局中，最常用的佈局便是浮動模型。但是浮動了以後就會破壞原有的文件流，使頁面產生不必要的改動，所以我們一般在浮動了以後，達到目的了，就緊接著清除浮動。

在主流瀏覽器（如Firefox）下，如果沒有設定height，元素的高度預設為auto，且其內容中有浮動元素時，在這種情況下元素的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）佈局的情況，叫“浮動溢位”，為了防止這個現象的出現而進行的CSS處理操作，CSS裡面叫“清除浮動”。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title></title>
    <meta charset="utf8">
    <style>

        .box{
            border: 1px solid red;
        }

        .c1{
            width: 200px;
            height: 200px;
            background-color: #336699;
            float: left;
        }

         .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: right;
        }

         .footer{
             width: 100%;
             height: 60px;
             background-color: yellowgreen;

         }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
   <div class="footer"></div>

  </body>
</html>

【父級塌陷】

如上圖，如果將header的height設定為60px，即解決了這個問題，但是寫死了，如果子div的高度有變化，父級div也必須變化，必須跟最高的子div保持一致才行，因此，可以這樣解決：

但是，上述解決方案並不完美，容易讓人誤解為添加了一個空div，因此更好的方法是使用偽類選擇器解決：

如上圖，相當於通過css偽類選擇器自動新增了一個div，這個方案是大家公認的解決方法，大家都能看懂，換個類名，雖然也沒問題，但是失去了程式碼的可讀性。

clear是css中專用於清除浮動的，常用的屬性值有以下幾個：

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	預設值。允許浮動元素出現在兩側。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>簡單浮動</title>
    <style>

        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;
            float: left;
            /*float: right;*/
        }

        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            float: left;
            clear: left;
            /*clear: both;*/
        }

        .c3{
            width: 400px;
            height: 200px;
            background-color: lightblue;
            float: left;

        }

    </style>
  </head>
  <body>

   <div class="c1"></div>
   <div class="c2"></div>
   <div class="c3"></div>

  </body>
</html>

如下圖，當c2的float設定為left和both，效果是一樣的，但還是有區別的，加入c1的float是right，c2是left，則效果是下面第二圖這樣的，但是實際上我是想讓c2、c3放到第二行的，因此，c2設定為both的情況下，c1不管是left還是right，都不影響c2、c3的位置，總之一點，每個元素設定的float只能影響它自身，不能影響到別的元素。用的比較多的就是clear：both。

清除浮動解決父級塌陷問題：

  .clearfix:after {                         /*在類名為“clearfix”的元素內最後面加入內容*/
            content: ".";                    /*內容為“.”就是一個英文的句號而已。也可以不寫。*/
            display: block;                  /*加入的這個元素轉換為塊級元素。*/
            clear: both;                     /*清除左右兩邊浮動。*/
            visibility: hidden;              /*可見度設為隱藏。注意它和display:none;是有區別的。*/
                                              /* visibility:hidden;仍然佔據空間，只是看不到而已；*/
            line-height: 0;                  /*行高為0；*/
            height: 0;                       /*高度為0；*/
            font-size:0;                     /*字型大小為0；*/
        }
 

整段程式碼就相當於在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。
之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。
<div class="head clearfix"></div>

此外，還給父元素加上溢位隱藏屬性（overflow: hidden;）來進行清除浮動。

3.3.8、position屬性

就像photoshop中的圖層功能會把一整張圖片分層一個個圖層一樣，網頁佈局中的每一個元素也可以看成是一個個類似圖層的層模型。層佈局模型就是把網頁中的每一個元素看成是一層一層的，然後通過定位屬性position對元素進行定位擺放，最終實現網頁的佈局。

定位屬性position有4個值，分別是靜態定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）。預設就是static。所以我們略過。

元素設定了定位以後，還要依靠4個方位屬性來進行定位擺放。

方位屬性：

/*
top：讓元素相對於指定目標的頂部偏移指定的距離。
  例如： top：10px; 表示距離頂部10畫素

right：讓元素相對於指定目標的右邊偏移指定的距離。
  例如： right：10px; 表示距離頂部10畫素

bottom：讓元素相對於指定目標的底部偏移指定的距離。
  例如： bottom：10px; 表示距離頂部10畫素

left：讓元素相對於指定目標的左邊偏移指定的距離。
  例如： left：10px; 表示距離頂部10畫素
*/

相對定位（relative）

相對定位就是在正常文件流中，元素相對於自身位置使用left、right、top、bottom屬性進行定位偏移。

      .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;

        }

        .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*  相對定位：參照物：元素本身位置，元素移動位置後，該元素還在文件流中，並不脫離，原位置並不會讓出來，仍然被佔用  */
            position: relative;
            left: 200px;
            top: 200px;


        }

        .c3{
            width: 200px;
            height: 200px;
            background-color: lightblue;


        }

絕對定位（absolute）

絕對定位就是將元素脫離文件流，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父級元素（設定了position屬性的父級元素）進行絕對定位，如果不存在這樣的父級元素，則預設是相對於body元素進行絕對定位。

輪播圖案例：

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
        <meta charset="utf8">
        <style>

            *{
                margin: 0;
                padding: 0;
            }

            .lunbo{
                width: 590px;
                height: 470px;
                border: 1px solid rebeccapurple;
                margin: 100px auto;
                position: relative;
            }

            .lunbo ul{
                list-style: none;
            }

            .lunbo .img li{
                position: absolute;
                top: 0;
                left: 0;
            }

            .lunbo .btn li{

                font-size: 25px;
                width: 40px;
                height: 40px;
                background-color: gray;
                text-align: center;
                line-height: 40px;
                border-bottom-right-radius: 50%;
                border-top-right-radius: 50%;
                color: white;

                position: absolute;
                top: 50%;
                margin-top: -20px;

            }

            .lunbo .left_btn{
                left: 0;
            }

            .lunbo .right_btn{
                right: 0;
            }
        </style>
  </head>
  <body>


  <div class="lunbo">
      <ul class="img">
          <li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
      </ul>
      <ul class="btn">
          <li class="left_btn"> < </li>
          <li class="right_btn"> > </li>
      </ul>
  </div>
  </body>
</html>

固定定位（fixed）

固定定位與絕對定位有點相似，但是固定定位是使用left、right、top、bottom屬性相對於整個瀏覽器的視窗進行定位，而不再相對於某個HTML頁面元素了，所以當元素使用了固定定位以後，就算頁面的滾動條滾動了，固定定位的元素也不會變化位置。也就是說固定定位是相對於視窗的定位，不受文件流的影響了。

相當於這個固定的元素：

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
      <meta charset="utf8">
    <style>

        body{
            margin: 0;
        }

        .c1{
            width: 100%;
            height: 2000px;
            background-color: lightgray;
        }

        .c2{
            width: 200px;
            height: 60px;
            background-color: yellowgreen;
            text-align: center;
            line-height: 60px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        
    </style>
  </head>
  <body>

   <div class="c1"></div>
   <div class="c2">返回頂部</div>

  </body>
</html>

4、總結

學習css選擇器以及屬性設定，尤其是盒子模型，浮動，定位等屬性的掌握。

5、作業

小米官網頁面設計

本文來自部落格園，作者：#緣起，轉載請註明原文連結：https://www.cnblogs.com/yuan-qi/p/15700708.html