盒子模型的计算公式及使用技巧

padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大，和其他元素没有关系!

margin是外边距,不会影响我们在浏览器中看到的元素的实际大小,外边距不会让元素的内容增大，是和另一个元素的间距!

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*盒子的实际宽高大小是多少?*/
 8             .content{
 9             width: 100px;
10             height: 250xp;
11             border: 10px solid #f90;
12             border-left: 40px;
13             padding: 10px 30px;
14             margin: 10px 20px 30px;
15             }
16             /*实际宽度:100+30+10+30=170px*/
17             /*实际高度:250+10+10+10+10=290px*/
18         </style>
19     </head>
20     <body>
21     <div class="content"></div>
22     </body>
23 </html>

css盒子模型的计算:

元素的实际宽度=宽度width+padding-left/padding-right+border-left/border-right
元素的实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom

口号:元素的实际大小只会受padding和border的影响跟margin没有关系,如果加了padding和margin值,要在width和height的值上减去padding和margin的值,否则内容会溢出