一、標(biāo)準(zhǔn)流
1.什么是標(biāo)準(zhǔn)流
標(biāo)簽在沒有添加布局相關(guān)的樣式時(shí)，在瀏覽器中默認(rèn)的布局方式
塊級(jí)標(biāo)簽：
一個(gè)占一行（不管寬度大?。?br>
默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容的高度；設(shè)置寬高有效(div)
行內(nèi)標(biāo)簽：
一行可以顯示多個(gè)
默認(rèn)大小是內(nèi)容的大?。辉O(shè)置寬高無效(span,a)
行內(nèi)塊標(biāo)簽:
一行可以顯示多個(gè)
默認(rèn)大小是內(nèi)容的大?。辉O(shè)置寬高有效(img,input)
2.實(shí)際布局的選擇
a.左右結(jié)構(gòu)使用行內(nèi)塊
didplay屬性
定義：可以讓任何標(biāo)簽變成塊級(jí)、行內(nèi)、行內(nèi)塊；隱藏標(biāo)簽
block(塊)
inline(行內(nèi))
inline-block(行內(nèi)塊) - 默認(rèn)左右間隙(因?yàn)閾Q行產(chǎn)生)，這個(gè)間隙可以通過將父標(biāo)簽的字體大小設(shè)置為0來去掉
none(隱藏)
b.脫流/脫標(biāo)（脫離標(biāo)準(zhǔn)流）
方式一：float(浮動(dòng))
方式二：定位（left,right,top,bottom position)
二、浮動(dòng)
特點(diǎn)：浮動(dòng)會(huì)讓標(biāo)簽脫流
脫流：
定義：讓標(biāo)簽脫離標(biāo)準(zhǔn)流布局
特點(diǎn)：
一行以顯示多個(gè)
默認(rèn)大小是內(nèi)容大小，并且設(shè)置寬高有效’的方式布局
float屬性
left
right
文字環(huán)繞
應(yīng)用場(chǎng)景：在某一塊內(nèi)環(huán)繞文字
做法：被環(huán)繞的標(biāo)簽浮動(dòng)，環(huán)繞的標(biāo)簽不浮動(dòng)
三、清除浮動(dòng)
1.什么是高度塌陷
當(dāng)父標(biāo)簽不浮動(dòng)，子標(biāo)簽浮動(dòng)時(shí)，父標(biāo)簽就會(huì)產(chǎn)生高度塌陷的問題
2.什么是清除浮動(dòng)
清除浮動(dòng)指的是因?yàn)楦?dòng)而產(chǎn)生的高度塌陷
a.方法一：添加空盒子
在高度會(huì)塌陷的父標(biāo)簽的最后添加一個(gè)空的子標(biāo)簽div；然后給空的div添加樣式，設(shè)置clear屬性的值為both
缺點(diǎn)：當(dāng)高度塌陷的位置很多時(shí)，重復(fù)寫的代碼量過大
(記)b.方法二：overflow
給高度會(huì)塌陷的父標(biāo)簽，添加樣式設(shè)置overflow屬性值為hidden
c.方法三：萬能清除法
選擇高度會(huì)塌陷的父標(biāo)簽，給after狀態(tài)添加樣式，再給這個(gè)父標(biāo)簽添加樣式：zoom:1
.clear:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
clear{
zoom: 1;
}
四、定位
1.定位
特點(diǎn)：定位會(huì)讓標(biāo)簽脫流
2.定位屬性：
top:頂部的距離
bottom:底部的距離
left:左邊的距離
right:右邊的距離
以上四個(gè)屬性想要有效，必須通過position屬性來說明參考對(duì)象
position屬性:
initial和static - 默認(rèn)值，不能定位（定位無效）
absolute - 絕對(duì)定位:以第一個(gè)position的值不是默認(rèn)值的父標(biāo)簽進(jìn)行定位
注意：body標(biāo)簽的position不是initial和static
relative - 相對(duì)定位:相對(duì)于標(biāo)準(zhǔn)流定位（相對(duì)于自己在標(biāo)準(zhǔn)流中的位置進(jìn)行定位）
一般使用relative是在標(biāo)簽本身不需要定位，但是希望自己的子標(biāo)簽相對(duì)于自己定位的時(shí)候使用
fixed - 相對(duì)于瀏覽器定位
sticky - 當(dāng)瀏覽器內(nèi)容沒有超過一屏?xí)r，顯示在內(nèi)容最下面，當(dāng)瀏覽器內(nèi)容超過一屏?xí)rtop和bottom有效，并且顯示在瀏覽器底部（left和right無效）
五、盒子模型
1.網(wǎng)頁上所有的可視標(biāo)簽都是一個(gè)盒子模型：
一個(gè)標(biāo)簽是由4個(gè)部分組成，分別是：
- content
- padding
- border
- margin
可見：content、padding、border
不可見：margin(占位)
2.盒子模型的每個(gè)部分
content：標(biāo)簽內(nèi)容
特點(diǎn)：
1.標(biāo)簽寬高作用于content
2.標(biāo)簽中的文字和子標(biāo)簽都是添加在content上
padding：在內(nèi)容的外部，默認(rèn)是0，可見
特點(diǎn)：
1.：背景顏色也作用于padding
2.：四個(gè)方向(top,bottom,left,right),可單獨(dú)設(shè)置
border：邊框；默認(rèn)是0，可見
特點(diǎn)：
1.四個(gè)方向，顏色和大小都可以單獨(dú)設(shè)置
border-radius：設(shè)置邊框四個(gè)角的圓角弧度
注意：沒有border邊框也可以設(shè)置，這時(shí)作用在padding上
margin：外邊距
特點(diǎn)：
四個(gè)方向（top,bottom,left,right）可單獨(dú)設(shè)置
六、常用屬性
font-family:設(shè)置字體
font-weight:設(shè)置文字加粗（取值100-900），100-700不斷加粗
font-style:設(shè)置字體傾斜(italic/oblique/normal)
italic/oblique - 傾斜
normal - 不傾斜
text-align:設(shè)置內(nèi)容水平方向?qū)R方式
left - 左對(duì)齊
right - 右對(duì)齊
center - 居中
line-height:設(shè)置文字行高
特點(diǎn)：可以通過設(shè)置行高和標(biāo)簽的高度一樣來讓標(biāo)簽中的內(nèi)容在垂直方向上居中顯示
text-decoration:文字修飾
underline - 下劃線
overline - 上劃線
line-through - 刪除線
none - 去掉文字修飾，即去除下劃線
text-indent:首行縮進(jìn)
說明：p標(biāo)簽的文字有效；一般用em(空格)為單位
letter-spacing:設(shè)置每個(gè)文字之間的間隙（單位：px）
background:設(shè)置背景
圖片地址 是否平鋪 x y 背景顏色
