css杂碎（flex，CSS有效单位，CSS的优先级）

flex

flex用于合并指定flex-grow和flex-shrink和flex-basis属性，默认值为0 1 auto。

• flex-grow：flex-grow将剩余空间按比例扩展。即当容器空间大于内部元素空间之和时，剩余部分将根据各元素指定的flex-grow按比例分配，使各元素增大。默认值为0，表示剩余空间不分配。
• flex-shrink：flex-shrink将溢出空间按比例收缩。即当容器空间小于内部元素空间之和时，溢出部分将根据各元素指定的flex-shrink按比例分配，使各元素缩小。默认值为1，表示溢出时等比例缩小。
• flex-basis：flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

CSS中有效的单位

相对单位：px/em/rem/ex/%
绝对单位：cm/pt/in/pc/mm

• px：相对长度单位。像素是相对于显示器屏幕分辨率而言的。譬如，WINDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
• em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
• rem：相对长度单位，相对的是根字体的大小。
• ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
• pt：绝对长度单位。点（Point）。

1in = 2.54cm = 25.4 mm = 72pt = 6pc

• pc：绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。

1in = 2.54cm = 25.4 mm = 72pt = 6pc

• in：绝对长度单位。英寸（Inch）。

1in = 2.54cm = 25.4 mm = 72pt = 6pc

• mm：绝对长度单位。毫米（Millimeter）。

1in = 2.54cm = 25.4 mm = 72pt = 6pc

• cm：绝对长度单位。厘米（Centimeter）。

1in = 2.54cm = 25.4 mm = 72pt = 6pc

CSS的优先级

1.标签选择器(如：body,div,p,ul,li)

2.类选择器(如：class="head",class="head_logo")

3.ID选择器(如：id="name",id="name_txt")

4.全局选择器(如：*号)

5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如：div p,注意两选择器用空格键分开)

9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

11.子选择器 (如：div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

参考文章

CSS3 flex盒子语法介绍
CSS里面的长度单位px/pt/em/in/pc/mm/cm解释
CSS三大特性—— 继承、 优先级和层叠