这是我参与「第四届青训营」笔记创作活动的的第21天

1.选择器的特异度

判断哪条规则生效？

解释：

因为，在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。

在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 22。

因为，在 1 中的特异度为 122 大于在 2 中的特异度为 22 。所以，在 2 中的选择器的优先级更高。

2.CSS选择器的优先级顺序：

基本原则：一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越精确，它的优先级就越高。

复杂的计算方法：
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100表示ID选择器的优先级

3.CSS的布局（Layout）

块级元素vs行级元素

块级	行级
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用
生成块级盒子	生成行级盒子内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li等	span、em、strong、cite、code等
display：block	display：inline

4、Flex布局

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

任何一个元素都可以指定为flex布局。采用flex布局的元素被称作容器。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的一些属性：有六个常用属性设置在容器上，分别为：

flex-direction 属性设置容器主轴的方向

包含四个属性值：

row: 默认值，表示沿水平方向，由左到右。

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

.wrap{ flex-direction:row | row-reverse | column | column=reverse; }

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。

包含三个属性值：

nowrap：表示不换行

说明：设置的项目的宽度就失效了，强行在一行显示

wrap：正常换行，第一个位于第一行的第一个

wrap-reverse：向上换行，第一行位于下方

.wrap{ flex-wrap:nowrap | wrap | wrap-reverse; }

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

justify-content属性用于设置项目在容器中的对齐方式。

.wrap{ justify-content: flex-start | flex-end | center |space-between | space-around }

CSS|青训营笔记