CSS是網(wǎng)頁開發(fā)中必不可少的一部分，它可以控制網(wǎng)頁中的樣式和布局。其中，設(shè)置元素高度也是CSS中非常重要的一項(xiàng)內(nèi)容。然而，有時(shí)候我們?cè)O(shè)定了元素的高度卻發(fā)現(xiàn)不起作用，下面我們看看這種情況可能是因?yàn)槭裁础?/p>

.box {
height: 100px;
background-color: #ccc;
margin: 20px;
}

上述代碼中，我們給一個(gè)class為“box”的元素設(shè)定了高度“100px”，并且設(shè)置了背景顏色和外邊距。但是，當(dāng)我們查看頁面時(shí)，這個(gè)元素的高度并沒有按照預(yù)期設(shè)置為100px，而是展示了其內(nèi)部的內(nèi)容高度。這是為什么呢？

原因是，當(dāng)我們給元素設(shè)置高度時(shí)，它默認(rèn)是只設(shè)置了元素的內(nèi)容高度而沒有設(shè)置元素的padding、border、margin等高度。這時(shí)候，如果元素內(nèi)部有內(nèi)容撐起了它的大小，那么元素的高度會(huì)自動(dòng)適應(yīng)其內(nèi)容高度，而不是我們?cè)O(shè)定的高度。

我們可以使用box-sizing屬性來解決這個(gè)問題。box-sizing屬性用來控制元素盒模型的計(jì)算方式，可以設(shè)置為content-box（默認(rèn)值，只計(jì)算內(nèi)容的寬度和高度）、padding-box（計(jì)算內(nèi)容和內(nèi)邊距的寬度和高度）、border-box（計(jì)算內(nèi)容、內(nèi)邊距和邊框的寬度和高度）。如果我們將box-sizing設(shè)置為border-box，則元素的高度就包含了其內(nèi)部的padding、border和content的高度。

.box {
height: 100px;
background-color: #ccc;
margin: 20px;
box-sizing: border-box;
}

以上代碼中，我們將元素的box-sizing設(shè)置為border-box，則元素高度會(huì)包含其內(nèi)部的padding、border和content的高度，從而達(dá)到我們預(yù)期的效果。