前言：
今天我们对“css中的box”大约比较珍视，看官们都想要了解一些“css中的box”的相关内容。那么小编同时在网摘上汇集了一些对于“css中的box””的相关文章，希望你们能喜欢，朋友们快快来了解一下吧！box-sizing是什么？
box-sizing是定义元素宽度与高度范围的属性，简单点说：当我们在开发自适应布局的时候，经常会出现DIV的边框而导致DIV自动换行。
从上图可知，当我们设置两个DIV 分别为宽度200的时候，在加上边框各自2px无法满足同一水平线对其，因此只能换行处理。
当我们将父边框body属性设置404，即包含各自DIV的两个边框1px像素时候，能满足水平对其。
现在问题来了，由于某些原因，我们就一定要求父边框400像素同时水平对其两个DIV。
我们可以设置box-sizing:border-box属性。它的含义是将边框和内边距包含在我们设置的200px单位内。因此可以满足400像素父边框，同时子边框200像素，水平对其。
应用的场景，这种东西一般应用在自适应的布局界面，如购物车，列表等左右对齐的布局总结
前端CSS的box-sizing属性，可以帮助我们快速的根据设计图开发页面布局，不在需要填写完固定宽度后，然后在加入边框从而导致自动换行的出现，有了这个属性，我们可以减少了设置width与height的长度单位去计算加减边框，反复修改数值的操作麻烦步骤，从而大大加强了我们开发页面速度的效率
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css中的box
