盒子模型知识点回顾

  文档流（normal flow）

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

           文档流是网页最底层

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

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

             

      元素在文档流中的特点

        块元素

           1:会独占一行

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

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

        内联元素（行内元素）

           1:不会独占一行

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

        行内块元素

 

 1:内容区(content)  元素中所有的子元素和文本内容都在内容区中排列

           width  设置内容区的宽度

           heigth  设置内容区的高度

        2:边框（border）元素设置边框

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

        设置边框必须指定三个样式

        边框的颜色、样式、大小

1:border-width  默认值一般是1-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一样，只不过它只对一个边生效

、

 垂直外边距的重叠

    -兄弟元素

    -父子元素

    如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

            box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁

                可选值：

                    content-box 内容区 默认值

                    border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容

区