CSS
浮動(dòng)
標(biāo)準(zhǔn)流 ： 塊標(biāo)簽一個(gè)占一行， 從上往下布局；行內(nèi)標(biāo)簽，一行可以顯示多個(gè)，從左往右，遇到邊界自動(dòng)換行
脫流：浮動(dòng)，定位
浮動(dòng)：讓豎著顯示的標(biāo)簽橫著來(lái) float:left/right
注意：如果要使用浮動(dòng)，那么同一級(jí)的所有的標(biāo)簽都要浮動(dòng)
? 如果父標(biāo)簽浮動(dòng)，那么子標(biāo)簽的位置會(huì)跟著一起動(dòng)
? 布局基本順序，從上往下，從左往右
清除浮動(dòng)
清除浮動(dòng)是指因?yàn)楦?dòng)而產(chǎn)生的問(wèn)題(高度崩塌) 但是這個(gè)問(wèn)題不是什么時(shí)候都會(huì)產(chǎn)生的。
怎么清除浮動(dòng)：
方法一：添加空的div，在父標(biāo)簽的最后添加一個(gè)空的div，然后設(shè)置style內(nèi)容為clear:both
方法二：在父類標(biāo)簽中設(shè)置一個(gè)樣式 overflow:hidden
display
HTML中標(biāo)簽分為塊和行內(nèi)
CSS中標(biāo)簽分為塊，行內(nèi)塊，行內(nèi) 這些通過(guò)display來(lái)區(qū)別
display的值有 block(塊)，inline-block(行內(nèi)塊，inline(行內(nèi))
盒子模型
在HTML中每個(gè)標(biāo)簽都是由4個(gè)部分組成的
1.內(nèi)容:顯示標(biāo)簽內(nèi)部的內(nèi)容，可見(jiàn)的(設(shè)置寬和高的值，就是設(shè)置內(nèi)容部分的大小)
2.內(nèi)邊距(padding):默認(rèn)為0，可見(jiàn)，不能顯示內(nèi)容
3.邊框(border):可見(jiàn)的，如果有內(nèi)邊距就顯示在內(nèi)邊距上，如果沒(méi)有就顯示在內(nèi)容上
4.外邊距(margin):不可見(jiàn)的，但是會(huì)占據(jù)瀏覽器空間
padding
padding的值有四個(gè)
可以單獨(dú)設(shè)，也可以一起設(shè)
padding:10px 上下左右都為10px
padding:10px,20px 上下是10px, 左右為20px
?
border
邊框
可以單獨(dú)設(shè)，也可以一起設(shè)
格式：寬度 樣式 顏色
樣式： solid實(shí)線 double 雙線 dotted點(diǎn)狀 dashed 虛線
定位(position)
想要設(shè)置標(biāo)簽的top,buttom,left,right的值必須設(shè)置標(biāo)簽的參考方式
Initial:默認(rèn)值，沒(méi)有參考對(duì)象
Absolute:相對(duì)第一個(gè)position的值是非static，非initial的父標(biāo)簽進(jìn)行定位
relative：在標(biāo)準(zhǔn)流中正常的定位
fixed：相對(duì)于瀏覽器定位
sticky：不滾動(dòng)的時(shí)候按標(biāo)準(zhǔn)流布局，滾動(dòng)的時(shí)候相對(duì)于瀏覽器定位
