目标

• 理解
  • 能说出盒子模型的四个组成部分
  • 说出内边距的作用以及对盒子的影响
  • 说出不同数值个分别代表什么意思
  • 说出块级盒子居中对齐需要的2个条件
  • 说出外边距合并的解决方法
• 应用
  • 利用属性给元素添加边框样式
  • 计算盒子的大小
  • 内边距外边距的设置方法
  • 边框的粗细样式的应用

1.0 页面布局的本质

在学习HTML的时候 我们通过表格实现页面的布局和展示

• 网页布局的本质
  • 我们先把所有的元素，文字，图片，按照相对应的比例划分为很多表格
  • 利用所设置好盒子的大小，然后在将元素和内容填充进去

1.1 盒子模型（Box Model）

• 盒子模型
  • 就是把HTML页面中所有不元素看作是一个矩形的盒子，也就是说是一个盛满内容的容器

• 分析得知
  • 盒子的边框
  • 化妆品与盒子之间的填充物
  • 化妆品
  • 盒子与盒子之间的距离

• 对应盒子模型
  • 边框 border
  • 内边距 padding
  • 内容
  • 外边距 margin

总结：

• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

1.2 盒子边框 （Border）

• 语法：

  border : border-width || border-style || border-color

  | 属性 | 作用 | | —- | —- | | border-width | 定义边框粗细，单位是px | | border-style | 边框的样式 | | border-color | 边框颜色 |

• 边框的样式：

  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

综合设置方法：

border : border-width || border-style || border-color

 border: 1px solid red;  没有顺序

1.3 内边距（padding）

• 属性

  • 用于设置内部边距，是指边框到内容之间的距离 | 属性 | 作用 | | —- | —- | | padding-left | 左内边距 | | padding-right | 右内边距 | | padding-top | 上内边距 | | padding-bottom | 下内边距 |

• 内容和边框有了一定的距离

• 盒子会变大 | 值的个数 | 表达意思 | | —- | —- | | 1个值 | padding：上下左右内边距; | | 2个值 | padding: 上下内边距 左右内边距 ； | | 3个值 | padding：上内边距 左右内边距 下内边距； | | 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |

• 数值显示顺序

  • 上右下左 - 一一对应

1.4 外边距（margin）

margin 外边距，控制盒子与盒子之间的距离

1.5 块级元素水平居中

• 实现块级元素水平居中
  • 盒子必须指定宽度（width）
  • 左右边距都设置为auto
• 代码

  .header{ width:960px; margin:0 auto;}

1.6 文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center, 可以让行内元素和行内块居中对齐
2. 块级盒子水平居中 左右margin 改为 auto

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

1.7 插入图片和背景图片

• 插入图片
  • 移动位置只能依靠盒子模型来调节内外边距

• 背景图片

  • 通过 background-position ```css img {
    width: 200px;/ 插入图片更改大小 width 和 height / height: 210px; margin-top: 30px; / 插入图片更改位置 可以用margin 或padding 盒模型 / margin-left: 50px; / 插入当图片也是一个盒子 / }

  div {

    width: 400px;
    height: 400px;
    border: 1px solid red;
    background: #000 url(images/1.jpg) no-repeat;
    background-position: 30px 50px; /* 背景图片更改位置  用background-position */

  } ```

1.8 清除默认内外边距

代码：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。