web前端入門到實戰(zhàn)：CSSbox-sizing屬性的正確用法

CSS自定義屬性（變量）

CSS box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。

創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)黔江,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

沒有CSS box-sizing屬性

默認(rèn)情況下，元素的寬度和高度計算如下： width + padding + border =元素的實際寬度 height + padding + border =元素的實際高度這意味著：當(dāng)您設(shè)置元素的寬度/高度時，元素通常看起來比您設(shè)置的大（因為元素的邊框和填充被添加到元素的指定寬度/高度）。下圖顯示了兩個具有相同指定寬度和高度的

元素：

web前端入門到實戰(zhàn)：CSS box-sizing屬性的正確用法

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）



    
    ccs
    



這個div更小(寬度為300px，高度為100px)。


這個div更大(寬度也是300px，高度也是100px)。

box-sizing屬性解決了這個問題。

使用CSS box-sizing屬性

box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。如果box-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)用于所有元素是安全和明智的：