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

創(chuàng)新互聯(lián)公司主營(yíng)岑鞏網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App定制開發(fā),岑鞏h5成都小程序開發(fā)搭建,岑鞏網(wǎng)站營(yíng)銷推廣歡迎岑鞏等地區(qū)企業(yè)咨詢

　　CSS 定位機(jī)制

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

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

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

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

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

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

　　塊級(jí)元素

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

　　觸碰到頁(yè)面邊緣時(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ì)定位元素的高度

網(wǎng)頁(yè)標(biāo)題：好程序員web前端分享CSS基礎(chǔ)知識(shí)之position-創(chuàng)新互聯(lián)
URL地址：http://chinadenli.net/article48/cophhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)