DAY 3

页面布局的学习三大核心
    盒子模型
    浮动
    定位
    盒子模型

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

网页布局的核心本质：利用CSS摆盒子。

 盒子模型

所谓盒子模型（Box Model）：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

边框 border

border可设置元素的边框

边框的宽度（粗细）：border-width
    单位：px，一般情况下
边框样式：border-style
    实线：solid
    虚线：dashed
    点线：dotted
    双实线：
边框颜色：border-color
边框的复合型写法（边框的简写）
    直接写，无先后顺序
边框分开写法
    上边框：border-top
    下边框：border-bottom
    左边框：border-left
    右边框：border-right

边框分开写法

通过 border-top border-bottom border-left border-right 分别设置上、下、左、右边框。

padding内边距
    ：内容和边框的距离（复合型写法：四个值：上 右 下 左；三个值：上  左右  下；两个值：上下  左右；一个值：四个方向内边距的值相同）

margin外边距：盒子和盒子的距离
  复合型写法
        外边距合并问题
            两个响铃元素设置 外边距，不会相加，会以较大一方的外边距作为他们之间的边距。因此，我们只用设置其中一个的外边距
        嵌套盒子的垂直外边距塌陷问题
            给父元素添加内边距padding
            给父元素添加上overflow-hidden
            给父元素加上上边框