CSS屬性(3)-浮動(dòng)定位

1、第四節(jié)第四節(jié) CSS屬性（屬性（3）css布局模型布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念,但布局模型是建立在盒模型基礎(chǔ)之上。CSS包含3種基本的布局模型：流動(dòng)模型（Flow）浮動(dòng)模型 (Float)層模型（Layer）：定位流動(dòng)模型 流動(dòng)模型是默認(rèn)的網(wǎng)頁(yè)布局模式。 也就是說(shuō)網(wǎng)頁(yè)在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的。 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置（占整行）。 在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（一行放多個(gè)

2、）浮動(dòng)float：屬性定義元素在哪個(gè)方向浮動(dòng) float:left; float:right; float:none;/*默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置*/注意： 1、任何元素都可以浮動(dòng) 2、一個(gè)盒子里面有一個(gè)元素浮動(dòng)，其他的都得浮動(dòng)。浮動(dòng)的浮動(dòng)的特性特性 1、浮動(dòng)元素會(huì)去找離它最近的有浮動(dòng)的元素的邊貼。 2、假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行 3、右浮動(dòng)會(huì)顛倒盒子順序 4、行內(nèi)顯示模式的標(biāo)簽加了浮動(dòng)后，可以直接設(shè)置寬高，無(wú)需轉(zhuǎn)換。 5、塊顯示模式的元素，如果沒(méi)有設(shè)置寬度，添加了浮動(dòng)后，會(huì)收縮到內(nèi)容的大小。 6、浮動(dòng)元素會(huì)脫離文檔流，會(huì)壓住下

3、一個(gè)塊元素，但不會(huì)壓住其內(nèi)容。清除浮動(dòng)clear：規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素clear:both;/*在左右兩側(cè)均不允許浮動(dòng)元素*/ 注意事項(xiàng)：子元素都浮動(dòng)，父元素的高度如果沒(méi)有設(shè)置值，則出現(xiàn)撐不開(kāi)的現(xiàn)象，清除浮動(dòng)可以解決清除浮動(dòng)特例：1、父元素有浮動(dòng)不需要清除浮動(dòng)2、父元素有絕對(duì)定位不需要清除浮動(dòng)清除浮動(dòng)方法1：定高法 給浮動(dòng)元素的父元素設(shè)置高度大于或等于最高的浮動(dòng)元素的高度。 用于小版塊，高度可以寫(xiě)死的部分。方法2：額外標(biāo)簽法清除浮動(dòng)方法3：給浮動(dòng)元素的父元素添加overflow：hiddenOverflow屬性 overflow:規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情 overflow

4、:visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 overflow:hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。 overflow:scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 overflow:auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 注意： 利用overflow：hidden清除浮動(dòng)時(shí)，父元素里面不能有定位超出的元素，如果有，超出的部分會(huì)被隱藏。清除浮動(dòng)方法4：利用after偽元素清除浮動(dòng)清除浮動(dòng) visibility:規(guī)定元素是否可見(jiàn) visibility:visible； 默認(rèn)值，元素是可見(jiàn)的 visibilit

5、y:hidden ； 元素是不可見(jiàn)的 注意： 做項(xiàng)目時(shí)我們常用after偽元素清除浮動(dòng)，因?yàn)樗粫?huì)額外增加標(biāo)簽，而且不會(huì)出現(xiàn)因?yàn)橛胦verflow：hidden超出的部分會(huì)被隱藏，父元素高度也不用寫(xiě)死，我們只要在頁(yè)面寫(xiě)一次清浮動(dòng)的代碼，在需要清浮動(dòng)的位置加個(gè)clearfix類(lèi)名就可以了。定位屬性 position: static; 默認(rèn)值。 無(wú)定位，在HTML文檔流中默認(rèn)的位置。 position: absolute;(表示絕對(duì)定位) 這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的祖先元素進(jìn)行絕對(duì)定位。如果不存在這

6、樣的元素，則相對(duì)于body元素。定位屬性 position: relative;（表示相對(duì)定位） 相對(duì)于它在正常文檔流的位置進(jìn)行定位。 它通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置 position: fixed; （表示固定定位） 相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定。定位的使用絕對(duì)定位的元素完全脫離標(biāo)準(zhǔn)流（在文檔流中不占位置）。 它完全漂浮在標(biāo)準(zhǔn)流的上方。相對(duì)定位在文檔流中是占有位置的。 不管怎么移動(dòng)，原來(lái)的位置保留。根據(jù)這個(gè)特點(diǎn)，我們一般這樣使用：子元素絕對(duì)定位，父元素相對(duì)定

7、位。定位的特性1、行內(nèi)元素添加了絕對(duì)定位可以直接給高和寬不用轉(zhuǎn)換2、塊元素添加了絕對(duì)定位，如果沒(méi)有指定寬度，會(huì)自動(dòng)收縮到內(nèi)容的寬度。3、絕對(duì)定位的盒子不受父盒子padding的影響。4、父元素有絕對(duì)定位，可以不需要清除浮動(dòng)堆疊屬性z-index:規(guī)定元素的堆疊順序 擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。 元素可擁有負(fù)的 z-index 屬性值 z-index的默認(rèn)屬性值是0 僅能在定位元素上奏效（relative,fixed,absolute) 該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶(hù)更近，為負(fù)數(shù)則表示離用戶(hù)更遠(yuǎn)。定位使用的范圍層布局模型（定位）就像是圖像軟件PhotoShop中