CSS3
1. 复杂选择器
1.1 兄弟选择器
- 相邻兄弟选择器
匹配指定元素的相邻兄弟元素，使用+作为结合符(只有后面的兄弟元素) - 通用兄弟选择器
匹配元素后面所有兄弟元素，使用~作为结合符(后面所有兄弟元素)
1.2 属性选择器
属性选择器能够将元素附带的属性用于选择器中，对带有指定属性的元素设置样式；
| 示例 | 匹配 |
|---|---|
| [attr] | 匹配页面中所有附带attr属性的元素，可以是id或class等 |
| elem[attr] | 匹配附带attr属性的elem元素 |
| p[id][class] | 附带id属性和class属性的p元素 |
| p[id=“summary”] | 附带id属性的值为summary的p元素 |
| p[class~=“myClass”] | class属性中包含指定单词的p元素：class属性的值是以空格隔开的单词列表，myClass是单词列表中的一个单词 |
| p[class^=“b”] | class属性值以"b"开头的所有p元素 |
| p[class*=“b”] | class属性值中包含子串"b"的所有p元素 |
| p[class$=“b”] | class属性值以"b"结尾的所有p元素 |
1.3 伪类选择器
- 目标伪类
:target，用于选取当前活动的锚点元素对应的链接URL
E:target选择匹配E的所有元素，且匹配元素被URL指向 - 结构伪类
:first-child：匹配属于指定元素的父元素的首个子元素；(先查看首个子元素，再判断元素类型，而不是出现的第一个指定元素)
:last-child：匹配属于父元素的最后一个子元素；
:nth-child(i)：匹配属于指定标签的父元素的第i个子元素
:empty：匹配没有子元素(包括文本节点)的每个元素
:only-child：匹配属于其父元素的唯一子元素 - 否定伪类
:not()，匹配非指定元素/选择器的每个元素
input:not([type=“text”])
1.4 伪元素选择器
- ::first-letter(可以单或双冒号)
用于选择指定选择器的首字母，常用于排版细节，首字母突出显示/下沉 - ::first-line(可以单或双冒号)
用于选取指定选择器的首行，如果和首字符冲突优先使用首字符样式 - ::selection
匹配被用户选取的部分，只能修改文本颜色和背景颜色
2. 内容生成
使用CSS动态地指定元素插入内容
2.1 伪元素:before和:after(单双引号都支持)
可以将内容添加到选择器定义的单个或者多个元素每一个实例之前或者之后，以实现为文档添加内容的效果
2.2 内容content
content属性与:before和:after伪元素配合使用来插入生成内容。常用取值：
url：图像；字符串：纯文本；计数器#
2.3 内容生成解决问题
- 子元素外边距溢出
在父元素的第一个子元素位置添加空的表格：:before{content:""; display:table} - 高度坍塌
在父元素最后一个子元素位置设置消除浮动的影响：:after{content:""; display:block; clear:both;}
3. 弹性布局
3.1 弹性布局
弹性布局Flexible Box用来为框模型解决元素中子元素的布局方式，为布局提供最大灵活性。
属性：display
值：flex/inline-flex
任何容器都可以指定为Flex布局，设为flex布局子元素的float、clear和vertical-align属性将失效，但允许修改尺寸；容器的对齐方式text-align失效；
Chrome和Safari浏览器要加-webkit-前缀
采用flex布局的元素称为Flex容器(container)，所有子元素自动成为容器成员——Flex项目(Item)，简称容器和项目。
主轴：项目排列的方向；交叉轴：与主轴方向垂直相交的轴；
3.2 容器属性
- flex-direction
作用：决定项目排列方向(主轴方向)
取值：
row：主轴为水平方向，起点在左端，默认值
row-reverse：主轴水平方向，起点在右端
column：交叉轴，起点在上端
column-reverse：主轴为交叉轴，起点在底端 - flex-wrap
作用：默认项目派在一条线上(轴线)。属性定义如果一条轴线排不下该如何换行
取值：
norwrap：默认值，不换行，项目自动缩小
wrap：换行，第一行在上方
wrap-reverse：换行并反转，即第一行在下方 - flex-flow
flex-direction和flex-wrap的缩写形式
取值：
row nowrap：默认值
flex-direction flex-wrap：分别是各自的对应值 - justify-content
属性定义项目在主轴上对齐方式
取值：
flex-start主轴起点对齐
flex-end主轴终点对齐
center在主轴居中对齐
space-between两端对齐，项目之间间隔相等
space-around项目两侧间隔相等，所以项目之间间隔比项目与边框的间隔大一倍 - align-items
属性定义项目在交叉轴上如何对齐
取值：
flex-start交叉轴起点对齐
flex-end交叉轴终点对齐
center交叉轴中间对齐
baseline交叉轴的基线对齐
stretch默认值，项目未设置高度或为auto，占满整个容器高度 - align-content
属性定义多根轴线对齐方式，项目只有一根轴线则不起作用。
取值：
flex-start与交叉轴起点对齐
flex-end与交叉轴终点对齐
center与交叉轴中间对齐
space-between与交叉轴两端对齐，轴线之间间隔平均分布
space-around每个轴线两侧间隔相等，所以轴线之间间隔比轴线边框间隔大一倍
stretch默认值，轴线占满整个交叉轴
3.3 项目属性
只能设置一个项目，不影响容器及其他项目
- order
定义项目排列顺序，整数值越小排列越靠前，默认为0 - flex-grow
定义项目放大比例，默认为0，如果存在剩余空间也不放大，取值整数数字；
如果所有项目flex-grow都为1，等分剩余空间；项目属性值为2，其他为1，则占据的剩余空间比其他多1倍 - flex-shrink
定义缩小比例，默认为1，空间不足时项目等比缩小，取值数字
如果flex-shrink属性为0，其他项目为1，空间不足时前者不缩小 - flex-basis
定义在分配多余空间之前，项目占据的主轴空间main axsis，浏览器根据这个属性计算主轴是否有多余空间。取值：
auto：默认值，项目本来大小
length：自定义大小，定义跟width和height属性值一样，则项目占据固定空间 - flex
该属性是flex-grow，flex-shrink和flex-basis的简写，默认为0 1 auto，取值：
auto，1 1 auto
none， 0 0 auto
<flex-grow>[,<flex-shrink>,<flex-basis>] - align-self
允许定义单个项目与其他项目不同的对齐方式，可覆盖align-items属性。默认为auto，表示继承父元素的align-items属性，没有父元素则等同于stretch。取值：
auto继承父元素的align-items
flex-start在交叉轴的起点对齐
flex-end在交叉轴的终点对齐
center在交叉轴的中心对齐
baseline在交叉轴的基线对齐
stretch未设置尺寸则在交叉轴上沾满所有空间
4. CSS Hack
4.1 标准模式和混杂模式
浏览器运行模式分为：
混杂模式Quirks Mode
标准模式Standard Mode
准标准模式Almost Standard Mode
不同模式浏览器对CSS(尤其是盒模型)和JS解析效果不同；浏览器会根据DOCTYPE自动进行模式选择；不声明DOCTYPE会触发混杂模式
4.2 定义
浏览器类型和版本不同会造成CSS效果不同，需要针对不同浏览器编写不同的CSS以实现浏览器兼容或为不同版本的浏览器定制编写不同的CSS效果的过程就叫CSS hack
4.3 浏览器兼容性
根据不同浏览器对CSS的支持及解析效果；
margin和padding
…
4.4 CSS Hack原理
主要由CSS内部Hack、选择器Hack、HTML头部引用Hack
- CSS类内部Hack
属性前缀：在CSS样式属性名前加上只有特定浏览器才能识别的hack前缀
… - 选择器Hack
… - HTML头部引用Hack