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

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

網(wǎng)站名稱：讓你五分鐘了解width的計(jì)算
鏈接分享：http://www.muchs.cn/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)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)