Ignite

盒子模型

2017-09-02

今天来聊聊box-sizing

盒模型:
当你设置了元素的宽度,实际展现的元素超出你的设置:
这是因为元素的边框和内边距会撑开元素。看下面的例子,
两个相同宽度的元素显示的实际宽度却不一样。

代码

我小一些

我大一些

以前有一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边距和边框的宽度。
值得庆幸是你不需要再这么做了…

Box-sizing:

人们慢慢地意识到传统的盒子模型不直接,所以他们新增了一个叫做box-sizing

的css属性。当你设置一个元素为box-sizings: border-box;时此元素的内边距和边框不会再增加它的宽度。
这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了box-sizing:border-box;

boxSize代码

效果:

效果
既然没有比这更好的方法,一些CSS开发者想要页面上的元素都有如此的表现。所以开发者们,都把以下代码放在他们的页面上:

直观的方式

这样可以确保所有的元素都会用这种更直观的方式排版。

不过box-sizing是个很新的属性,目前你还应该像上面例子中那样使用 -webkit-
和-moz- 前缀。 这可以这个启用特定浏览器实验中的特性。同时记住它是支持IE8+的

Tags: CSS
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章