好程序員web前端分享CSS基礎(chǔ)知識(shí)之position

　 好程序員 web 前端分享 CSS 基礎(chǔ)知識(shí)之 position

　　CSS 定位機(jī)制

　　標(biāo)準(zhǔn)文檔流 (Normal flow)

　　浮動(dòng)定位 (Floats)

　　絕對(duì)定位 (Absolute positioning)

　　標(biāo)準(zhǔn)文檔流

　　從上到下，從左到右，輸出文檔內(nèi)容

　　由塊級(jí)元素和行級(jí)元素組成

　　塊級(jí)元素

　　從左到右撐滿頁面，獨(dú)占一行

　　觸碰到頁面邊緣時(shí)，會(huì)自動(dòng)換行

　　常見的標(biāo)簽有： div 、 ul 、 li 、 di 、 dt 、 p

　　行級(jí)元素

　　能在同一行內(nèi)顯示

　　不會(huì)改變 HTML 文檔結(jié)構(gòu)

　　常見的標(biāo)簽有： input 、 span 、 label 、 strong 、 img

　　盒子模型

　　邊框 (border)

　　外邊距 (margin)

　　內(nèi)邊距 (padding)

　　盒子中的內(nèi)容 (content)

　　盒子模型尺寸 = 邊框 + 外邊距 + 內(nèi)邊距 + 盒子中內(nèi)容的尺寸

　　盒子 3D 模型

　　第一層： border

　　第二層： content + padding

　　第三層： background-image

　　第四層： background-color

　　第五層： margin

　　浮動(dòng)定位

　　三個(gè)屬性： left( 左浮動(dòng) ) 、 right( 右浮動(dòng) ) 、 none( 不浮動(dòng) )

　　元素會(huì)左移、或右移、直到碰到容器為止

　　仍處于標(biāo)準(zhǔn)文檔流中

　　清除浮動(dòng)的常用方法

　　clear 屬性，常用 clear:both;( 當(dāng)父包含塊縮成一條時(shí)無效 )

　　同時(shí)設(shè)置 width:100%( 或固定寬度 )+overflow:hidden;

　　相對(duì)定位

　　相對(duì)于自身原有位置進(jìn)行偏移

　　仍處于標(biāo)準(zhǔn)文檔流中

　　隨即擁有偏移屬性和 z-index 屬性

　　絕對(duì)定位

　　建立了以包含快為基準(zhǔn)的定位

　　完全脫離了標(biāo)準(zhǔn)文檔流

　　隨即擁有偏移屬性和 z-index 屬性

　　絕對(duì)定位 - 偏移參考基準(zhǔn)

　　無已定位祖先元素，以為偏移參考基準(zhǔn)

　　有已定位祖先元素，以距其最近的已定位祖先元素為偏移參考基準(zhǔn)

　　絕對(duì)定位 - 未設(shè)置偏移量

　　無論是否存在已定位的祖先元素，都保持在元素初始位置

　　脫離了標(biāo)準(zhǔn)文檔流

　　絕對(duì)定位 - 常見問題

　　沒有設(shè)置寬度時(shí)，元素的寬度根據(jù)內(nèi)容進(jìn)行調(diào)節(jié)

　　左右布局時(shí)，柱子層的高度，一定要大于絕對(duì)定位元素的高度