CSS基础相关

块级元素和行内元素

常见块级元素 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，也就是块级格式化上下文

触发条件：

1. 根元素，即HTML元素
2. float的值不为none
3. overflow的值不为visible
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

作用

1. 可以阻止元素被浮动元素覆盖 => 横向菜单Menu
2. 可以包含浮动元素 => 清除浮动
3. 阻止外边距塌陷（margin-collapse）=>