在html文檔中，元素體現為一個一個的方形盒子。每個盒子由以下四種屬性來確定他在文檔中的位置和大小：

• content 內容區域
• padding 內邊距
• border 邊框
• margin 外邊距

標準和非標準

在

標準盒模型 定義下，content占據的空間由(min/max)width，(min/max)height來控制。

而在IE或者是

box-sizing: border-box 模式下，content空間應該還包含了padding和border的寬高。

現在通常使用

box-sizing: border-box 這種非標準盒模型來開發。

content 內容區域

width 與 height

• width的單位可以是px，rem，em，vw，也可以是百分比%。當單位是%時，取值是父元素寬度的比值。

<!--.div2的寬度是200px( 1000 * 20%)-->.div1{width: 1000px} .div1 > .div2{width: 20%}

• height的情況會復雜一些，px，rem，em，vh為單位時，效果和width相仿。而為百分比%時，并不會簡單的按照父元素的高度來計算。

<!--如果需要讓height百分比生效，需要這樣設置--> html, body{height: 100%} #app, .div1{height: 100%} .div2{height: 20%}

html代碼結構片段

#app.div1.div2

對子元素的影響

如果內容區域內的元素寬高超出了定義的大小，可以通過

overflow:hidden來截斷，也可以通過 text-overflow: ellipsis來控制文字的溢出。

padding 內邊距

padding值指定了content到border之間的距離。不能設置為負值。利用padding的百分比%單位，可以實現盒子的等比縮放。

<!--padding百分比按照父元素寬度計算，所以div2會是一個正方形--> .div1{width: 100%} .div1 > .div2{width: 20%;padding-top: 20%}

border 邊框

邊框包裹在內容區域周圍，可以是實線，也可以是虛線，甚至可以使用圖片。邊框會隨著

border-radius屬性的設置而彎曲。

• 顏色：邊框的顏色會繼承字體的顏色。
• 在移動端手機上，通常使用偽元素方式來實現 1px邊框。

.1px-top{position: relative} .1px-top::before{content: '';position: absolute;width: 100%;height: 1px;border-top: 1px solid;transform-origin: 0 0;transform: scaleY(0.5); }

margin 外邊距

margin是定義盒子自身相對于其他盒子的距離。百分比%同樣是按照父元素的寬度進行計算。
在多個存在margin-top/bottom的兄弟元素之間，他們相鄰的margin值會被合并，取最大的一個進行展示。

div{margin: 10px 0}

下面4個div上下的間距均是10px，而不是20px

<div>1</div> <div>2</div> <div>3</div> <div>4</div>

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hh0c0c2j&title=盒子模型詳解

總結

以上是生活随笔為你收集整理的盒子模型详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。