文章目錄
  1. 1. box-sizing属性
  2. 2. content-box
  3. 3. border-box
  4. 4. 不同浏览器兼容写法
  5. 5. 代码

css盒子模型将DIV的构成比喻成一个盒子。盒子由里装的东西,盒子厚度,盒子内置厚度,和外置距离分别对应DIV元素的内容content,内边距padding,边框border,外边距margin.
我们在css中写的width,height具体代表着是content的width和height还是代表着整个Element的width或者height呢?这个不确定的话,整个网页的布局无从把握。
此处输入图片的描述

box-sizing属性

box-sizing属性是决定盒子模型的属性

Name box-sizing
取值 content-box / border-box
初始 content-box
应用 所有含有width和height的元素
继承 不可继承
动作 不支持

content-box

content-box是在CSS2.1中定义的,一直在用。当box-sizing:content-box时,这是定义的width,height是指内容的宽度和高度,而padding和border将在这个width/height以外的区域绘制即(Element_height = height + padding + border).

实例

见代码中的box1,当box-sizing没指定时默认content-box. Element_width(250)= width(230px)+border*2(10px)+padding-right(10px)
content-box

border-box

这时定义的width,height是整个盒子Element的宽高。padding,border将在这个width,height决定的区域内绘制。此时的Element_height = height
而当前Element的内容的宽高content_height=height+padding+border

实例

Element_width = width
border-box

不同浏览器兼容写法

Browser Special-prefix
Webkit(Chrome/Safari) -webkit-box-sizing
Gecko(Firefox) -moz-box-sizing
Presto(Opera) -o-box-sizing
Trident(IE)IE8: -ms-box-sizing/IE9:box-sizing

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{
width:230px;
height:200px;
background-color:#eee;
border:5px solid #444;
padding-right:10px;
float:left;
}

.box2{
width:230px;
height:200px;
background-color:#eee;
border:5px solid #444;
box-sizing:border-box;
padding-right:10px;
float:right;
}

</style>

</head>
<body>
<div class="container">
<div class="box1">content-box</div>
<div class="box2">border-box</div>
</div>
</body>
</html>
comments powered by Disqus
文章目錄
  1. 1. box-sizing属性
  2. 2. content-box
  3. 3. border-box
  4. 4. 不同浏览器兼容写法
  5. 5. 代码