原文來源: 老姜博客 css第24講之css box-sizing

box-sizing:用來控制padding和border是否包含在width和height之中.

支持兩種取值:

• content-box
• border-box

默認(rèn)情況下，element的最終長度和寬度計(jì)算公式如下:

• width + padding + border = element最終的寬度
• height + padding + border = element最終的高度

所以，當(dāng)你設(shè)置width和height，其實(shí)最終的大小是大于你設(shè)置的(主要是padding和margin的值影響)

注意不要把margin混在一起，margin不參與計(jì)算

在線試玩

通過上面的例子可以看到，同樣的width和height，最終的效果還是不一樣的，所以這個(gè)設(shè)計(jì)工作帶來一定的困難.

為了保障width和height的一致性，可以通過box-sizing屬性來改變對應(yīng)的計(jì)算方式.

box-sizing設(shè)置為border-box可以控制實(shí)際的寬度和高度為指定的設(shè)置，主要通過向內(nèi)擠壓給content的空間.

通常頁面css都會(huì)進(jìn)行全局設(shè)置:

* {box-sizing: border-box; }

在線試玩

總結(jié)

以上是生活随笔為你收集整理的css box-sizing的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。