我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容：
vertical-align为何时灵时不灵
BFC是什么？有何作用
绝对定位的奇淫技巧
CSS特性 vertical-align为什么时灵时不灵 生效条件只能应用在display为inline、inline-block、inline-table、table-cell上。
有个高频面试题，“如何使一个不定宽高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。这个回答是减分的，至少在某种程度上给人一种感觉CSS基础比较薄弱。
内联元素垂直居中对齐开发中会遇到用字幕x代替关闭icon，用...显示溢出或者加载中。但是会发现字母x、省略号并没有与文本垂直方向居中对齐，这是因为文本默认是基线对齐，x、省略号默认底部在基线处。如下图所示：
如下，为文本对齐demo:
<div> <span>你好，世界</span> <span>...</span> </div>实际显示效果如下：
如果要实现垂直居中，利用vertical-align，搭配line-height即可，vertical-align不仅可以设置middle/top/bottom/baseline...关键字，也可以设置常用的度量单位，正负值均可，使用比较灵活。为什么要给.more设置line-height属性呢？其实是因为line-height属性可以继承，如果不缩小.more的行高，就会撑大父元素的尺寸。
<style> .container{ font-size: 64px; line-height: 64px; } .more{ line-height: 16px; vertical-align: 16px; } </style> BFC究竟有什么作用 什么是BFCBFC全称block formatting context，即“块状格式化上下文”，与外界元素相对独立的一片区域，具有以下特性：
计算BFC高度时，浮动元素也参与计算
属于同一BFC容器的元素垂直方向的margin会合并
BFC容器是独立容器，不会影响外部元素的布局
利用BFC的特性，我们可以实现以下功能：
清除浮动
防止垂直方向margin合并
实现多栏弹性布局
BFC的生效条件以下CSS属性会触发元素生成BFC结界:
根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别- 是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFc
BFC使用案例清除浮动
<style> .container{ /* overflow: hidden; */ /* position: absolute; */ /* float: left; */ } .left{ float: left; width: 200px; height: 200px; } </style> <div> <div></div> </div>以上代码，container容器高度为0，因为子元素left浮动。我们只需要把container容器转成BFC容器，即可清楚浮动，注释的几种方法都可以。
防止垂直方向margin合并
<style> .blue, .red-inner { height: 50px; margin: 10px 0; } .blue { background: blue; } .red-outer { overflow: hidden; background: red; } </style> <div></div> <div> <div>red inner</div> </div>自适应布局
左侧固定，右侧自适应。
<style> .left{ height: 200px; width: 200px; float: left; background-color: burlywood; } .right{ height: 200px; margin-left: 200px; background-color: cadetblue; } </style> <div> <div></div> <div></div> </div> 绝对定位还能玩出什么花样 简介绝对定位使用场景非常多。绝对定位元素脱离文档流，相对于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。我们通常都是设置垂直方向与水平方向的的位置，如果四个方向都不设置或者四个方向都设置会出现什么彩蛋呢？下文会给出揭晓。
left/top/right/bottom都有值的定位当对立位置（left与right，top与bottom）都设置值且元素没用固定宽高