您的位置:首页 > 其它

标准盒子模型和IE盒子模型的区别

2018-04-04 19:07 316 查看
盒子模型是css中很重要的一个概念,里面包含了内容(content),内边距(padding),边框(border),外边距(margin)。



标准盒子模型

box-sizing: content-box;
盒子的内容不包括padding和border,那么盒子的width= content。
比如你给一个盒子100px,那么他的盒子的实际宽度是=content 的宽度+左右两边padding的宽度+左右两边border的宽度(实际宽度大于100px)。

IE盒子模型

box-sizing: border-box;
,给盒子设置width=100px;,盒子的内容包括padding和border,盒子的width=content 的宽度+左右两边padding的宽度+左右两边border的宽度(实际宽度小于或等于100px)。

box-sizing属性

这个属性有三个可选值



box-sizing默认属性为content-box标准盒子模型。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: