今天搞一搞box-sizing?

Alfred 發(fā)布于2019-08-02 15:59 / 1924人閱讀

摘要：講到首先你要知道什么是的盒子模型盒子模型有兩種分別是的和的看了圖可能你就已經(jīng)明白了不過還要繼續(xù)簡(jiǎn)單來說標(biāo)準(zhǔn)盒子模型的范圍包括，并且部分不包含其他部分則是包含的標(biāo)準(zhǔn)外盒尺寸計(jì)算元素空間尺寸空間高度空間寬度內(nèi)盒尺寸計(jì)算元素大小為內(nèi)容高度

講到box-sizing,首先你要知道什么是css的盒子模型!
盒子模型有兩種分別是IE的border-box和w3c的content-box.

看了圖可能你就已經(jīng)明白了,不過還要繼續(xù),簡(jiǎn)單來說:

標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分,border-box則是content包含content,padding,border

W3C的標(biāo)準(zhǔn)Box Model:

  /*外盒尺寸計(jì)算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內(nèi)盒尺寸計(jì)算（元素大小）*/
  Element Height = content height + padding + border （Height為內(nèi)容高度）
  Element Width = content width + padding + border （Width為內(nèi)容寬度）

IE)傳統(tǒng)下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

  /*外盒尺寸計(jì)算（元素空間尺寸）*/
  Element空間高度 = content Height + margin (Height包含了元素內(nèi)容寬度，邊框?qū)挾龋瑑?nèi)距寬度)
  Element空間寬度 = content Width + margin (Width包含了元素內(nèi)容寬度、邊框?qū)挾取?nèi)距寬度)
  /*內(nèi)盒尺寸計(jì)算（元素大小）*/
  Element Height = content Height(Height包含了元素內(nèi)容寬度，邊框?qū)挾龋瑑?nèi)距寬度)
  Element Width = content Width(Width包含了元素內(nèi)容寬度、邊框?qū)挾取?nèi)距寬度)

到這基本上你就能夠明明白白的了吧?

想一想你再布局的時(shí)候有沒有遇到過因?yàn)閜addingborder導(dǎo)致多列布局打亂了的情況,明明是想要每行四個(gè)元素,但是第四個(gè)就是被擠了下去的情況.

比如三欄布局來講:




    div {
        height: 700px;
        float: left;
    }
    div.left {
        width: 25%;
        background: red;
    }
    div.cent {
        width: 50%;
        box-sizing: border-box;
        /* 現(xiàn)在整個(gè)元素,包括填充在內(nèi),占頁(yè)面總寬度的50%,所有元素的組合寬度為100%*/
        background: yellow;
        padding: 0 20px;
        /*加了這個(gè)會(huì)使盒子內(nèi)容溢出 但是box-sizing很好的自適應(yīng)了*/
    }
    div.right {
        width: 25%;
        background: blue;
    }

或者是ul-li結(jié)構(gòu),每行展示四個(gè)元素等等情況的布局,巧妙的運(yùn)用可以讓代碼更加精簡(jiǎn)和優(yōu)美.

最后瀏覽器的兼容性:ie9+,火狐加前綴-moz-,低版本ios和android加-webkit-