CSS：必须要掌握的重要基础知识点

1. 盒子
2. 常用选择器
3. 优先级
4. CSS继承
5. 伪元素（pseudo-element）和伪类（pseudo-class）
6. CSS：元素定位机制（positioning schemes）
7. 清除浮动
8. BFC
9. 单行文字溢出用省略号表示
10. 多行文字溢出用省略号表示
11. 盒子水平居中
12. 盒子垂直居中
13. 盒子变换：transform
14. 让变化飞一会儿：过渡（transition）
15. 弹性布局：flex
- flex-container的设置
- flex-item的设置
16. 设置滚动条样式

1. 盒子

每个元素都是一个盒子，该盒子由内容、内边距、边框、外边距组成

盒子宽高的计算有两种方式，用box-sizing属性来设置：

content-box：这是标准的计算方式，盒子宽高仅仅由内容决定
border-box：盒子宽高由内容、内边距、边框一起决定，IE用的就是这种

2. 常用选择器

选择全部元素：* {}
选择 h1 元素：h1 {}
选择类名为 tag 的元素：.tag {}
选择 id 为 title 的元素：#title {}
选择 li 元素内所有的 a 元素：`li a {}
选择与 h1 元素处于同一个父元素内的 p 元素：h1 ~ p {}
选择与 h1 元素处于同一个父元素内且在 h1 后面的 p 元素：h1 + p {}
元素属性选择器（attribute selector）：
- 选择具有 class 属性的 p 元素：p[class] {}
- 选择 class 属性值为 dog 的 p 元素：p[class="dog"] {}

3. 优先级

同一个元素可以使用多个规则来指定它的某个样式属性（比如同一个CSS文件内可能会有两条规则来设置元素A的字体颜色），每条规则都有自己的选择器，显然最终只有一个规则会起作用（不可能字体颜色既是红色又是绿色）。

就以设置元素A的字体色为例，假如设置了两条规则，那么影响到底哪条规则起作用的因素有以下这些，请以单一变量原则理解每一个因素，即考虑某个因素时要假定其他因素都是一样的：

规则出现的顺序：越后面的CSS规则优先级越高
选择器的具体程度：越具体的优先级越高

* < p < h1~ p < h1 + p < h1 + p.my-class < #intro
规则出现的位置：!important > 行内样式 > 不带!important的外联样式 > <style>元素内的样式

理解优先级的好处是可以使用先写全局样式，再通过具体样式覆盖全局样式的策略来实现简洁、清晰、整齐的样式表。

4. CSS继承

有些样式属性，如果你不给它设定一个值，它就会从父元素那里获得一个值，这样的属性就被称为继承属性（inherited property），比如font-size、text-indent等。你不用记住具体哪些属性是继承属性，因为浏览器会告诉你：

如果一个属性是继承属性，那么它必定有一个可选值是 inherit。

可以强制一个属性去从父元素继承一个值（color: inherit）

5. 伪元素（pseudo-element）和伪类（pseudo-class）

伪类和伪元素是用来给不在DOM上的内容添加样式的，伪元素用来在DOM上创建一个元素并添加样式，而伪类用来给处于某个状态的元素添加样式。

最常用的伪类和伪元素：

::first-letter、::first-child、::last-child、::before、::after
:link、:visited、:hover、:active、:focus

6. CSS：元素定位机制（positioning schemes）

CSS通过position属性来设置元素的定位机制，默认值是static

正常流（normal flow）：默认，行内元素一个接一个，块级元素一行接一行。
相对定位（relative）：元素仍在正常流内，可以进行一定的偏移，不影响周围元素
```
h1 {
    position: relative;
    top: 20px;
    left: 36px;
}
```
绝对定位（absolute）：脱离正常流，相对于position值不为static的父元素或body元素进行偏移，任何一个元素进行了决对定位，就变成了块级元素。
固定定位（fixed）：脱离正常流，相对于浏览器窗口进行偏移，页面滚动时该元素不动
浮动（float）：脱离正常流，并总是定位在父元素的最左边或者最右边

一个元素如果脱离了正常流，那么它就有可能和别的元素重叠起来，此时需要使用CSS z-index 属性来调整哪个元素应该在上面。

7. 清除浮动

容器高度不固定且内部元素有浮动时，浮动元素跑出容器外、该容器高度变为0的现象称为浮动溢出，通过清除浮动可以解决该问题：

方法一：在浮动元素后面放置一个设置了clear的空元素——<div style="clear: both;"></div>
方法二：如果浮动元素后面有未浮动的元素，为其设置 clear: both; 也一样。
方法三：给容器设置伪元素 ::after，从而在内部末尾生成一个看不见的元素，然后再设置 clear: both;
```
//假设容器有类名为：clearfix
.clearfix::after {
  clear: both;
}
```
方法四：给容器设置overflow——overflow: auto

8. BFC

BFC是每个元素都可以具有的一个特性，一个元素一旦被触发BFC，那么它将仍在正常流但是具有了普通盒子不具备的一些特点，它已经变成了一个独立的区块，不受外面元素的影响。

以下元素具有BFC特性（如何触发BFC）：

<body元素
float值不为none的元素
position值为absolute或fixed的元素
display值为inline-block、table-cells、flex的元素
overflow值为hidden、auto、scroll的元素

BFC的应用：

清除浮动的第四种方法（利用了BFC可以包裹浮动元素的特性）
实现两列自适应布局，（利用了BFC可以防止浮动元素覆盖其他元素的特性）：

左侧固定宽度且浮动，右侧宽度自适应、不浮动、设置overflow以触发BFC

9. 单行文字溢出用省略号表示

p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

10. 多行文字溢出用省略号表示

.summary p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

11. 盒子水平居中

方法1：margin法

/* 块级、定宽、左右外边距为auto，这三个缺一不可 */
.box {
  display: block;
  width: 100px;
  margin: 0 auto;
}

方法2：定位法

/* 绝对定位、定宽、定位50%，往回偏移盒子宽度的一半，这三个缺一不可 */
.box {
  position: absolute;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}

方法3：不定宽定位法

.box {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0)
}

方法4：flex布局（见后文）

12. 盒子垂直居中

方法1：定位法，思路、要求都和水平居中的定位法一样

方法2：不定宽定位法

.box {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

方法3：flex布局（见后卫）

13. 盒子变换：transform

transform属性可以对元素进行旋转（rotate）、缩放（scale）、平移（translate）、扭曲（skew）等操作，这些操作可以同时进行，之间用空格隔开，比如：

transform: translate(20px, 0) rotate(30deg)

旋转：transform: rotate(30deg)
缩放：transform: scale(2, 3)，X方向放大2倍，Y方向放大3倍
平移：transform: translate(20px, 50px)，X方向移动20px，Y方向移动50px
扭曲：transform: skew(30deg, -30deg)，X方向扭曲30度，Y方向扭曲负30度

14. 让变化飞一会儿：过渡（transition）

人们通常会在元素上出现鼠标hover等事件时对样式进行修改，比如，在hover时修改元素宽度：

.box {
  width: 50px;
}
.box:hover {
  width: 100px;
}

但是这样的变化太生硬了，可以通过将width属性设置为过渡属性，来让变化的过程肉眼可见：

.box {
  width: 50px;
  transition: width 500ms linear;
}
.box:hover {
  width: 100px;
}

过渡可以让某个属性的变化看起来更平滑，通常人们会对尺寸、颜色、透明度、位置、角度等进行过渡。

语法：transition: [属性] [时间] [速度曲线]

可选速度曲线：linear、ease、ease-in、ease-out、ease-in-out

15. 弹性布局：flex

flex布局由 flex-container 和 flex-item 两部分组成。一个盒子的display属性一旦被设置为flex或inline-flex，它就变成了一个flex container，它的内部元素就自动变成了flex item。要完成弹性布局就得分别对这两部分进行属性设置。

学习的最佳方式就是做一个父元素包着子元素的例子，照着文档实际尝试一番，不用记住每一条，当然也记不住，除非敲的够多了。

下面列一些基本属性：

flex-container的设置

flex-directon：指定flex-item应该如何排列，有横竖（row、column）两个方向，这两个方向也称为 main-axis。

可选值： row、row-reverse、column、column-reverse
flex-wrap：当flex-container的宽度不足时，指定flex-item应不应该换行显示，可选值：
- no-wrap：此时flex-item会尽量调窄宽度
- wrap：flex-item不会调窄宽度，而是换行显示（这里的“行”和flex-direction有关）
- wrap-reverse：先换行，再颠倒
flex-flow：flex-direction和flex-wrap的简写：flex-flow: row wrap;
justify-content：调整flex-item的对齐方式以及剩余空间的分配方式，常用值：center、flex-start、flex-end、space-around、space-between、space-evenly
align-items：当flex-item都在一行时，该属性决定它们在竖直方向如何对齐
align-content：当flex-item不止一行且竖直方向有剩余空间时，该属性可以调整flex-item和剩余空间的分配方式

flex-item的设置

order：每个flex-item都有一个默认的排序值：0，如果单独修改某个flex-item的order值，那么它的出现顺序就会发生变化
flex-grow：值为数字，默认为0。当一行中还有剩余空间时，设置了该属性就会让flex-item的尺寸放大一定比例。
flex-shrink：值为数字，默认为0。当一行中空间不足时，设置该属性就会让flex-item的尺寸缩小一定比例。
align-self：该属性允许某个flex-item设置与其他flex-item不一样的对齐方式。

16. 设置滚动条样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width:5px;
  background-color: white;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius:10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background: #096dd9;
}