css的知识用的少，看一点忘一点，所以总结一下最近看到的css知识。知识积累多了，会整理成自己完成的体系。
目前记录一下主要的几点，以后再根据实例来总结
知识来源：https://segmentfault.com/a/1190000017069985
目录
1.流体布局
2.块级元素
3.超出容器限制
4.关于 height:100%
5.为何height:100%无效
6.幽灵空白节点
7.内联元素的基石 line-height
8.半行距
9.CSS 世界的结界—BFC
10.理解元素的层叠顺序
利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性。 元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变。
1.块级盒子负责结构
2.内联盒子负责内容
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响 .clear:after { content: ''; display: table; // 也可以是block，或者是list-item clear: both; }内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap
父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了;百分比高度值要想起作用，其父级必须有一个可以生效的高度值;
包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto
如何让元素支持height:100%效果
1.设定显示的高度值
2.使用绝对定位
内联元素的所有解析和渲染会有前面有一个“空白节点”；不占据任何宽度，看不见也无法通过脚本获取（文档声明必须是HTML5文档声明（HTML代码如下））
div { background-color: #cd0000; } span { display: inline-block; } <div><span></span></div>
1.非替换元素的纯内联元素，其可视高度完全由line-height决定
2.定了用来计算行框盒子高度的基础高度;通过改变“行距”来实现
1.当前文字的上方和下方；这个“行距”的高度仅仅是完整“行距”高度的一半
2.半行距 = (line-height - font-size )/2;
BFC不做笔记是真的会忘，总是记成清楚浮动了
要点：“CSS世界的结界”;通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力
表现原则
BFC元素是不可能发生margin重叠
BFC元素清除浮动
触发BFC条件
<html>根元素 float的值不为none overflow的值为auto、scroll或hidden display的值为table-cell、table-caption和inline-block中的任何一个 position的值absolute 只要元素符合上面任意一个条件， 就无须使用clear:both属性去清除浮动 BFC 与流体布局 通流体元素在设置了overflow:hidden后， 会自动填满容器中除了浮动元素以外的剩余空间，形成自适应布局效果，而且这种自适应布局要比纯流体自适应更加智能 img { float: left; } .animal { overflow: hidden; } <div class="father"> <img src="me.jpg"> <p class="animal">小猫1，小猫2，...</p> </div>要想彻底清除浮动的影响，最适合的属性不是clear而是overflow。一般使用overflow:hidden，利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响
元素发生层叠时有着特定的垂直显示顺序
谁大谁上
当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个
后来居上
当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素
层叠上下文的特性
层叠上下文的层叠水平要比普通元素高 层叠上下文可以阻断元素的混合模式 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文” 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中
正统派
z-index值为数值的定位元素的传统“层叠上下文”。
position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其 z-index值不是auto的时候，会创建层叠上下文
扩招派
其他CSS3属性
元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不是auto元素的opacity值不是1元素的transform值不是none元素mix-blend-mode值不是norma元素的filter值不是none元素的isolation值是isolate元素的will-change属性值为上面2～6的任意一个（如will-change:opacity、will-chang:transform等）元素的-webkit-overflow-scrolling设为touch
层叠上下文与层叠顺序
如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto，可看成z:index:0级别
如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定
