1 介绍

就是把HTML页面的元素看作一个矩形盒子，矩形盒子由四部分组成

  • 内容(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)

image.png

2 盒子模型相关样式属性

  • width: 盒子的内容宽度，注意：不是盒子的宽度
  • height: 盒子的内容高度，注意：不是盒子的高度
  • padding: 盒子内的内容和边框之间的间距
  • border: 盒子的边框

  • margin: 盒子与盒子之间的间距

    3 盒子的真实尺寸

    盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

  • 盒子宽度 = width + padding左右 + border左右

  • 盒子高度 = height + padding上下 + border上下

    4 示例代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Document</title>
    7.   <style>
    8.       .box1{
    9.           width: 200px;
    10.           height: 200px;
    11.           background: green;
    12.           border: 5px solid blue;
    13.           padding-top: 10px;  /* padding */
    14.       }
    15.       .box2{
    16.           width: 100px;
    17.           height: 150px;
    18.           background: red;
    19.       }
    20.       .box3{
    21.           width: 50px;
    22.           height: 50px;
    23.           background: gray;
    24.           margin-top: 10px;
    25.       }
    26.   </style>
    27. </head>
    28. <body>
    29.   <div class="box1">
    30.       <div class="box2"></div>
    31.   </div>
    32.   <div class="box3"></div>
    33. </body>
    34. </html>
    image.png