传统布局： 标准流、浮动与定位

传统布局三种方式

• 标准流（盒模型）
• 浮动
• 定位

---

一、标准流

1. 元素的划分
2. 行内元素
3. 块级元素

1. 元素的划分

1. 行内元素 - inline
2. 块级元素 - block
3. 特殊的行内块元素 - inline-block

重点：

1. 行内元素 负责页面的 横向 排版
2. 块级元素 负责页面的 纵向 排版

【行内元素. 特性】
  a. 不能设置宽高
  b. 默认在一行排列显示
  c. 当一行显示不下时，会自动换行显示
  d. 不能设置垂直方向的外边距
  e. 可以设置padding与水平方向的margin与border


【行内元素高度】
  a. 由字体的高度+上下padding决定
  b. 行高本身不影响行内元素的高度
  c. 多余的部分会溢出

技巧

• 将行内元素的line-height 设置成父元素的height一样时，可以实现文本垂直居的效果， 也对行内块元素有效。

【行内元素的宽度】
  a. 由字体的宽度+左右padding决定

【行内元素的margin】
  a. 设置上下margin无效
  b. 可