HTML基础学习——盒子模型

01.文档流

文档流（normal flow）

        网页是一个多层的结构，css可以给每一层设置样式，

          最终我们看到是最上面的一层。

        文档流是网页最底下的那一层

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

             

      之前将元素分为三类，块元素、行内元素、行内块元素

       分别具有一些特点，这些特点都是元素在文档流中的特点

        块元素：

          不会独占一行，宽是父元素内容区宽度，高是被内容撑开

        行内元素

          不会独占一行，宽高是被内容撑开，不可以自定义宽高

        行内块

          兼具块元素，行内元素的特点

      注意：

       1、一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在

       2、我们创建的元素默认是在文档流

02.盒子模型

布局相关样式

        文档流默认的布局，浮动，定位，弹性盒子等

       盒模型、盒子模型、框模型（box model）

      

      网页中也有很多的元素，将各种元素摆放在合适的位置，

        盒模型将页面所有元素的形状都统一了，你在布局时，

        只需要考虑到元素的大小即可

      

          盒模型                   快递

          内容区 content           冰箱

          内边距 padding           泡沫

          边框   border           快递盒子      

          外边距 margin           快递离你的距离

         

          盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系

03.盒子模型_边框

<!--

    边框（border） 边框用来隔开盒子内部和盒子外部

      设置边框，三个要素，缺一不可   宽度、颜色、样式

        边框的宽度  border-width

          1、可以设置多个值，以空格隔开即可