CSS box-sizing

最新推荐文章于 2024-07-09 15:27:52 发布

JunChow520

最新推荐文章于 2024-07-09 15:27:52 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/JunChow520/article/details/106209976

版权

CSS框属性的基本规范中指出：文档的每个元素都被构造成文档布局内的一个矩形框，矩形框的每一层的大小都可以使用特定CSS属性进行调制。

盒模型

块元素的盒子模型结构

box-sizing属性用于更改计算元素宽度和高度默认的CSS盒子模型，使用此属性可用来模拟无法支持CSS盒子模型规范的浏览器行为。

属性值	描述
content-box	默认，正常盒模型， width = content。
border-box	异常盒模型，width = content + padding + border。

正常盒模型是指块元素的box-sizing属性为content-box的盒模型，现代浏览器中使用的均为正常的盒模型，也是标准W3C的盒模型。

正常盒模型是指盒模型的大小仅包括content部分，正常盒模型的大小以content内容优先自动扩展，当内部元素超过父容器给定的大小时会将父容器撑大。

正常盒模型

content-box是指块元素内容的width和height决定了元素的宽度和高度，这意味着元素的border和padding不能计算在元素的width和height之中，padding和border的改变不会改变到元素的width和height。

box-sizing:content-box;

怪异盒模型是指块元素的box-sizing属性设置为border-box的盒模型，border-box是在文档处于Quirks怪异模式时Internet Explorer默认使用的盒子模型，由于自身的特殊性，移动端页面也会使用到怪异盒模型。

怪异盒模型

怪异盒模型是先做盒子，然后再添加border、padding，最后再做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下。一般移动端页面使用较多，在怪异盒模型中父容器的盒模型一旦确定，子元素是无法撑开父容器的盒模型的，只能在盒模型的剩余空间中进行展示。

border-box是指元素的width和height由元素内容和padding、border三者共同决定，换句话说，元素的宽高受到内容宽度、padding、border三者的影响。

box-sizing:border-box;

默认情况下，元素的宽度等于内容框的宽度即width = content，当使用box-sizing:border-box属性控制后，框模型则会发生变化，此时元素的width = content + padding + border。

关注