轻轻松松学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

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

相关推荐