轻轻松松学CSS:盒子模型(Box Model)

所有HTML元素都可以看成盒子,在CSS中,”box model”这一术语是用来设计和布局的。
盒子模型包括:
1、margin,外边距
2、border,边框
3、padding,内边距
4、content,内容

 

标准盒模型是大多数浏览器采用的W3C标准模型
    box-sizing:content-box;
    width仅仅包含内容区域的宽度,
    height仅仅包含内容区域的高度
    内盒(不考虑外边距)的宽度=width+padding(左右内边距的宽度)+border(左右边框的宽度)
    内盒(不考虑外边距)的高度=height+padding(左右内边距的高度)+border(左右边框的高度)
    就像洋葱一样层层扒皮,每层都要算

怪异盒模型是IE中采用Microsoft自己的标准
    box-sizing:border-box;
    width不仅包含内容区域的宽度,还包括padding(左右)、border(左右),说白了就是内盒的宽度
    height不仅包含内容区域的高度,还包括padding(左右)、border(左右),说白了就是内盒的高度
    内盒(不考虑外边距)的宽度=width
    内盒(不考虑外边距)的高度=height
    它不像洋葱那样层层扒皮,而是content、padding、border作为一个整体

标准模型和怪异模型可以应用在网页布局中

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>test</title> 
 6 <style>
 7     .wrap{
 8         width:1090px;
 9         margin:0 auto;
10     }
11     .div1{
12         width:1050px;
13         height:200px;
14         padding:30px 20px;
15         background-color:lightblue;
16         box-sizing:content-box;<!--标准盒模型 这是默认值-->
17     }
18     .div2{
19         box-sizing:border-box;<!--怪异盒模型,在特殊情况下也有应用-->
20         width:1090px;
21         padding:30px 20px;
22         background-color:lightgreen;
23         border:5px solid red;
24     }
25 </style>
26 </head>
27 <body>
28     <div class="wrap">
29         <div class="div1">content宽度是1050px,padding-left=padding-right=20px,1050+20+20=1090px,正好和父元素的宽度相等,此时的box-sizing:content- box(大多数浏览器的默认值)</div>
30         <div class="div2">width=1090px,它包含border 5px*2,padding 20px*2,所以内容区域的宽度是1090-5X2-20X2=1040px</div>
31     </div>
32 </body>
33 </html>

View Code