盒子模型的計算公式及使用技巧
阿新 • • 發佈：2020-10-27
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的值,否則內容會溢位