box-sizing 属性
2022 cssCSS 属性 box-sizing
定义了元素的总宽度和高度是如何计算。
语法
语法形式:box-sizing: content-box(default) | border-box;
示例
container
content-box
container
border-box
说明
box-sizing
属性的两个值:
-
content-box
width 和 height 属性包含了内容 content,不包含内间距 padding,边框 border,外间距 margin。盒子的渲染宽度 = width + padding + border。默认的 CSS 盒模型。 -
border-box
width 和 height 属性包含了内容 content,内间距 padding 和边框 border,但不包括外间距 margin。盒子的渲染宽度 = width。
有意思的是,content-box 是 CSS 规范的默认值,但是 border-box 会更加直观方便,简单实用,因此也受到大家青睐。令人惊讶的是 border-box 来源于 IE 里的怪异模型。