盒子模型

CSS 盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成.

1. 盒子的边框

     <style>
      .hezi {
        width: 300px; /*盒子宽度*/
        height: 300px; /*盒子高度*/
        border: 5px solid red/*盒子边框样式和颜色*/
      }
    </style>
  <div class="hezi">...</div>

效果:
边框可以可视和透明设置粗细、样式、颜色,也可以单独为每一条边单独设置样式.

2. 盒子的内边距

  <style>
      .hezi1 {
        width: 600px; /*盒子宽度*/
        height: 550px; /*盒子高度*/
        border: 5px solid green; /*盒子边框样式和颜色*/
        background-color: tan; /*盒子背景颜色*/
        padding: 20px 10px 15px 40px; /*盒子内边距*/
        background-clip: content-box;/*背景绘制在内容方框内*/
      }
    </style>
  </head>
  <body>
    <div class="hezi1"></div>
  </body>

效果:

padding:10px 20px 10px 20px
当四个属性值时由四个方向, 按顺时针排列上右下左.
padding:10px 20px 10px
当三个属性值时由, 按上左右下来排列.
padding:10px 20px
当两个属性值时由, 按上下左右来排列.
padding:10px
当一个属性值时由, 四个方向都一样来排列.

内边距就是内容和盒子之间的距离,是透明的,只能设置宽度, 不能设置样式, 颜色.

3. 外边距

<style>
 .one {
        width: 300px; /*盒子宽度*/
        height: 280px; /*盒子高度*/
        border: 2px solid blue; /*盒子的边框粗细、样式和颜色*/
        margin-bottom: 20px; /*向下边框外的距离*/
      }
      .two {
        width: 280px; /*盒子宽度*/
        height: 300px; /*盒子高度*/
        border: 1px solid green; /*盒子的边框样式和颜色*/
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <div class="two"></div>

效果图:

外边距和内边距padding一样可以设置4个属性值

margin:10px 20px 10px 20px
当四个属性值时由四个方向, 按顺时针排列上右下左.
margin:10px 20px 10px
当三个属性值时由, 按上左右下来排列.
margin:10px 20px
当两个属性值时由, 按上下左右来排列.
margin:10px
当一个属性值时由, 四个方向都一样来排列.

外边距就是边框以外的距离,,是透明的,只能设置宽度, 不能设置样式, 颜色.

4. em属性

em是相对长度单位,意思是长度不是定死了的，更适用于响应式布局,用在 padding,margin, border-radius,用 em 比较合适
案例:

 <style>
      p {
        width: 600px; /*盒子宽度*/
        height: 550px; /*盒子高度*/
        border: 5px solid green; /*盒子边框样式和颜色*/
        background-color: tan; /*盒子背景颜色*/
        font-size: 16px; /*系统默认 1em=16px*/
        font-size: 1.5em; /*此时我定义1em=24px   24px÷16px=1.5em*/
        padding: 1em; /*那么此时盒子内边距1em=24px*/
        background-clip: content-box; /*背景绘制在内容方框内*/
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>

效果:

总结:em单位是由浏览器基于我在页面中定义的字体大小计算得到的像素值,只要我定义好em值,那么我内边距或者外边距就可以自动根据字体大小自动调整.

5. rem

rem单位是相对于字体大小的html元素，也称为根元素,rem 是相对 html 根元素字体大小的倍数。
案例:

 <style>
      :root {
        font-size: 20px; /*定义字体大小*/
      }
      p {
        font-size: 1rem;/*那么1rem=20px*/
      }
    </style>
  </head>
  <body>
    <p>你好</p>
  </body>

6. 总结:

em的值并不是固定的；
em会继承父级元素的字体大小。
rem 是相对 html 根元素字体大小的倍数

盒子模型属性简写和em与rem应用的场景