1、浮動

　　浮動是CSS中用到的最多的一個(gè)選項(xiàng)，他有三個(gè)性質(zhì)。關(guān)于浮動我們要強(qiáng)調(diào)一點(diǎn)，永遠(yuǎn)不是一個(gè)東西單獨(dú)浮動，浮動都是一起浮動，要浮動，大家都浮動。

　　1.1 浮動元素脫離標(biāo)準(zhǔn)文檔流

　　　　1.1.1 大概描述：有兩個(gè)盒子，一個(gè)盒子浮動，一個(gè)盒子不浮動。浮動的盒子會脫離標(biāo)準(zhǔn)文檔流，不浮動的盒子會在標(biāo)準(zhǔn)文檔流中成為第一個(gè)，所以兩者出現(xiàn)覆蓋現(xiàn)象。

　　　　

　　　　1.1.2 大概描述：一個(gè)行內(nèi)標(biāo)簽在標(biāo)準(zhǔn)文檔流中是不能設(shè)置寬高的，但是使用float使其脫離文檔流之后，就可以對其設(shè)置寬高了。所有浮動的標(biāo)簽不會去區(qū)分行內(nèi)標(biāo)簽和塊級標(biāo)簽。也就是說：一旦一個(gè)元素浮動了，那么，將能夠并排了，并且能夠設(shè)置寬高了。無論它原來是個(gè)div還是個(gè)span。

　　1.2 浮動的元素互相貼靠　

　　　　以float向左浮動為例：

　　　　如果有足夠空間，那么就會靠著2哥。如果沒有足夠的空間，那么會靠著1號大哥。

　　　　如果沒有足夠的空間靠著1號大哥，自己去貼左墻。

　　　　

　　1.3 浮動元素有“自圍”的效果

　　　　自圍效果就是：浮動的盒子可以遮蓋文檔標(biāo)準(zhǔn)流的第一個(gè)盒子，但是不會遮蓋里面的文字，文字會圍繞浮動的盒子顯示。

　　　　在CSS代碼中讓div浮動，p不浮動，那么p中的文字就睡形成這種自圍效果。

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

　　　　

　　　　1.4收縮現(xiàn)象

　　　　　　一個(gè)浮動元素如果沒有給其設(shè)置寬高，則其大小收縮為文字的寬高。

2、絕對定位 絕對定位最大的用處就是制作頁面中的壓蓋效果。

　　絕對定位使用的參考點(diǎn)是頁面的角。絕對定位脫離標(biāo)準(zhǔn)文檔物流即脫標(biāo)。

　　position:absolute;

　　top: top: bottom: bottom:

　　left: 參考點(diǎn)是頁面的左上角。 right: 參考點(diǎn)就是頁面的右上角。left: 參考點(diǎn)就是頁面的左下角。right: 參考點(diǎn)就是頁面的右下角。

參考點(diǎn)選擇好之后，他是牢牢地跟著參考點(diǎn)走的。

這個(gè)頁面的角的理解：他會跟著卷動的不要死死地盯著瀏覽器的角。

　　絕對定位的參考點(diǎn)，如果用top描述，那么定位參考點(diǎn)就是頁面的左上角，而不是瀏覽器的左上角：

　　如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應(yīng)的頁面的左下角：

面試題題目：

因?yàn)橐呀?jīng)發(fā)生卷動了，所以絕對定位的參考點(diǎn)也會發(fā)生卷動，找出參考點(diǎn)的位置即可。

　　子絕父相的應(yīng)用：（banner圖中的幾個(gè)小圓點(diǎn)切換）

　　　　兒子元素使用絕對定位，父元素使用相對定位，這樣的話兒子元素的參考點(diǎn)將會發(fā)生改變，將不再以頁面為參考點(diǎn)，而是以父輩元素的盒子的角為參考點(diǎn)。這個(gè)父元素不一定是其直接父親，父輩元素都可以，哪個(gè)父元素使用了相對定位絕對定位的兒子元素就聽誰的，而且要聽最近的祖先元素的相對定位。

　　絕對定位的盒子居中：

　　　　position:absolute; position:absolute;

　　　　left:50%; top:50%;

　　　　margin-left:負(fù)的盒子寬度的一半 margin-top:負(fù)的盒子高度的一半

3、固定定位

　　解釋：就是相對瀏覽器定位，無論頁面怎么滾動，他都不會變化。

　　用途：①固定導(dǎo)航欄②返回頂部

4、父子關(guān)系：兒子就是占用父親內(nèi)容的寬高，和父親的padding沒有關(guān)系。

總結(jié)

以上是生活随笔為你收集整理的CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。