### 文档流中： 内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。 * 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。 * 脱离文档流的方法： 1. `float:left;`2.`position: absolute;`3.`position:fixed` ## position的属性值 常用的：static、relative、absolute、fixed。 不常用的：inherit、initial、sticky * `absolute`绝对定位，相对于`position`不为`static`的第一个父级元素进行定位，当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定位。脱离文档流 * `fixed`固定定位。相对于浏览器窗口进行定位，脱离DOM流 * `inherit`继承父级元素`position`属性值 * `static`默认值，即没有定位，仍为文档流。不能通过z-index进行层次分级。 -`sticky`，作用类似于`relative`和`fixed`. 元素在跨越特定阈值前为相对定位，跨越之后为固定定位。 - ==sticky 粘性定位== sticky定位是 相对定位relative和固定定位fixed的结合； 它主要用在对scroll事件的监听上，在滑动过程中，元素先按照普通文档流定位，然后相对于该元素在流中的 BFC和 最近的块级父元素相对定位。而后，元素定位表现为在跨越特定阈值为固定定位。 使用条件： 1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性； 2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位； 3. 父元素的高度不能低于sticky 元素的高度； 4. sticky 元素仅在其父元素内生效； ## z-index属性 正常的文档流一定程度上发生改变，造成元素显示出现重叠的情形，特别是使用绝对定位时。为了能让重叠的元素有序的显示出来，需要在定位时对相关元素加上z-index属性，其值是一个整数值（默认值为0），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。 ## line-height属性的理解，1.5和150%区别 ⾏⾼是指⼀⾏文字的⾼度，具体说是两⾏文字间基线的距离。CSS中起⾼度作⽤的是height和line-height，没有 定义height属性，最终其表现作⽤⼀定是line-height。 单⾏文本垂直居中：把line-height值设置为height⼀样⼤⼩的值可以实现单⾏文字的垂直居中，其实也可以把height删除。 多⾏文本垂直居中：需要设置display属性为inline-block。 **line-height属性1.5和150%区别** ⽗元素设置line-height:1.5会直接继承给⼦元素，⼦元素根据⾃⼰的font-size再去计算⼦元素⾃⼰的line-height。 ⽗元素设置line-height:150%是计算好了line-height值，然后把这个计算值给⼦元素继承，⼦元素继承拿到的就 是最终的值了。此时⼦元素设置font-size就对其line-height⽆影响了 ## overflow属性 ~~~ - scroll：必定出现滚动条 - auto：子元素内容大于父元素时出现滚动条 - visible：溢出的内容出现在父元素之外 - hidden：溢出时隐藏 ~~~ ## dispaly  <hr> ## inline、block、inline-block三者区别 ``` block 块级元素特点： 1 - 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行） 2 - 元素的高度、宽度、行高以及顶和底边距都可设置。 3 - 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 inline 内联元素特点： 1 - 和其他元素都在一行上； 2 - 元素的高度、宽度及顶部和底部边距不可设置； 3 - 元素的宽度就是它包含的文字或图片的宽度，不可改变。 inline-block 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。 1 - 和其他元素都在一行上； 2 - 元素的高度、宽度、行高以及顶和底边距都可设置。 ``` <hr> ## display:inline-block **问题** 两个`display:inline-block`元素放到一起时会产生一段空白。 **原因** 元素被当成了行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中`white-space`属性默认是`normal(合并多余空白）`，原来`HTML代码中的回车换行符被转换成一个空白符`，在字体不为0的情况下，空白符占据一定宽度，所以`inline-block`的元素之间就会出现空白间隙 ``` 1 - 将子元素标签的结束符和下一个标签的开始符写在同一行 <div> <div> 左 </div><div> 右 </div> </div> 2 - 父元素中设置font-size:0, 在子元素上设置正确font-size 3 - 为子元素设置float:left ```