文档流（Normal Flow）

内联元素从左到右依次排列，如果空间不够了就会换一行然后重新从左到右依次排列；

块级元素会另起一行，从上到下排列，即使一行可以容纳两个块级元素。

div里面有内联元素时的高度

如果一个div里面只有一个内联元素，那么这个div的高度是由font-size 乘以字体建议行高系数（或者是直接规定的line-height）所决定的，和这个字多大（font-size）没有关系。如果是多行，就把每一行的行高加起来一起算。

为什么line-height和font-size不同？不同字体对应的行高字体比也不同？因为不同字体有不同的建议行高，就是超出四线格之后还有一部分。所以想让行高固定，要用line-height;

1. 你好和a是基线（底部）对齐，而不是中线对齐
2. 每一种字体都有一个建议行高，超出四线格还会空出一部分
3. font-size:100px;指的是字体最高到最低的高度，不是行高（不包括多余的空部分）
4. 真实高度：font-size X 字体本身建议行高

解决办法：强制规定line-height:100px;

多行文字溢出

div的宽度不是由文字决定的，不会因为 文字变长div就变长。

多行文字溢出：google搜索 css multi line text ellipsis

内联元素特点

html会把所有内联元素之外的符号删掉(1之前的)，内联元素之间的所有符号变为一个空格，包括inline 和inline-block

同理span之间有回车，也会显示成空格

响应式

当内联元素太多时，会自动换行，这就叫做文档流

此时22222222222222222222222222222222222222222222222222222222超出的文档并且不在1的后面，因为22222222222222222222222222222222222222222222222222222222是一个整体，而不是很多个2，不能分开。

解决方法：使用连字符或者`work-break:break-all

`

文字垂直居中

这样的代码只能用一行，只要多一个字就会bug。尽量不要写div的高度，写padding让他们撑起来。这样子可以写多行，样式不会乱。

div里面有块级元素时的高度

这时候由div里面的块级元素的内容＋padding＋border＋margin（看情况）决定的。

margin合并

如果父元素没有东（border,padding）西可以挡住子元素的margin，那么父元素就会和子元素的margin合并起来

踩坑

可以用overflow:hidden来避免margin合并，但是不推荐使用。因为这样会导致别的问题。

总结

div的高度是由其内部的文档流中元素的高度的总和决定的（并不是相等，有margin合并、脱离文档流等问题）

脱离文档流

float:left
position:fixed
position:absolute

会脱离文档流：算高度的时候别叫上我

一比一的div

不能写宽度，需要自适应， padding-top:100%(意思为和宽度一样)

题目

堆叠上下文

堆叠顺序

inline-block元素属于inline元素。

同一个部门中 不要死记顺序，要设计实验来验证，这是学习css的重要方法： relative/absolute(z-index:1)>relative/absolute(z-index:0)>文字/内联>float(包括文字/内联)>子div>border>background>z-index(-1)，同时后出现的在上面，例如子div的文字/内联>父div的文字/内联

如果父div是定位的，并且z-index不是autu，那么z-index(-1)>border>background，因为一旦通过relative/absolute触发了父div，那么就是成立了一个新的部门，这时候大家就不是零散的了，这时候在一个部门里面了，负z-index就不能躲到后面去了

堆叠上下文

我们并不知道什么是堆叠上下文，只知道怎样能将他变为堆叠上下文，有哪些属性会触发堆叠上下文

z-index:
html

堆叠上下文对 z-index 的影响

此时因为html触发堆叠上下文，a1的index大于b1，a和b没有触发堆叠上下文，所以a1在b1上面。

此时0级的b1干过了2级的a1因为通过relative/absolute触发父元素的堆叠上下文，开辟了a，b这两个新的部门导致b因为是后面的所以压在了a的上面，所以b中的b1才能压在a中的a1上面