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

时间 2020-09-12

标签轻轻松松 css 盒子模型 box model 栏目 CSS 繁體版

原文原文链接

全部HTML元素均可以当作盒子，在CSS中，"box model"这一术语是用来设计和布局的。
盒子模型包括：
一、margin，外边距
二、border，边框
三、padding，内边距
四、content，内容html

标准盒模型是大多数浏览器采用的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做为一个总体ide

标准模型和怪异模型能够应用在网页布局中布局

 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