选择器

元素选择器

语法格式：标签名

类选择器

语法格式：”.” + 类名

ID选择器

语法格式：”#” + id名

通用选择器

通用选择（*）选择所有元素

属性选择器

存在和值

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

子串值

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串）。

伪类

语法格式：以冒号(:)作为前缀，被添加到一个选择器末尾的关键字。

选择的是元素的某个状态。

以一个<a>标签为例子：

/*一个被访问后的链接所呈现的*/
a:visited{}

/*鼠标悬停时所呈现的*/
a:hover{}

/*点击时所呈现的*/
a:active{}

/*点击后瞬间所呈现的*/
a:focus

伪元素

语法格式：以双冒号(::)作为前缀，被添加到一个选择器末尾的关键字。

选择某个元素的某个部分。

举个例子：

1	<p class="fake-text">这是伪元素After</p>

css代码：

.fake-text::after{
    content: "<- after在这里！";
    color: green;
}

组合器和选择器组

名称	组合器	选择
选择器组	A,B	匹配满足A（和/或）B的任意元素（参见下方同一规则集上的多个选择器）.
后代选择器	A B	匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器	A > B	匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器	A + B	匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器	A ~ B	匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

值和单位

颜色

表示方法有

关键词: red…
十六进制值: #ff0000
RGB: 函数rgb()有三个参数——红色，绿色和蓝色通道的颜色值
HSL: hsl()同样三个三个参数——色调、饱和度以及明度
RGBA 和 HSLA: 和上面的两个基本相同，多了一个参数表示透明度，0是完全透明的,1是完全不透明的。
Opacity：不透明度，值取0~1。0是完全透明的,1是完全不透明的。

层叠和继承

层叠

当一个元素被多个选择器指定的时候，层叠决定了它将表现哪个选择器的样式。什么选择器在层叠中胜出取决于三个因素。

专用性
重要性
源代码次序

专用性

专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

重要性

!important 可以让一条规则总是优先于其他规则。

不过这会使代码难以维护。

源代码次序

同级专用性的情况下会使用最后出现的选择器。

框模型中有意思的应用

背景剪裁（background-clip）

background-clip 设置元素的背景（背景图片或颜色）延伸的区域。

可用值：

border-box：背景延伸到边框外沿（border的范围）。
padding-box：边框下面没有背景，即背景延伸到内边距外沿（padding的范围）。
content-box：背景裁剪到内容区外沿。（width，height的范围）
text：背景被裁剪为文字的前景色。

CSS 框类型

可以通过设置display属性来设定元素的框类型。其中有三个值得注意。

块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框（ block box）
行内框（ inline box）与块框是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
行内块状框（inline-block box）像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）

改变盒模型

一个盒子的总宽度是它的width， padding-right，padding-left，border-right和border-left属性之和。但有时，我们想直接要个总宽度为某值的盒子，这样就会比较麻烦，因为要计算边框和内边距。

为解决这个问题，可以使用box-sizing来调整盒模型。用值 border-box，它将盒模型的总宽度变为width，总高度变为height。
改变之后，content的宽就变成了 (width - padding-right - padding-left - border-right - border-left)，高度同理。

边界

边界半径

通过 border-radius 属性，可以让盒子有个好看的圆角。

当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

引用于MDN Web docs

该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性，这四个属性分别对应了边框的四个角。

表示半径的方法有两种：

length：定义圆形半径或椭圆的半长轴，半短轴。负值无效。
percentage：使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

边界图像

除了引用线条，边界还可以引用图片。

border-image-slice可将图片切片，border-image-repeat用来将切片好的图像重复。

字体

字体栈

由于无法保证你想在你的网页上使用的字体的可用性 , 你可以提供一个字体栈，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成：

1
2
3

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

字体阴影

使用 text-shadow属性使文本应用阴影。

1	text-shadow: 4px 4px 5px red;

有四个取值：

color:可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。

offset-x offset-y:必选。这些长度值指定阴影相对文字的偏移量。offset-x 指定水平偏移量，若是负值则阴影位于文字左边。 offset-y 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方。

blur-radius：可选。这是 length 值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡

多重阴影

可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

当给出多个阴影时，阴影从前到后应用，第一个指定的阴影位于顶部。

布局

表格的布局

两个重要的属性：table-layout、border-collapse。

table-layout有两个取值：

auto：大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
fixed：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

border-collapse可以决定表格的边框是分开的还是合并的，同样也有两个取值：

separate：关键字，用于使用分隔的边框来绘制表格，是默认值。
关键字，用于使用合并的边框来绘制表格。

在绘表使结合使用这两个属性，可以让布局变得容易控制。

弹性盒子

过去在网页布局中用得最多的有floats 和 positioning。它们是既可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。

以下简单的布局要求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：

在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

而使用弹性盒子技术就可以轻松做到。

floats VS flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ex-box {
            color: white;
            margin: 10px 15%;
            background-color: hotpink;
            max-width: 1000px;
            padding: 5px;
            justify-content:space-around;
        }
        #ex-box div{
            margin: 5px;
            background-color: deepskyblue;
            width: 300px;
            height: 140px;
        }
    </style>
</head>
<body>
<div id="ex-box">
    <div>DIV1</div>
    <div>DIV2</div>
    <div>DIV3</div>
    <div>DIV4</div>
    <div>DIV5</div>
    <div>DIV6</div>
    <div>DIV7</div>
    <div>DIV8</div>
    <div>DIV9</div>
</div>
</body>
</html>

使用以上代码做出这样的布局：

如果使用floats，添加代码#ex-box div{floats:left}后，还需要闭合浮动，这不仅增加了代码量，还容易改变了盒模型，非常麻烦。

而如果用flex的话，只需添加代码：

#ex-box {
    display: flex;
    flex-wrap: wrap;
}

display: flex让#ex-box的子代全部变成弹性盒子。
flex-wrap: wrap让盒子溢出时换行。

在变成弹性盒子后，一些布局也会变得非常简单。

flex 模型

当元素表现为 flex 框时，它们沿着两个轴来布局：

引用于MDN Web docs

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）。

我们可以通过设置 flex-direction 属性，来改变flex 项的排列顺序。

flex-direction 的默认值是 row ，也就是按你浏览器的默认语言方向排成一排。

此外可使用的值还有 row-reverse 和 column-reverse ，她们分别可以让 flex 项按主轴、交叉轴逆排。

水平和垂直对齐

控制 flex 项的对齐方式有两个属性，align-items 和 justify-content。

align-items 控制 flex 项在交叉轴上（垂直）的位置。

默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
使用的 center 值会使这些 flex 项保持其原有的高度，但是会在交叉轴居中。
flex-start元素向侧轴起点对齐。
flex-end元素向侧轴终点对齐。
查看 align-items 了解更多。

justify-content 控制 flex 项在主轴（水平）上的位置。

默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
你也可以用 flex-end 来让 flex 项到结尾处。
center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
space-around 会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

定位

可以通过指定 position 属性为以下值之一，来设置其位置。

static（静态定位）

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative（相对定位）

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed（固定定位）

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

absolute（绝对定位）

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

sticky（粘性定位）

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

1	#one { position: sticky; top: 10px; }