龙空技术网

前端CSS的box-sizing属性讲解与应用场景

经历沧桑的少年 347

前言:

今天我们对“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