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

網站名稱：讓你五分鐘了解width的計算
鏈接分享：http://www.js-pz168.com/news44/326444.html

成都網站建設公司_創新互聯，為您提供自適應網站、網站收錄、面包屑導航、App設計、網站制作、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯