前言：如果你写的 CSS 中经常出现 width 与 height，说明你写的 CSS 是有问题的

一、文档流（Normal Flow）

---

文档流就是文档内元素的流动方向

• 内联元素：从左往右流动，当流动遇到阻碍，换行继续从左往右流动
• 块级元素：每一个块独占一行，其他的块另起一行（相当于从上往下流动）

二、脱离文档流

---

1. 什么是脱离文档流
     元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

2. 脱离文档流的几种方式

• float:left
• position:absolute
  绝对定位，相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）
• position:fixed
  完全脱离文档流，相对于窗口定位

注意：position:relative 并不会脱离文档流，它依然占据原来的空间。

三、内联元素、块级元素的高度分别是由什么决定的

---

这里以 div 和 span 为例（div 和 span 默认无样式，宽高都为 0）

• 块级元素(block)：div 的高度是由其内部文档流元素的高度总和决定的（决定不代表相等）
• 内联元素(inline)：span 的高度是由 line-height 决定的，给 span 设置宽高是没有任何效果的，span 的高度不受 margin 和 padding 的影响（宽度会受到影响）http://js.jirengu.com/melirituso/1/edit?html,output

注意：line-height 的大小很难确定，它跟字体有关，参考文章 字体度量、line-height 和 vertical-align。

四、实现水平垂直居中的几种方式

---

下面我从父元素与子元素的宽高固定情况来分类

1. 父元素高度确定，子元素固定宽高
   子元素中设置

margin:auto;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;

http://js.jirengu.com/qujelorame/1/edit?html,output

2. 父元素高度不确定，子元素宽度确定
   只需要在父元素设置上下 padding 一样高即可让子元素垂直居中（用 padding 把父元素的高度给撑起来）
   http://js.jirengu.com/susaxafaga/1/edit?html,output

3. 父元素高度确定，子元素不固定宽高
   父元素中设置

display: flex;
justify-content: center;
align-items: center;

http://js.jirengu.com/vudisequhi/3/edit?html,output

五、为什么不推荐乱写 height 和 width

---

1. 因为宽高定死之后，如果文字变多，会出现奇怪的样式
2. 因为宽高定死之后，如果用户缩小窗口大小，会出现滚动条，影响体验
3. height 可以用 line-height 和 padding 来撑，这样写更灵活美观
4. width: 100% 再加上 padding 就会撑出父元素之外，很难看
5. 不写死宽高，页面就是响应式的。

最后是一些常用的例子：

1. 如何实现文字对齐
2. 导航demo
3. word-break
4. 单行文本溢出
5. 多行文本溢出（搜索关键词 css mutli line text ellipsis）
6. 文字垂直居中
7. 一个居中的对话框
8. margin合并问题
9. 一个 1:1 的 div