css第三天--盒子模型

1边框border

      1.1颜色 color

      1.2宽度 width

      1.3样式style

             solid    dashed  dotted

       1.4例子

              border: 1px solid red    4个边框都是红色的实线

              border-top：1px dashed  pink;

2外边距

        2.1margin让块级盒子居中对齐

                条件：块级  有宽度  margin左右设置为auto

                 margin：0 auto；

       2.2合并塌陷问题

               上下外边距有合并问题

               嵌套关系的盒子也会有塌陷

                           解决方法：给父盒子添加border  或者添加padding  或者添加overflow：hidden；

3内边距

          3.1盒子内容的距离

          3.2padding的写法和给定数值的含义（同margin）

          3.padding会撑开盒子，一般情况下需要用width和高度减去多出来的padding

              特殊情况：如果盒子没有给出宽度，此时padding是不会撑开盒子的

4扩展 css3 的两个属性

          border-radius：50%/10px;  ---->圆角

          box-shadow：2px  2px  2px   rgba(0,0,0,0.3);---->盒子阴影