网页布局过程：

1. 先准备相关的元素，网页元素基本都是盒子box
2. 利用css设置好盒子样式
3. 往盒子装内容

盒子模型（box model）组成

css盒子模型本质上是一个盒子，封装周围的html元素，它包含：边框，外边距，内边距，和实际内容

1. border（边框）
   1）width（自定义边框粗细，单位是px）
   2）style（边框样式）
   3）color（边框颜色）
   复合语法：border:width solid red （没有顺序，空格隔开）
   4）collapse（合并）
   语法：border-collapse
2. content（内容）
3. padding（内边距）
   padding-top（上边距）
   padding-left（左边距）
   padding-right（右边距）
   padding-bottom（下边距）
   复合语法
   padding：5px；（1个值表示上下左右都有）
   padding：5px 10px；（2个值：表示上下内边距5像素，左右内边距是10像素）
   padding：5px 10px 20px（3个值：表示上内边距5像素，左右内边距10像素，下内边距20像素）
   padding：5px 10px 20px 30px（4个值：上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素）
4. margin（外边距）
   语法与内边距一致

块级盒子水平居中
前提：

1. 盒子必须指定了宽度（width）
2. 盒子左右边距都设置为auto
   常见的写法
3. margin-left：aoto argin-right：aoto
4. margin：auto
5. margin 0 aoto（常见写法）
   如果想要行内元素或者行内块元素居中，给父级元素添加text-aling：center即可

外边距塌陷解决方案

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加篇v二flow:hidden

清除内外边距
语法：css添加通配符

 * {
            margin: 0;
            padding: 0;
        }