块级元素和行内元素
常见块级元素 div/p/form/ul/ol/li...
常见的行内元素 span/strong/em...
区别：
- 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行
- 块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行
- 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果（意思为margin不起作用，padding起显示作用但无实际边距，与周围会产生重叠）
行内元素进阶
行内元素又分为可替换元素和不可以替换元素 -
替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。可以设置width、height
不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）, 如。设置width、height无效
不可替换元素需要设置width、height的几种方法 -
- 浮动 - float：隐式使用inline-block, 不论元素本身是什么，当它浮动时，就会生成一个块级框
- position:absolute: 隐式使用inline-block, 与float的区别是不影响兄弟元素，不占位
- inline-block
Position
相关的值
- static：默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”。
- relative：
relative表现的和static一样，除非添加了一些额外的属性。 - fixed：一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。有兼容问题
- absolute：
absolute与fixed的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素（即非static元素。）
清除浮动
why: 当float子元素高度超出父级元素高度时，父级元素高度塌缩，因为float元素脱离文档流，其布局不受父元素控制
如何解决
- 添加带clear:both的div
- 父元素设置overflow:hidden or auto
- 父元素添加:after伪元素并设置{ content: ".";display: block;height: 0;visibility: hidden;clear: both; }
伪类与伪元素
伪类：伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。（按功能分为状态伪类和结构性伪类）
伪元素：伪元素为DOM树没有定义的虚拟元素。
自己理解: 伪类用于用于向某些选择器添加特殊的效果，伪元素用于将特殊的效果添加到某些选择器
自己理解（白话）：伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。 而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
常用伪类： :visited/:hover/:active/:first-child/:nth-child....
常用伪元素：::before/::after/::first-letter/::last-letter.... (伪元素建议使用标准的双冒号)
CSS的层叠&继承
继承：某些类型的属性是不会默认继承的，而某些元素则不会继承某些属性。但是在某些情况下，可以使用 [property name]: inherit 来强制继承。
举个例子，input 元素不会继承任何字体的属性，textarea 也一样不会继承。为了确保所有元素都可以从全局作用域中继承这些属性，可以使用通配选择符和 inherit 关键字。这样，就可以最大程度地使用继承了。
* {
font-family: inherit;
line-height: inherit;
color: inherit;
}
盒模型相关
max-width/min-width：设置大小约束而不是绝对的大小 , 多语言切换场景比较实用
常规宽度
真实width = 块元素width + 2 * border-width + 2 * padding-width
box-sizing模式
真实width = 设置的块元素width
外边距塌陷（margin-collapse）
原因：
流内块级元素的top与bottom外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距）
具体计算结果：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和
解决办法：
原因
- 一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）
- 建立了新的块格式化上下文的元素（例如，浮动盒与'overflow'不为'visible'的元素）的margin不会与它们的流内子级合并
- 绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）
- 内联盒的margin不会合并（甚至与它们的流内子级也不会）
因此
- border:1px solid transparent;
- padding;
- float:left/right
- position:absolute
- display:inline-block
- overflow:hidden/auto
溢流Overflow
原因：当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况
相关的值：
- visible：元素的内容在元素框之外也可见
- hidden：超出的内容不可见
- scroll：固定出现双向滚动条
- auto：如果内容超出会显示单向滚动条
- inherit：继承
BFC
BFC是block formatting context，也就是块级格式化上下文
触发条件：
- 根元素，即HTML元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
作用
- 可以阻止元素被浮动元素覆盖 => 横向菜单Menu
- 可以包含浮动元素 => 清除浮动
- 阻止外边距塌陷（margin-collapse）=>