讓你五分鐘了解width的計(jì)算

如果問(wèn) CSS 中的 width 表示什么，通常會(huì)得到的回答的「元素寬度」。但這是個(gè)相當(dāng)模糊的概念，因?yàn)樵诓煌暮凶幽Ｐ椭性貙挾鹊母拍钍遣煌摹Ｈ绻麊?wèn) width 屬性的百分比取值怎么計(jì)算，通常會(huì)得到的答案是「容器寬度」，這又是另一個(gè)模糊的概念。 width 到底是個(gè)啥？ 盒子模型有 border-box、padding-box、content-box 三種。在 border-box 在中，width 表示包括了 border、padding、content 三部分的寬度總和，padding-box 中 width 不包含 border 部分的寬度，只計(jì)算 padding 和 content 部分，而 content-box 只表示 content 部分的寬度。 width 的百分比取值到底怎么計(jì)算？ 無(wú)論一個(gè)元素的容器是何種盒子模型，在其 position 屬性為 static 或 relative 時(shí) width 的百分比取值時(shí)總是相對(duì)于容器的 content-box 來(lái)計(jì)算。但是如果 position 屬性為 absolute，其 width 屬性就會(huì)尋找祖先元素中最近的非 static 元素，并以這個(gè)元素的 padding-box 作為計(jì)算參考。如果 position 屬性為 fixed，則 width 的百分比取值直接相對(duì)于文檔寬度來(lái)計(jì)算。 margin 的影響 常規(guī)流中的塊級(jí)元素是自適應(yīng)容器的，但是這個(gè)「自適應(yīng)容器」的概念其實(shí)也很模糊。所謂「自適應(yīng)容器」確切地說(shuō)就是讓一個(gè)元素盡可能地填滿容器（在水平方向上），也就是讓元素的「占用空間」（這是 margin-box 的概念，實(shí)際上 box-sizing 目前沒(méi)有 margin-box 這個(gè)取值）恰好等于容器的 content-box 寬度。 溢出與滾動(dòng)條 元素的 content 寬度并不等價(jià)于其內(nèi)容的寬度，內(nèi)容完全可以超出元素的 content 寬度，并通過(guò) overflow 屬性控制超出后的行為。如果元素不是自適應(yīng)內(nèi)容的，那么無(wú)論 overflow 的取值如何，其 content 寬度就不會(huì)因?yàn)閮?nèi)容的溢出而增加（但要注意如果出現(xiàn)滾動(dòng)條的話滾動(dòng)條占用的寬度可能使 content 的寬度減小）。如果元素是自適應(yīng)內(nèi)容寬度的，那么 CSS 引擎要先計(jì)算內(nèi)容的寬度，并將其作為容器的 content 寬度，然后再對(duì)內(nèi)容中的 width 百分比取值做計(jì)算。 注意事項(xiàng) 了解以上幾種情況基本上可以滿足一般業(yè)務(wù)需求了。但要注意垂直方向的計(jì)算和水平方向是存在差異的，不要把這套寬度計(jì)算細(xì)則直接用于垂直高度。對(duì)于垂直方向與水平的差異見(jiàn) height 與 width 的計(jì)算差異。 本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站名稱：讓你五分鐘了解width的計(jì)算
鏈接分享：http://m.kartarina.com/news44/326444.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站收錄、面包屑導(dǎo)航、App設(shè)計(jì)、網(wǎng)站制作、服務(wù)器托管

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)