一、CSS的不正交，主要表现以下两点：
1、各属性之间的相互影响：
i.margin & border
俩个div之间会合并，如果加border就会分开，同样，加以下均可：
display:table; display:flex;padding;border;overflow;display:inline-block;
ii.小圆点 & display
display会改变list样式
iii.position:absolute & display:inline
absolute会将inline变为block
2、各元素之间相互影响：
i.position:fixed & transform
若在transform加缩放，fixed的所有元素会共同缩放
ii.float 影响inline元素
二、宽度与高度
1、div的高度：由其内部文档流元素的总高决定，内联元素从左到右，块级元素从上到下；
如果div中只有一个inline元素，如字体，则其高度由line-height决定。
2、多行文本显示俩侧对齐时，可用
3、想要文字超出盒自动换行
word-break
4、单行文本溢出
5、多行文本溢出
搜索 css multi line text ellipsis
三、堆叠上下文
background border 块级 浮动 内联 z-index: 0 z-index: + ；如果是兄弟元素重叠，那么后面的盖在前面的身上。
四、BFC(块格式化上下文）
CSS规范中对 BFC 的描述
块格式化上下文
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
MDN 对 BFC 的描述
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
BFC功能：
1、爸爸管儿子
用BFC包住浮动元素。（常用 .clearfix是清除浮动）
2、兄弟之间划清界限
用float + div做左右自适应布局
俩个DIV会有边界交叉，若BFC之后，要设置边距，优先设置左边，若设置右边，则需要从边缘算边距。
五、IFC
六、深入理解CSS伪类
伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
关于锚点，有常见的5个伪类，分别是:link,:hover,:active,:focus,:visited
对于伪类顺序，有一个，代表着伪类的顺序是link、visited、focus、hover、active。但是否伪类的顺序只能如此呢？为什么是这个顺序呢？
CSS层叠中有一条法则十分重要，就是后面覆盖前面，所以伪类的顺序是需要精心考虑的。
【1】link和visited必须在最前面，且没有先后顺序，否则link或visited的效果将被覆盖
[注意]link和visited称为静态伪类，只能应用于超链接
【2】hover、active、focus这三个伪类必须是focus、hover、active的顺序，因为在focus状态下，也需要触发hover和active，而要触发active一定要先触发hover，所以active要放在hover后面
[注意]hover、active、focus称为动态伪类，可应用于任何元素，但IE7-浏览器不支持:focus，:hover和:active在IE6-浏览器下只支持给<a> 设置。
所以最终的顺序只有两种:link、visited、focus、hover、active或visited、link、focus、hover、active。
口诀是love-hate
UI元素伪类
UI元素伪类包括:enabled、:disabled、:checked三个，主要针对于HTML中的form元素，IE8-浏览器不支持
结构伪类
结构伪类可分为以下3种情况，IE8-浏览器不支持
//以下情况都是E为父元素，F为子元素
【1】:nth-child(n)、:nth-last-child(n)、first-child、last-child、:only-child
【2】:nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-of-type
【3】:root、:not、:empty、:target
详细可见
https://www.cnblogs.com/xiaohuochai/p/5518943.html
