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的選擇器
2.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>
2.2.2、組合選擇器
- 後代子代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*後代選擇器*/
.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>
/*與選擇器*/
p.c1{
color: red;
}
/*或選擇器*/
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>
2.2.3、屬性選擇器
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>
2.2.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 | 選擇屬於父元素的第一個子元素的每個 <p> 元素。 |
|---|---|---|
| :last-child | p:last-child | 選擇屬於其父元素最後一個子元素每個 <p> 元素。 |
| :before | p:before | 在每個 <p> 元素的內容之前插入內容。 |
| :after | p:after | 在每個 <p> 元素的內容之後插入內容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.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>item1</p>
<div>item1</div>
<p>item1</p>
</div>
<p id="i1">p標籤</p>
</body>
</html>
2.2.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 |
2.2.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;
}
</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);
}
</style>
另外要注意，使用十六進位制表示顏色值的時候，如果字元的格式類似於“AAAAAA”的這種，六個字元一樣的；又或者是“AABBCC”，這種，一二，三四，五六 位置上的數字一樣的，我們可以使用簡寫來表達。
- text-align（文字對齊方式）
/*
text-align屬性可以設定文字內容的水平對齊方式。屬性值常用的有
左對齊left、居中對齊center、右對齊right。justify 實現兩端對齊文字效果。
*/
- line-height（字型行高）
// 字型行高即字型最底端與字型內部頂端之間的距離。值可以是normal、px、number、%。
行高 = 字型大小 + 上半行距 + 下半行距
- vertical-align
vertical-align 屬性設定元素的垂直對齊方式。
<style>
img{
/*vertical-align: bottom;*/
vertical-align: -100px;
}
</style>
<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: 背景顏色 背景圖片 背景平鋪方式 背景定位;
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; // 宣告當前元素的顯示模式為隱藏
*/
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>
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>
- 浮動模型
要學習浮動模型的佈局模式，就要了解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>
- 字圍效果
<!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 的元素都會自動被設定為一個行內塊狀元素，具有行內塊狀元素的特性。
- 假如某個元素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>
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>
清除浮動解決父級塌陷問題：
.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屬性相對於其最接近的一個具有定位屬性的父級元素進行絕對定位，如果不存在這樣的父級元素，則預設是相對於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、作業
小米官網頁面設計
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
background-color: #fff;
min-width: 1226px;
}
.site-topbar{
width: 100%;
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
/*height: 40px;*/
/*background-color: lightskyblue;*/
}
.topbar-nav{
float: left;
height: 40px;
line-height: 40px;
}
.topbar-nav a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
text-decoration: none;
}
.topbar-nav span{
color: #424242;
}
.topbar-cart{
float: right;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
color: #b0b0b0;
background: #424242;
}
.topbar-cart a{
height: 40px;
line-height: 40px;
text-align: center;
color: #b0b0b0;
background: #424242;
text-decoration: none;
}
.topbar-info{
float: right;
height: 40px;
line-height: 40px;
}
.topbar-info a{
float: left;
text-decoration: none;
padding: 0 5px;
color: #b0b0b0;
line-height: 40px;
/*background-color: orange;*/
}
.topbar-info span{
float: left;
/*color: #424242;*/
}
.site-header{
background-color: #616161;
}
.site-header .container{
width: 1226px;
margin: 0 auto;
/*background-color: orange;*/
}
.header-logo{
width: 234px;
float: left;
margin-top: 20px;
/*border: 1px solid red;*/
}
.header-logo .logo{
float: left;
width: 56px;
height: 56px;
background: url("//s02.mifile.cn/assets/static/image/logo-mi2.png") no-repeat;
background-size: 56px;
}
.header-nav{
width: 850px;
float: left;
}
.nav-list{
list-style: none;
float: left;
height: 88px;
padding: 12px 0 0 30px;
font-size: 16px;
/*border: 1px solid indianred;*/
}
.nav-list .nav-item{
float: left;
}
.nav-list .nav-item a{
display: block;
padding: 22px 10px 38px;
text-decoration: none;
color: #333;
/*border: 1px solid green;*/
}
.header-search{
float: right;
width: 296px;
/*border: 1px solid red;*/
margin-top: 25px;
}
.header-search .search-form{
position: relative;
display: block;
width: 296px;
height: 50px;
}
.header-search input{
position: absolute;
top: 0;
border: 1px solid #e0e0e0
}
.header-search .search-form .search-text{
left: 0;
width: 223px;
height: 50px;
padding: 0 10px;
font-size: 14px;
line-height: 50px;
}
.header-search .search-form .search-btn{
right: 0;
width: 52px;
height: 52px;
font-size: 24px;
background: #fff;
color: #616161;
line-height: 50px;
}
.clearfix:after{
display: block;
content: "";
clear: both;
}
.home .container{
width: 1226px;
margin: 0 auto;
height: 460px;
background-color: lightblue;
}
.home-hero .cate{
float: left;
width: 20%;
background-color: orange;
height: 460px;
}
.home-hero .lunbo{
float: left;
width: 80%;
background-color: lightskyblue;
height: 460px;
}
.hero-sub .home-channel-list{
float: left;
width: 20%;
height:170px ;
background-color: #616161;
}
.hero-sub .J_homePromoList{
list-style: none;
}
.hero-sub .J_homePromoList li{
float: left;
width: 316px;
height:170px ;
background-color: lightpink;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="header clearfix">
<div class="site-topbar">
<div class="container">
<div class="topbar-nav">
<a href="">小米商城</a>
<span>|</span>
<a href="">MIUI</a>
<span>|</span>
<a href="">雲服務</a>
<span>|</span>
<a href="">電視</a>
<span>|</span>
</div>
<div class="topbar-cart">
<a href="">購物車<span>(0)</span></a>
</div>
<div class="topbar-info">
<a href="">登入</a>
<span>|</span>
<a href="">註冊</a>
<span>|</span>
<a href="">訊息通知</a>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="header-logo">
<a href="" class="logo"></a>
</div>
<div class="header-nav">
<ul class="nav-list">
<li class="nav-item"><a href=""><span>小米</span></a></li>
<li class="nav-item"><a href=""><span>紅米</span></a></li>
<li class="nav-item"><a href=""><span>電視</span></a></li>
<li class="nav-item"><a href=""><span>筆記本</span></a></li>
<li class="nav-item"><a href=""><span>服務</span></a></li>
</ul>
<div class="header-search ">
<form action="" class="search-form">
<input type="text" class="search-text" placeholder="小米11">
<input type="submit" value="?" class="search-btn" >
</form>
</div>
</div>
</div>
</div>
</div>
<div class="home">
<div class="container">
<div class="home-hero">
<div class="cate"></div>
<div class="lunbo"></div>
</div>
<div class="hero-sub">
<div class="home-channel-list"></div>
<ul class="J_homePromoList">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>