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