1.网页布局的本质

首先设置好盒子的大小，摆放盒子的位置，然后把元素（图片，文字等）添加到盒子中，完成整个网页

2.盒子模型

盒子模型由内容，边框（border），内边距（padding），外边距（margin）组成
    border：边框粗细，颜色，样式等        
    padding：内容与边框的距离
    margin：盒子与盒子的距离，也就说两个不同的边框的距离

3.盒子边框（border）

border：（三个属性）
    border-width:   粗细（px）
    border-color:   颜色
    border-style:   样式
        none：没有边框，默认
        solid：单实线
        dashed：虚线
        dotted：点线
border-（width/style/color）:（ border-color: green red;）
        1个值是上下左右（四条边框属性全都是这个值）
        2个值是上下和左右（两个值分别是上下和左右，用空格分开）
        3个值是上，左右，下
        4个值是上，右，下，左

简写：

    border: border-width || border-style || border-color 
    例：
         border: 1px solid red;  没有顺序  
单独给四个边框分别指定
    border-top：上边框
    border-bottom：下边框
    border-left：左边距
    border-right：右边距
    例：
        border-top: 1px solid red;（上边框红色，实线，1像素）
        

边框合并问题：

    可以通过cellspacing=“0”设置单元格间的距离，但是边框重叠会使边框变粗
    border-collapse:collapse; 表示相邻边框合并在一起

边框圆角（css3）( border-radius)

  /* 样式 */
  border: 10px solid red;
  border-color: green red;
  background-color: rgb(252, 188, 217);
    <div class="box">
  </div>

  width: 200px;
  height: 200px;
  border-radius: 50%; 
  

  width: 200px;
  height: 200px;
  border-top-right-radius: 200px;
  

  width: 400px;
  height: 200px;
  border-radius: 200px; 

圆角与位置关系：

  一个值：四个角
  两个值：左上 右下，右上 左下
  三个值：右上，左上 右下，左下
  四个值：右上，左上，右下，左下
  例：
      border-radius: 100px 0px 100px 0px;

4.内边距（padding）

问这个盒子多大？

  *{
  padding: 0px;
  margin: 0px;
}
.box{
  height: 150px;
  width: 150px;
  padding: 10px;
  border: 4px solid red;
}

150+10* 2+4* 2=178（178*178）

padding-top/bottom/left/right:单独设置上下左右的内边距
padding-left: 30px;

5.外边距（margin）

跟内边距用法一致

5.1块级元素水平居中（三种）

margin: auto;
margin: 0 auto;
margin-right: auto; margin-left: auto;

5.2文字居中和盒子居中

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  */

5.3外边距重叠问题

兄弟元素外边距重叠，外边距取大的值
父子元素外边距重叠，如果父元素没有padding或border，子元素的外边距会应用到父元素

6.盒子模型分类

W3c标准：宽是 
    box-sizing:content-box;
IE盒子： (content = padding + border + content)
    box-sizing:border-box;

7.拓展

<div class="box">
    <ul>
      <li><a href="">首页</a></li>
      <li><a href="">手机</a></li>
      <li><a href="">冰箱</a></li>
      <li><a href="">彩电</a></li>
      <li><a href="">水果</a></li>
      <li><a href="">生鲜</a></li>
    </ul>
</div>

  *{
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
.box{
  height: 80px;
  border-top: 3px solid rgb(226, 139, 139);
  border-bottom: 3px solid rgb(226, 139, 139);
  border-radius: 20%;
}
.box li{
  display: inline-block;
  width: 60px;
  line-height: 80px;
  text-align: center;
  vertical-align:middle;
}
.box li:hover a{
  font-size: 24px;
  color: rgb(235, 247, 16);
  background-color: rgb(38, 228, 242);
  vertical-align:middle;
}