這篇文章主要為大家詳細(xì)介紹了CSS的box-sizing屬性的使用方法，圖文詳解容易學(xué)習(xí)，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門，感興趣的小伙伴們可以參考一下。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括山南網(wǎng)站建設(shè)、山南網(wǎng)站制作、山南網(wǎng)頁(yè)制作以及山南網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，山南網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到山南省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

你需要先了解CSS盒模型

CSS盒模型中 width 與 height 的計(jì)算規(guī)則：

在CSS中，你設(shè)置一個(gè)元素的width與height只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)。如果這個(gè)元素有任何的 border 或 padding，繪制到屏幕上時(shí)的盒子寬度和高度會(huì)加上設(shè)置的邊框(border)和內(nèi)邊距(padding)值。

下面舉例說明

不加 padding 與 border 的時(shí)候

*{
      margin:0;
      padding:0;
    }
    body{
      border:1px solid blue;
      margin:10px;
    }
    .wrapper{
      width:100px;
      height:100px;
      background:pink;
    }

此時(shí) div.wrapper 元素的寬高是 100*100

wrapper元素的盒模型

當(dāng)給 div.wrapper 元素加上 padding 和 border 樣式時(shí)

.wrapper{
      width:100px;
      height:100px;
      background:pink;
      padding:10px;
      border:1px solid black;
      margin:10px;
    }

此時(shí) div.wrapper 元素的寬高是 122*122 ，因?yàn)榻o該元素加上了10像素的 padding 和1像素的 border，可以看到此時(shí)粉色區(qū)域要更大了

注：margin不會(huì)影響元素的寬高，雖然這里也設(shè)置了margin，但元素的寬高并未加上margin的值

box-sizing屬性

1. box-sizing 屬性是干什么用的？

box-sizing 屬性是用來更改 CSS盒模型 中的這種 計(jì)算元素寬高 的一種方法

2. box-sizing 的取值

content-box

是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來的元素寬度中。

border-box

如果你將一個(gè)元素的 width 設(shè)為100px,那么這100px會(huì)包含它的 border 和 padding，內(nèi)容區(qū)的實(shí)際寬度會(huì)是 width 減去 border + padding 的計(jì)算值。

3. 使用 box-sizing 屬性

使用 border-box

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    body{
      border:1px solid blue;
      margin:10px;
    }
    .wrapper{
      width:100px;
      height:100px;
      background:pink;
      margin:10px;
      padding:10px;
      border:1px solid black;
    }

此時(shí) div.wrapper 元素的寬高還是 100*100，但實(shí)際內(nèi)容區(qū)的寬高變成 78*78，元素的寬高包括實(shí)際內(nèi)容的寬高加上 border 和 padding 的值

使用content-box

以上個(gè)例子為例，僅將 box-sizing 的值改為 content-box

*{
      margin:0;
      padding:0;
      box-sizing:content-box;
    }

可以看到粉色區(qū)域又變大了，此時(shí) div.wrapper 元素的寬高為 122*122 ，內(nèi)容的寬高還是100*100

以上就是CSSbox-sizing屬性使用方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊！