盒子模型
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
- 关于
CSS
重要的一个概念就是CSS
盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:padding
+border
+width
= 盒子的宽度padding
+border
+height
= 盒子的高度
- 这看起来并不是那么直观,那么我们看一个图:
-
这意味着,如果我们设置一个宽度为
200px
,而实际呈现的盒子的宽度可能会大于200px
(除非没有左右边框和左右补白)。这可能看起来比较怪,CSS
设置的宽度仅仅是内容区的宽度,而非盒子的宽度。同样,高度类似 -
这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候,我们需要减去它的左右边框和左右补白,然后设置为对应的CSS宽度。例如上图,我们设置希望盒子宽度为
200px
,则需要先减去左右补白各20px
,左右边框各1px
,然后设置对应的CSS
宽度158px
。
- 幸运的是,我们有更好的方法达到我们想要的目的
box-sizing
-
语法:
box-sizing:
content-box
|border-box
|inherit
; -
与上面不同的是,当你设置
box-sizing:border-box
以后,这就能达到你想要的目的。例如,上面我们想要一个宽度为200px
的盒子,那么我们直接设置宽度为200px
。是不是看起来清晰多了。当再设置它的左右边框和左右补白后,它的内容区会自动调整。这可能更直接和一目了然。CSS
代码如下:
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
-
实际上,这更被设计者和开发者推崇