前言：如果你写的 CSS 中经常出现 width 与 height，说明你写的 CSS 是有问题的
一、文档流（Normal Flow）
文档流就是文档内元素的流动方向
- 内联元素：从左往右流动，当流动遇到阻碍，换行继续从左往右流动
- 块级元素：每一个块独占一行，其他的块另起一行（相当于从上往下流动）
二、脱离文档流
-
什么是脱离文档流
元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。 -
脱离文档流的几种方式
- 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。
四、实现水平垂直居中的几种方式
下面我从父元素与子元素的宽高固定情况来分类
- 父元素高度确定，子元素固定宽高
子元素中设置
margin:auto;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
http://js.jirengu.com/qujelorame/1/edit?html,output
-
父元素高度不确定，子元素宽度确定
只需要在父元素设置上下 padding 一样高即可让子元素垂直居中（用 padding 把父元素的高度给撑起来）
http://js.jirengu.com/susaxafaga/1/edit?html,output -
父元素高度确定，子元素不固定宽高
父元素中设置
display: flex;
justify-content: center;
align-items: center;
http://js.jirengu.com/vudisequhi/3/edit?html,output
五、为什么不推荐乱写 height 和 width
- 因为宽高定死之后，如果文字变多，会出现奇怪的样式
- 因为宽高定死之后，如果用户缩小窗口大小，会出现滚动条，影响体验
- height 可以用 line-height 和 padding 来撑，这样写更灵活美观
- width: 100% 再加上 padding 就会撑出父元素之外，很难看
- 不写死宽高，页面就是响应式的。
最后是一些常用的例子：
- 如何实现文字对齐
- 导航demo
- word-break
- 单行文本溢出
- 多行文本溢出（搜索关键词 css mutli line text ellipsis）
- 文字垂直居中
- 一个居中的对话框
- margin合并问题
- 一个 1:1 的 div
网友评论