ie盒子模型

按原型图开发静态页面时，一般先进行大的区域划分，骨架出来后再去排列内部元素。宽750px的移动端设计稿，父div宽设定750px后，加左右padding，会将div的宽撑起超过750px，对后续布局造成影响。 如果重新去计算设置宽，又多了计算成本。

如下图标红处，让【高级用户】和【新增】左右对齐，同时左右留出30px的间距，给父元素设padding:0px 30px ，却撑大了父元素的宽

微信图片_20220401164817.png

解决方法：将父元素box-sizing属性设为border-box

            box-sizing: border-box;
            padding: 0px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;

实际效果

微信图片_20220401164813.png

解决。

标准 W3C 盒子模型范围包括 margin、border、padding、content； content 不包含其他部分，在获取width和height时，只获取content的宽高，不包含border，padding，margin

IE 盒子模型的范围也包括 margin、border、padding、content，但IE 盒子模型 content 部分包含了 border 和 padding

在IE盒子模型中 width设置后就不会都padding的影响，padding、border是计算到width里面的，结合这点，解决上述问题

box-sizing:content-box;//标准(默认)
box-sizing:border-box;//IE模型

ie盒子模型的功能-移动端布局踩坑

ie盒子模型