HTML.盒子模型（1）

文档流（normal flow）

         网页是一个多层的结构,设置样式，也是一层一层的设置，最终我们看到的最上面的一层

         文档流是网页最底层

          我们创建的元素默认情况下，都在文档流中

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

             

      元素在文档流中的特点

        块元素

           1:会独占一行

           2:块元素的宽度默认是父元素的100%

           3:块元素的高度默认是被内容撑开的

        内联元素（行内元素）

           1:不会独占一行

           2:宽度高度默认都是被内容撑开的，不能自己定义宽高

        行内块元素

      元素脱离文档流后的特点

         元素脱离文档流之后，就不再区分块元素，行内元素，行内块元素，

            也就是块元素不会独占一行，行内也可以设置宽高，三像素问题也没有

 把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

       所以我们把所有的元素都想成盒子，矩形 

  

      买一个冰箱   收到一个大的快递

     冰箱            内容区（content）

     纸箱子          边框（border）

     泡沫            内边距（padding）

    冰箱离你的距离     外边距（margin）

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

边框（border）元素设置边框

      边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

        设置边框必须指定三个样式 分别是颜色，大小，样式

         border-color: ;  设置边框的颜色

            （1）、有默认值，默认颜色是黑色

            （2）、可以写多个颜色  以空格隔开

                   4个   上  右  下   左

                   3个   上   左右   下

                   2个   上下  左右

                   1个   上下左右

             (3)、border-xxx-color  特指top  right  bottom left某一边颜色

         border-width: ;  设置边框的大小

            （1）、默认值   默认值大概1-3px

            （2）、也可以跟多个值  以空格隔开

                  4个   上  右  下   左

                  3个   上   左右   下

                  2个   上下  左右

                  1个   上下左右

            （3）、border-xxx-width 特指top  right  bottom left某一边宽度

         border-style: ;  设置边框的样式

             (1)、默认值  none

            （2）、solid  实线

                  dashed  虚线

                  dotted  点状虚线

                  double  双线

         border简写

         border:颜色，大小，样式;

         border-top:颜色，大小，样式;

         border-right:颜色，大小，样式;

         border-bottom:颜色，大小，样式;

         border-left:颜色，大小，样式;

 内边距（padding）指的是内容区和边框之间的距离

        padding-top  上内边距    

        padding-right  右内边距

        padding-bottom 下内边距

        padding-left   左内边距

 

        padding:xxx;  简写

           可以跟多个值

             4个 3个 2个 1个

          规则跟border-width一样