box-sizing 的应用

2018-07-23sad creeper

box-sizing 是 CSS3中添加的特性

box-sizing 可选的值:content-box,border-box,inherit

默认值是:content-box

通过将 box-sizing 设置为 border-box 可以将元素的内边距和边框在元素已设定的宽度和高度下绘制,也就是说实际的宽度不会因为 padding 和 border 的变化而变化

例子:

// html

<div class="div1">
div1
</div>
<div class="div2">
div2
</div>


// css

.div1{
width: 300px;
height: 300px;
background-color: gray;
padding: 20px;
box-sizing: border-box;
}
.div2{
width: 300px;
height: 300px;
background-color: yellow;
padding: 20px;
}

例子:可以看到两个DIV的区别只有一个设置了 box-sizing:border-box 另一个没设置

阅读 99 评论


Y

Yuhua Gong

test

2个月前 · 新泽西 XX