持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
vertical-align
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。这些值使元素相对其父元素垂直对齐。
vertical-align 生效有一个前提条件是，只能应用于display: table-cell, inline, inline-block, inline-table 。
属性值： 线类 baseline(默认) ，top middle bottom
文本类 text-top text-bottom
上标下标类 sub super
数值百分比类 20px 20%
vertical-align 设置正值往上偏移，设置负值往下偏移，当属性值设置为 middle 的时候，并不是严格意义上面的居中，有可能会往下偏移一点。
line-height 是相对于 font-size 计算的，vertical-align 属性的百分比是相对于 line-height 计算的。可见 css 世界的各类属性是相互间紧密联系而非孤立的个体。一般情况我们是知道固定的宽高的，所以很少用百分比进行计算。在样式布局中如果出现某一些诡异的现象，我们就要注意是不是有“幽灵空白节点”在作祟或者是 vertical-align。
div 包裹图片的时候，图片底部留有间隙的问题（间隙产生的原因是因为空白幽灵节点的问题导致的。知道了间隙产生的原理清除起来就好很多了，让图片块状化，父元素的 line-height 或者 font-size 足够小设为0，或者图片的 vertical-align: bottom 解决。
float
浮动的本质是实现文字环绕效果，让父元素高度坍塌的原因就是为了实现文字环绕的效果，高度坍塌只是让跟随的内容可以和浮动元素在一个水平线上，还有另外重要的特性是行框盒子和浮动元素的不可重叠性（行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠。
float 的使命是破坏文档流。
clear
元素盒子的边不能和前面的浮动元素相邻，对于后面的浮动元素是不闻不问的，设置了 clear 属性的元素自身如何如何，而不是让 float 元素如何如何。只有块级元素才有效，而 ::after 等伪元素默认都是内联水平的，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因了。他的本质并不是清除浮动，只是不让自己不和 float 元素在一行显示
overflow
当子元素内容超出容器高度限制的时候，裁剪的边界是 border box
overflow 支持的属性值，auto 不足以滚动的时候没有滚动条，可以滚动的时候才有滚动条；scroll 是滚动条一直存在，不管是否需要滚动。
overflow:hidden 滚动依然存在，只是滚动条不存在而已。元素依然可以发生滚动 [例子]。
position: fixed 固定定位元素的包含块是根元素，除非窗体滚动，否则 overflow 剪裁规则对固定定位都不适用。
transform 改变 overflow 对 absolute 元素的限制,如果父元素设置了 overflow：hidden ，子元素 absolute ，超出不会被隐藏。但是如果此时父元素再有 transform 的话，子元素会被隐藏。
BFC
彻底清除浮动的影响，用它应该是最好的。利用 BFC 的结界特性彻底解决浮动对外部或者兄弟元素的影响，结界只是衍生出来的特性，裁剪才是本职工作。
BFC 块级格式化上下文
BFC应用：
防止 margin 重叠
清除内部浮动
自适应两（多）栏布局
防止字体环绕
触发BFC条件：
根元素
float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute、fixed
BFC的特性
- 内部的Box会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定
- BFC的区域不会与float的元素区域重叠。
- 计算BFC的高度时，浮动元素也参与计算
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
如果一个元素具有 BFC ,内部元素再怎么翻江倒海，翻云覆雨都不会影响外面的元素，可以实现更加健壮，更智能的自适应布局，之所以没有流行起来是因为引发 BFC 都有很多局限性
我们要尽量避免滚动容器设置 padding-bottom ,除了表现形式不一样之外，还会导致 scrollHeight 值不一样，往往会给开发带来难以察觉的麻烦，需要引起注意。textarea html 默认是可以产生滚动条的
在 PC 端窗口的滚动高度可以使用 document.documentElement.scrollTop 获取，但是在移动端可能要使用 document.body.scrollTop 获取。移动端的屏幕尺寸本身就是有限的，滚动条一般都是悬浮模式 用 document.scrollingElement 可以一统这两个值。
滚动栏占据宽度的特性最大的问题就是页面加载的时候，水平居中布局的时候可能会产生晃动，因为窗口默认是没有滚动条的，html 内容自上而下加载，就会发生一开始没有滚动条，后来突然出现了滚动条，此时页面可用宽度发生变化，水平居中重新计算，导致页面发生晃动，这个体验是非常不好的。
overflow:hidden 当里面的内容高度溢出的时候，滚动依然存在，仅仅只是滚动条不存在，我们看不见了而已。锚点定位效果等同于 document.querySelector('.box').scrollTop=100 ,我们可以利用他实现一些 javascript 的效果。demo.cssworld.cn/6/4-2.php 这个例子，demo.cssworld.cn/6/4-3.php 这个更好
position
position:absolute 和 float 同时存在的时候，float 无任何效果,对于绝对定位元素来说 height：100%,是第一个具有相对定位属性的祖先元素的高度，height: inherit 是单纯的父元素的高度继承；
absolute 是一个非常独立的 css 属性，其样式和行为表现不依赖其他任何 css 属性就可以完成，当我们仅仅只设置 position：absolute；会变成相对定位。无依赖 absolute 绝对定位应用场景：各类图表定位超越常规布局排版，下拉列表的定位。
当 position: absolute 遇到 left top right bottom 属性的时候，absolute 元素才真正变成定位元素。当对立方向上面同时发生定位的时候，absolute 会具有流体特性。他的宽/高度是相对于最近具有定位特性的祖先元素的宽度计算。div:{ position: absolute; left: 20px; right: 20px;} 距离他最近具有定位特性的祖先元素宽度是 1000px ;则这个 div 元素的宽度是 960px
比如
display: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
会默认完全覆盖他的包含块（宽高等于他不为 static 的元素），利用绝对定位的流体特性和 margin:auto 的自动分配特性实现居中
display: relative 相对定位元素的 left top right bottom 的百分比值是相对于包含块计算的，而不是自身，定位位移是相对自身，比如父元素没有设定高度或者不是格式化高度，top: 20% 等同于top: 0。相对定位元素应用对立方向定位值存在的时候，只有一个方向的属性会起作用，默认文档流是自上而下，从左往右。（top/bottom 同时使用的时候，bottom 没有作用）。
尽量少使用 display: relative ，因为元素的层叠顺序提高了，会出现一些其他问题。position：relative 最小化原则，因为会改变层级关系，所以我们要尽量少用，怕出现多个 relative，一层一层依赖，最后导致整个项目高度耦合
display: relative 跟固定或者绝对定位不一样，不能用top、right、bottom和left改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。可以用top或者bottom，但它们不能一起用（bottom会被忽略）。同理，可以用left或right，但它们也不能一起用（right会被忽略）
常见的用法 position: relative 给它里面的绝对定位元素创建一个包含块
z-index
z-index 并非只对定位元素有效，flex 盒子的子元素也有设置。
层叠顺序：层叠上下文（background/border) => 负 z-index => block 块状水平盒子 => float 浮动盒子 => inline 水平盒子 => z-index:0/auto => z-index 正
装饰，布局，内容
层叠准则：谁大谁先上，后来者居上；有时候我们在网页重构的时候会发现 z-index 嵌套层级错乱，这时要看看是不是受父级影响了。
