CSS3中的box-sizing

RaoMeng 發(fā)布于2019-08-30 15:53 / 3591人閱讀

摘要：的作用了解完這兩種盒模型后，在介紹一下，他一共有種值，，。就是繼承父元素的值，這里不做介紹。比如我們想做一個(gè)內(nèi)邊距，邊框?yàn)椋罱K包括邊框?qū)挾葹榈模暗淖龇ㄊ窍人愠鰞?nèi)容寬。

懂得如何運(yùn)用box-sizing之前，必須需要了解一下常規(guī)盒模型和怪異盒模型（IE盒模型）。
我們都知道盒模型從里到外主要包括：content，padding，border，margin。如下圖：

兩種盒模型的寬度width
標(biāo)準(zhǔn)盒模型的width = content
怪異盒模型的width = content + padding*2 + border*2
也就是說(shuō)，一個(gè)div，他的內(nèi)容寬content為100px，padding為10px，border為1px，margin為10px，那么在標(biāo)準(zhǔn)盒模型的解析下，他的width = 100px，也就是content的寬度
而在怪異盒模型的解析下，他的width = 100px + 1px*2 + 10px*2 = 122px。

box-sizing的作用

了解完這兩種盒模型后，在介紹一下box-sizing，他一共有3種值：content-box，border-box，inherit。inherit就是繼承父元素的box-sizing值，這里不做介紹。
centent-box就是已標(biāo)準(zhǔn)盒模型的方式解析當(dāng)前盒子，即此時(shí)盒子的width = content的寬度
border-box就是已怪異盒模型的方式解析盒子，此時(shí)width = content + padding*2 + border*2
聊到這里已經(jīng)很明了了，box-sizing的作用就是規(guī)定當(dāng)前盒子已哪種方式解析當(dāng)前盒子。

使用場(chǎng)景

當(dāng)然，box-sizing在某些場(chǎng)景下，是非常好用的。比如我們想做一個(gè)內(nèi)邊距10px，邊框?yàn)?px，最終包括邊框?qū)挾葹?00px的div，之前的做法是先算出內(nèi)容寬width = 100px - 10px*2 - 2px*2 = 76px。這種方式?jīng)]問(wèn)題，但是多少有點(diǎn)繁瑣，將width的計(jì)算給以開(kāi)發(fā)人員來(lái)完成顯然是不合適的。
此時(shí)我們可以把它交給交給計(jì)算機(jī)來(lái)完成，這就需要用到box-sizing來(lái)完成。這里通過(guò)把div的box-sizing設(shè)置為border-box，我們就可以簡(jiǎn)單的將width設(shè)置為100px，其余的padding和border按照給定好的值一一填入，就可以完成這一切工作，省去了人為的計(jì)算內(nèi)容寬content的過(guò)程，減少計(jì)算量的同時(shí)減少了錯(cuò)誤率，何樂(lè)不為？