【无标题】

盒子模型
页面布局：盒子模型、浮动、定位
1.盒子模型组成
边框、内容、内边距、外边距
1.1边框
组成：边框粗细、边框样式、边框颜色
      border-width/border-style/border-color
复合写法：例如：border： 1px solid blue; 他们之间没有顺序
边框可以分开：例如：border-top: 1px solid blue;
           border-bottom: 1px dotted red;
1.2表格细线边框
border-collapse: collapse;表示相邻的边框合并在一起
例如：
    table,
        td,
        th {
            border: 1px solid black;
            text-align: center;
            font-size: 14px;
            border-collapse: collapse;
        }
1.3盒子模型内边距---padding
    边框与内容之间的距离（padding-left/right/top/bottom）
padding的复合写法：
padding：5px             表示上下左右都是5px
padding：5px 10px         表示上下5px,左右是10px
padding：5px 10px 15px      表示上5px,左右是10px，下是15px
padding: 5px 10px 15px 20px    表示上5px,右是10px,下是15px，左是20px（顺时针）

padding和border-width会影响盒子的大小，可以先测出距离然后重新设置盒子大小。
注意：盒子本身没有指定width/height属性，此时padding不会撑开盒子
1.4外边距margin
用于控制盒子和盒子间的距离
margin-left/right/top/bottom
margin的复合写法与padding完全一样
外边距的应用-----
        块级盒子水平居中
注意：必须满足1.指定宽度width 2.盒子<左右外边距>都设置为auto
行内（块）元素水平居中直接给父元素加上text-align: center;

当块级元素嵌套块级元素，会发生块元素外边距的塌陷---解决方案：可以为父元素定义上边框、内边距、添加 overflow: hidden;
1.5清楚内外边距
不同的浏览器自带默认的内外边距，布局前可以先清除一下
例如：
* {
    padding: 0;
    margin: 0;
   }
    ------这也实际上是CSS的第一行代码

1.圆角边框
border-radius: length；    -----参数可以是百分比和数值
例如： 设置了圆形
    div {
            width: 200px;
            height: 200px;
            background-color: #666;
            margin: 100px auto;
            border-radius: 100px; /*50%*/   ---50%是高度和宽度的一半
           }
       设置了圆角矩形
    .box1 {
            width: 500px;
            height: 200px;
            background-color: #888;
            border-radius: 100px;
        }
复合：  border: 10px;四个角
    border: 10px 15px;左上到右下  右上到左下
    border: 10px 15px 20px;左上  右上到左下 右下
    border: 10px 15px 20px 25px;从左上顺时针

单写：border-top-left-radius以此类推

2.盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
注意：inset可选，默认是outset但是不可以写outset

3.文字阴影
text-shadow: h-shadow v-shadow blur color；