首先我们先来了解一个概念

文档流

文档流（normal flow）
         网页是一个多层的结构,设置样式，也是一层一层的设置，最终我们看到的最上面的一层
         文档流是网页最底层
         我们创建的元素默认情况下，都在文档流中

         元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

块元素
           1:会独占一行
           2:块元素的宽度默认是父元素的100%
           3:块元素的高度默认是被内容撑开的
                内联元素（行内元素）
           1:不会独占一行
           2:宽度高度默认都是被内容撑开的，不能自己定义宽高
        行内块元素

 元素脱离文档流后的特点

             元素脱离文档流之后，就不再区分块元素，行内元素，行内块元素，
             也就是块元素不会独占一行，行内也可以设置宽高，三像素问题也没有

元素怎么脱离文档流

              浮动  绝对定位  flex 等等

盒子模型

用非常通俗的语言来说：把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里 。         所以我们把所有的元素都想成盒子，矩形

我们来举一个生活中的例子来帮助理解

买一个冰箱   收到一个大的快递
     冰箱            内容区（content）
     纸箱子          边框（border）
     泡沫            内边距（padding）
    冰箱离你的距离     外边距（margin）

影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小

内容区(content)  元素中所有的子元素和文本内容都在内容区中排列
        width   设置内容区的宽度
        height  设置内容区的高度

创建一个盒子

.box{
      /* 设置内容区宽高*/
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 设置padding */
      padding: 30px;
      /* 设置边框 */
      border: 10px solid orange;
      /*设置外边距 */
      margin: 30px;
    }
    .box1{
      width: 100%;
      height: 100%;
      background-color: green;
    }

我们就得到了如下图的盒子