css布局学习笔记之box-sizing

来源:互联网 时间:1970-01-01

当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。

.div{

width: 500px;

margin: 20px auto;

padding: 50px;

border-width: 10px;

}

上面的元素所展示出来的效果,宽度会不止500px。这可能不是我们想要的。通常或许我们会去计算宽度来实现想要的效果。但是如果计算的地方太多的话,事件很烦人的事。

此时我们可以通过设置box-sizing:border-box来实现。

.div{

width: 500px;

margin: 20px auto;

padding: 50px;

border: solid blue 10px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

此时,该div所展示出来的宽度就是500px,外边距和内边距将会在这个宽度内进行绘制。实际上,就是缩小了内容的宽度,此时的内容宽度是设置的值减去边距。

box-sizing:content-box;就是未设置box-sizing属性时的默认效果。

* {

-webkit-box-sizing: border-box; /* Safari */

-moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box;

}

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


相关阅读:
Top