其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。
    要求这三部分，无论如何也要学的非常精通。

    1. 看透网页布局的本质
    2. 盒子模型
    3. 盒子边框（border）``

    border : border-width || border-style || border-color
    边框属性—设置边框样式（border-style）
    none：没有边框即忽略所有边框的宽度（默认值）
    solid：边框为单实线(最为常用的)
    dashed：边框为虚线
    dotted：边框为点线```<br />double：边框为双实线<br />表格细边框<br />table{ border-collapse:collapse; }<br />border-collapse:collapse; 表示边框合并在一起。`
    盒子边框总结表

    | |
    | | | 设置内容 | 样式属性 | 常用属性值 | | —- | —- | —- | | 上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | | | 下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | | | 左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | | | 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | | | 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 | | 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 | | 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) | | 边框综合设置 | border:四边宽度 四边样式 四边颜色; | |

    圆角边框`<br />Border-radius: 水平半径/垂直半径；<br />border-radius: 左上角 右上角 右下角 左下角;`

    1. 内边距（padding）:padding属性用于设置内边距。 是指 边框与内容之间的距离

    padding-top:上内边距
    padding-right:右内边距
    padding-bottom:下内边距
    padding-left:左内边距

    值的个数 表达意思
    1个值 padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
    2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
    3个值 padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
    4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
    1. 外边距(margin)


    1. 外边距合并
    2. content宽度和高度
    3. 三个计算题
    4. 盒子模型布局稳定性
    5. CSS3盒模型
    6. 盒子阴影