CSS3 Box Sizing

CSS3 Box Sizing

CSS3中新增的 box-sizing 属性允许在元素的总宽度和高度中包括内边距（填充）和边框。

不指定box-sizing情况下，元素的宽度及高度是以下方式计算的：

width + padding + border = 元素的实际宽度 height + padding + border = 元素的实际高度

指定元素box-sizing情况下，元素的宽度高度是以下方式：

width + border = 元素的实际宽度 height + border = 元素的实际高度

元素指定的padding被包含在指定的width和height中，当然如果padding的实际宽度或高度大于指定的width和height，那么元素显示的实际高度和宽度就是padding后的值。

.div1 {

 width: 300px;

 height: 100px;

 border: 1px solid blue;

 box-sizing: border-box;

 .div2 {

 width: 300px;

 height: 100px;

 padding: 50px;

 border: 1px solid red;

 box-sizing: border-box;

 .div3 {

 width: 300px;

 height: 100px;

 padding: 160px;

 border: 1px solid red;

 box-sizing: border-box;

 }

CSS3 box-sizing 属性的使用

在页面中如何才能让元素的高度和宽度更统一呢，建议的方式是做以下的声明。

* {

 box-sizing: border-box;

该代码可以让所有元素以更直观的方式展示大小

原创文章，作者：kepupublish，如若转载，请注明出处：https://blog.ytso.com/59517.html