CSS box-sizing屬性允許我們?cè)谠氐目倢挾群透叨戎邪畛浜瓦吙颉?/p>
默認(rèn)情況下，元素的寬度和高度計(jì)算如下： width + padding + border =元素的實(shí)際寬度 height + padding + border =元素的實(shí)際高度 這意味著：當(dāng)您設(shè)置元素的寬度/高度時(shí)，元素通?？雌饋肀饶O(shè)置的大（因?yàn)樵氐倪吙蚝吞畛浔惶砑拥皆氐闹付▽挾?高度）。 下圖顯示了兩個(gè)具有相同指定寬度和高度的
重慶分公司
重慶分公司
學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
ccs
這個(gè)div更小(寬度為300px，高度為100px)。
這個(gè)div更大(寬度也是300px，高度也是100px)。
box-sizing屬性解決了這個(gè)問題。
box-sizing屬性允許我們?cè)谠氐目倢挾群透叨戎邪畛浜瓦吙颉Ｈ绻鸼ox-sizing: border-box;在元素填充上設(shè)置并且邊框包含在寬度和高度中：
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}由于使用它的結(jié)果box-sizing: border-box;非常好，許多開發(fā)人員希望他們頁面上的所有元素都以這種方式工作。下面的代碼確保以更直觀的方式調(diào)整所有元素的大小。許多瀏覽器已經(jīng)box-sizing: border-box;用于許多表單元素（但不是全部 - 這就是輸入和文本區(qū)域在寬度上看起來不同的原因：100％;）。將其應(yīng)用于所有元素是安全和明智的：
* {
box-sizing: border-box;
}box-sizing 定義如何計(jì)算元素的寬度和高度:是否應(yīng)該包含填充和邊框
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
