盒子模型

最新推荐文章于 2020-11-26 11:43:45 发布

原创最新推荐文章于 2020-11-26 11:43:45 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文深入解析CSS盒模型的构成，包括margin、border、padding及content的计算方式。探讨了box-sizing属性如何影响盒模型的实际尺寸，包括标准模式（content-box）和IE传统模式（border-box），并提供实例帮助理解。

盒子模型
margin + border + padding + content
注意：盒子实际的大小和盒子占位大小不一样
实际大小就是浏览器能看到的大小。

盒子实际宽度大小 = 内容区域高度（设置的width）+ 内边距padding（padding-left +padding-right）+边框border（border-left + border-right）

盒子实际高度大小 = 内容区域高度（设置的height）+ 内边距padding（padding-top +padding-bottom）+边框border（border-top + border-bottom）

box-sizing：border-box; 是吧盒子变成IE传统下盒模型，省去修改border、padding和width的计算

content-box	默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
bordr-box	重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
inhert	使元素继承父元素的盒模型模式

content-box

默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height

bordr-box

重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）

inhert

使元素继承父元素的盒模型模式

可以看这个：https://blog.csdn.net/acf961123/article/details/103294689
https://blog.csdn.net/vanarrow/article/details/105777761