??今天主要學(xué)習(xí)CSS布局。
??一、標(biāo)準(zhǔn)流和display屬性
??1.標(biāo)準(zhǔn)流：瀏覽器對(duì)標(biāo)簽?zāi)J(rèn)的布局方式就是標(biāo)準(zhǔn)流
??2.標(biāo)準(zhǔn)流布局原則：
??塊級(jí)：a.塊級(jí)標(biāo)簽一個(gè)占一行(不管標(biāo)簽的寬度是否是父標(biāo)簽的寬度)。
?????b.默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容的高度
?????c.直接設(shè)置寬高有效
??行內(nèi)塊標(biāo)簽：
?????a.多個(gè)行內(nèi)塊可以在一行顯示
?????b.默認(rèn)的寬高都是內(nèi)容的寬高
?????c.直接設(shè)置寬高有效
??行內(nèi)標(biāo)簽：
?????a.多個(gè)行內(nèi)可以在一行顯示
?????b.默認(rèn)的寬高都是內(nèi)容的寬高
?????c.直接設(shè)置寬高無(wú)效
??3.display屬性：轉(zhuǎn)換標(biāo)簽的性質(zhì)
block:塊級(jí)
inline:行內(nèi)
inline-block:行內(nèi)塊
注意：行內(nèi)塊標(biāo)簽和其他標(biāo)簽之間默認(rèn)有間隙，而且這個(gè)間隙無(wú)法消除
??二、浮動(dòng)
??1.怎么浮動(dòng)
??通過(guò)給float屬性賦值為left或者right來(lái)讓標(biāo)簽浮動(dòng)。浮動(dòng)會(huì)讓標(biāo)簽脫流。
??浮動(dòng)的目的就是讓豎著顯示的可以橫著來(lái)(針對(duì)塊)
??2.浮動(dòng)的效果:
??a.所有的標(biāo)簽浮動(dòng)后，一行可以顯示多個(gè)；默認(rèn)的寬高是內(nèi)容的大?。豢梢栽O(shè)置寬度和高度
??b.一行顯示不了的時(shí)候才會(huì)自動(dòng)換行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="div1" style="background-color: rgba(255,255,0,0.3); width: 50%; height: 100px; float: left;">
</div>
<div id="" style="background-color: slateblue;width: 40%; height: 150px; float: left;">
</div>
<div id="div2">
</div>
</body>
</html>
??三、清除浮動(dòng)
??1.定義：
??清除浮動(dòng)：清除浮動(dòng)不是將標(biāo)簽的浮動(dòng)給去掉，而是清除因?yàn)楦?dòng)而產(chǎn)生的高度塌陷的問(wèn)題。
??高度塌陷：父標(biāo)簽不浮動(dòng)，子標(biāo)簽浮動(dòng)，并且不設(shè)置父標(biāo)簽的高度，就會(huì)產(chǎn)生高度塌陷的問(wèn)題(父標(biāo)簽)。
??2.方法
??方案一：添加空盒子，在高度塌陷的標(biāo)簽(父標(biāo)簽)的最后添加一個(gè)空的div,并設(shè)置樣式clear的值為both。
??方案二：給父標(biāo)簽添加樣式設(shè)置overflow的值為hidden。
??方案三: 萬(wàn)能清除法。
#father:after{
display: block;
clear: both;
content: '.';
visibility: hidden;
height: 0;
}
#father{
zoom: 1;
注意：father為父標(biāo)簽。
??四、定位
??CSS中可以通過(guò)left,right,bottom,top屬性來(lái)設(shè)置標(biāo)簽到上下左右的距離(但是默認(rèn)情況下這些值不是都有效的);
??想要讓定位屬性有效，必須通過(guò)position屬性來(lái)設(shè)置參考對(duì)象。
??1.position
??initial: 默認(rèn)值, 沒有相對(duì)定位。
??absolute: 相對(duì)第一個(gè)非static/initial父標(biāo)簽進(jìn)行定位。
??relative: 相對(duì)于自己在標(biāo)準(zhǔn)流中位置來(lái)定位。（當(dāng)標(biāo)簽本身不希望去定位，只是想讓自己的子標(biāo)簽可以相對(duì)本身來(lái)定位的時(shí)候使用）。
??fixed：相對(duì)于瀏覽器定位。
??sticky:當(dāng)網(wǎng)頁(yè)的內(nèi)容不超過(guò)一屏(不滾動(dòng))的時(shí)候，就按照標(biāo)準(zhǔn)流進(jìn)行定位。超過(guò)了就相對(duì)瀏覽器定位。
??2.注意：如果想要設(shè)置right值要保證相對(duì)標(biāo)簽的寬度是確定的。如果想要設(shè)置bottom值要保證相對(duì)對(duì)象的高度是確定的。
??3.技巧：當(dāng)遇到某個(gè)方向定位死活都無(wú)效的時(shí)候，可以嘗試讓這個(gè)標(biāo)簽浮動(dòng)，然后再定位。
