深度探索CSS：从基础到高级

position: absolute;使元素完全脱离文档流（原始位置不保留）

在设置flex布局之后，子元素的float、clear、vertical-align属性都将失效

.container {

flex-direction: row | row-reverse | column | column-reverse;

}

默认值为：

row，主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上端。

column-reverse：主轴为垂直方向，起点在下端

.container {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

说明:flex-start：左对齐。

flex-end：右对齐。

center：居中。

space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍

.container {

align-items: flex-start | flex-end | center | baseline | stretch;

}

默认值为 stretch，即如果项目未设置高度或者设为

auto，将占满整个容器的高度。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐

.container {

//定义多根轴线的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响

通常最好让优先级尽可能低，这样当需要覆盖一些样式时，才能有选择空间

在选择器中不要使用ID

不要使用！important

创建一个用于分发的JavaScript模块（比如NPM包）时，强烈建议尽量不要在JavaScript里使用行内样式

正确的做法是在包里包含一个样式表。如果组件需要频繁修改样式，通常最好用JavaScript给元素添加或者移除类

继承：

跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing

有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial

width的默认值就是auto； display: initial等价于display: inline

在CSS中，1em等于当前元素的字号，其准确值取决于作用的元素

em用在内边距、外边距以及元素大小上很好，但是用在字号上就会很复杂

使用rem设置字号 rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位

一般会用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）

vh：视口高度的1/100。

vw：视口宽度的1/100。

vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。

vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax）

calc()函数内可以对两个及其以上的值进行基本运算。当要结合不同单位的值时，calc()特别实用。它支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。加号和减号两边必须有空白

line-height、z-index、font-weight 无单位

css 变量： 变量名前面必须有两个连字符--，块内声明

使用 var(--xxx)

IE8+支持display: table,IE10+支持弹性盒子或者Flexbox，都默认支持等高列

给容器设置display: flex，它就变成了一个弹性容器（flex container），子元素默认等高

vertical-align声明只会影响行内元素或者table-cell元素

垂直居中指南

在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。其中一些技术会在后面的章节中介绍，可根据情况翻阅对应的内容寻找答案。❑ 可以用一个自然高度的容器吗？给容器加上相等的上下内边距让内容居中。❑ 容器需要指定高度或者避免使用内边距吗？对容器使用display: table-cell和vertical-align: middle。❑ 可以用Flexbox吗？ 如果不需要支持IE9，可以用Flexbox居中内容。参见第5章。❑ 容器里面的内容只有一行文字吗？设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。❑ 容器和内容的高度都知道吗？将内容绝对定位。参见第7章。（只有当前面提到的方法都无效时才推荐这种方式。）❑ 不知道内部元素的高度？用绝对定位结合变形（transform）。参见第15章的例子。（还是只有当前面提到的方法都无效时才推荐该方法。）还不确定的话，参考howtocenterincss网站。这个网站很不错，可以根据自己的场景填写几个选项，然后它会相应地生成垂直居中的代码