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

传统布局三种方式

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

---

一、标准流

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. 可以溢出， 不影响父级元素

【块级元素】
 a. 可以设定宽高
 b. 独占一行
 c. 一般与行内元素组合使用
 d. 高度不设置时，由内容撑开
 e. 相邻的上下边距会合并，取其中最大值
 f. 当子元素设置上边距时，且紧挨着父元素上边界时， 会造成margin-top塌陷
 g. 解决: border, overflow(BFC), padding

【行内块元素】
 a. 具有行内与块级的特点
 b. 多行排列时，有换行的\n在浏览器显示时，有空格，
 c. 可以用font-size:0, 或编辑不换行。

二、浮动

特性:

1. 会脱离标准流， 影响正常的布局
2. 一行可以排列多个，且能设置宽高
3. 且具有顶部对齐的特点， 可应用于 【爆布流】
   -------

清除浮动: clear:both

1. 额外标签法: 在最后一个浮动元素插入标签
2. BFC法： overflow:hidden; 对于溢出的部分不能展示。
3. 伪元素法： ::after, ::before;

/*::after法*/
.clearfix::after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom: 1;  /*兼容ie6、7， hack写法*/
}

/*::after, ::before*/
.clearfix::after, 
.clearfix::before {
	content: '';
	display: table;
}
.clearfix::after {
	clear: both;
}

.clearfix {
	*zoom: 1; /*兼容ie6、7*/
}

三、定位

类型	说明
相对定位	不脱离正常的标准流， 还占有以前的位置，相对于自己原因的位置定位。
绝对定位	脱离正常的标准流， 相对于最近一级有定位属性的元素进行定位
固定定位	脱离正常的标准流， 相对于body元素进行定位