CSS盒模型概述

阅读: 3295    发布时间: 2018-01-11 15:37:49

所有的html元素,我们都可以看作一个盒子

盒子包含:content(内容),padding(内边距),border(边框),margin(外边框),如下图所示


QQ20170614-100008@2x.png


  • 我们定义的css宽度width/高度height,指的是实际内容区域的宽高

  • 背景色的作用区域为实际内容区域+ padding+border

  • 边框围绕在padding和content四周,边框也有自己的宽度

  • margin为与四周元素的距离,透明的

  • 整个元素占据的宽度=margin左右尺寸+border左右尺寸+padding左右尺寸+content的width

  • 整个元素占据的高度=margin上下尺寸+border上下尺寸+padding上下尺寸+content的height



如下:

  • .a没有设置margin、padding、border,默认为0,只设置了宽高,因此a占100px*100px

  • .b宽高为100px,padding为100px,因此.b背景的宽度=两边padding 共200px+width 100px=300px,背景高度同样为300px

  • .b拥有1个10px宽的边框

  • .b距离.a由margin决定,为100px

<style>
  .a,.b{
      color: white;
  }
  .a{
      width: 100px;
      height: 100px;
      background-color: red;
  }
  .b{
      width: 100px;
      height: 100px;
      background-color: red;
      padding: 100px;
      border: 10px solid #2aabd2;
      margin: 100px;
  }
</style>

<div class="a"></div>

<div class="b"></div>

尝试一下》




-END-