css盒子

1. border边框（border会影响实际的盒子的高度）
   border-style:solid(实线)/dotted
   border:1px solid red

border-collapse 将相邻边框合到一起

border-collapse: collapse;

2.padding内边距（会影响盒子的大小）

    /*上下左右都是5*/
    padding : 5px;
    /*上下是5，左右是10*/
    padding : 5px 10px;    
    /*上是5 左右是10 下是15*/
    padding : 5px 10px 15px;
    /*上右下左（顺时针）*/
    padding : 5px 10px 15px 20px;

3.margin 外边距(控制盒子和盒子的距离)
margin的复合形式和padding是一样的

1.margin的典型应用（让块级盒子水平居中）
a.盒子必须指定宽度
b.将盒子的左右外边距设置为auto
写法：
margin:0 auto 
或者margin-left:auto;margin-right:auto
或者 margin:100px auto (上下设置一个高度)
 
2.让行内元素、行内块元素水平居中使用
text-align:center(加在父元素上即可)

3.外边距合并问题
嵌套块元素垂直外边距塌陷问题(div下还有一个div,给子div设置margin-top使作用到父div问题)
解决方案：
a.可以为父元素定义边框(border)
b.为父元素定义内边距(padding)
c.**为父元素定义 overflow:hidden**

4.清除内外边距(清除li,a标签的内外边距)
*{
    padding:0;
    margin:0;
}
注：行内元素（span,）尽量只设置左右内外边距（上下边距不起作用）,转化成块级元素或者行内块元素就可以了

4.圆角边框

border-radius:10px;(半径为10的圆的弧形边框)

a.圆：
一个正方形div(100*100) 设置border-radius:50px/border-radius:50%(宽度的一半)
b.圆角矩形：
将border-radius设置为高度的一半
c.不同的圆角
border-radius:1px 2px 3px 4px(左上，右上，右下，左下 （顺时针）)

5.盒子阴影

盒子阴影不占用空间    
box-shadow:10px 10px 10px -4px rgba(0,0,0,.3)
第一个参数：水平阴影位置（允许负值）
第二个参数：垂直阴影位置（允许负值）
第三个参数：模糊距离
第四个参数：阴影的尺寸
第五个参数：颜色

6.文字阴影

text-shadow:5px 5px 6px rgba(0,0,0,.3)