文档流定义，盒子模型相关知识

1.什么是文档流

文档流（normal flow）

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

           文档流是网页最底层

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

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

             

      元素在文档流中的特点

        块元素

           1:会独占一行

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

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

        内联元素（行内元素）

           1:不会独占一行

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

        行内块元素

           1、可以设置宽高

           2、而且不会独占一行

      元素脱离文档流后，就不再区分块元素，行内元素，也就不具有元素在文档流中具有的特点

      脱离文档流的元素会更加类似行内块元素

2.盒子模型

把元素想象成盒子，矩形 px可为正可负

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

        内容区  content  --冰箱

        内边距  padding  --塑料

        边框    border   --箱子

        外边距  margin   --快递距离（无关，盒子无影响）

1:border-width  默认值一般是3px

使用border-width可以分别指定四个边框的宽度

可以跟多个值

   4个值  上  右  下  左

   3个值  上  左右  下

   2个值  上下   左右

   1个值   上下左右

除了border-width，CSS中还提供了四个border-xxx-width

  xxx的值可能是top right bottom left

专门用来设置指定边的宽度  

2:border-color  设置边框的颜色  默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

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

   可选值：

     none，默认值，没有边框

   solid 实线

      double 双线

      dashed [dæʃt] 虚线

     dotted ['dɔtid] 点状边框

 style也可以分别指定四个边的边框样式，规则和width一致，

   同时它也提供border-xxx-style四个样式，来分别设置四个边

 border

   - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

   - 而且没有任何的顺序要求

   - border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

  可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效