CSS: box-sizing

最新推荐文章于 2024-10-02 13:25:04 发布

zhuchuji

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量232

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/zhuchuji/article/details/73457344

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

The CSS box-sizing property is used to alter the default CSS box model used to caculate width and height of the elements.

box-sizing: content-box

This is the default value defined by CSS standard. The width and height properties are measured, including only the content, but not padding, border and margin. padding, border and margin are out of the box. For example, .box { width: 300px; border: 10px; padding: 0 10px;} will result in a box of 340px rendered in the browser. So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

box-sizing: border-box

The width and height properties include the content, the padding and border, but nor the maigin. So, .box { width: 300px; border: 10px; padding: 0 10px;} leads to a box rendered in the browser of width: 340px. The dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.