CSS3主要内容

摘要：必须要准确的放置否则声明无效。倒影设置元素的倒影准确的来说不能算是的东西，但需要知道。默认值不可继承背景渐变渐变是在中新增加的图片类型使用渐变可以在两种颜色间制造出平滑的渐变效果用它代替图片，可以加快页面的载入时间减小带宽占用。

​ CSS3选择器规范地址： https://www.w3.org/TR/2011/RE...
​ CSS3最新选择器规范: https://www.w3.org/TR/selectors
​

!---问题---!

1.CSS的全称是什么？
Cascading Style Sheets

2.样式表的组成：
CSS选择器 + CSS声明块：（一个个CSS声明：属性名+属性值）

3.浏览器读取编译CSS的顺序？
CSS选择器的解析顺序：从右往左。这样做是为了减少无效匹配次数，从而匹配快、性能更优。

（1）通配符选择器：* {}

（2）元素选择器：body {}任何一个HTML元素

（3）类选择器：. .list {}

（4）ID选择器：# #list {}

（5）后代选择器：空格 .list li{}

（6）选择器的分组：用逗号,隔开各个选择器
h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符

基本选择器扩展

（7）子元素选择器：>，也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。
#wrap > .inner {color: pink;}

（8）相邻兄弟选择器：+，它只会匹配紧跟着的兄弟元素。
#wrap #first + .inner {color: #f00;}

（9）通用兄弟选择器：~，它会匹配所有的兄弟元素(不需要紧跟)。
#wrap #first ~ div { border: 1px solid;}

（1）存在 和 值 属性选择器
​[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
​[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
​[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
​
​（2）子串值属性选择器
​[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
​[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
​[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
​[attr*=val] : 选择attr属性的值中包含字符串val的元素。

（1）链接伪类： 注意:link，:visited，:target是作用于链接元素的！
​:link： 表示作为超链接，并指向一个未访问的地址的所有锚 。
​:visited：表示作为超链接，并指向一个已访问的地址的所有锚 。
​:target： 代表一个特殊的元素，它的id是URI的片段标识符 。

（2）动态伪类 : 注意:hover，:active基本可以作用于所有的元素！
​:hover : 表示悬浮到元素上。
​:active : 表示匹配被用户激活的元素（点击按住时）。
​由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

隐私与:visited选择器:只有下列的属性才能被应用到已访问链接：
​color
​background-color
​border-color

（3）表单相关伪类
​:enabled： 匹配可编辑的表单
​:disable： 匹配被禁用的表单
​:checked： 匹配被选中的表单
​:focus： 匹配获焦的表单

​
（4）结构性伪类
​index的值从1开始计数！！！！
​index可以为变量n(只能是n)
​index可以为even、 odd
​#wrap ele:nth-child(index)：表示匹配#wrap中第index的子元素 这个子元素必须是ele
​#wrap ele:nth-of-type(index)：表示匹配#wrap中第index的ele子元素
​除此之外:nth-child和:nth-of-type有一个很重要的区别！！:nth-of-type以元素为中心！！！
​

:nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:only-child(相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

:nth-of-type(index)系列

:first-of-type

:last-of-type

:nth-last-type(index)

:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not

:empty(内容必须是空的，有空格都不行，有attr没关系)

（5）伪元素

::after
::before
::firstLetter
::firstLine
::selection
​

（1）选择器的特殊性
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如0,0,0,0
一个选择器的具体特殊性如下确定：

1.对于选择器中给定的ID属性值，加 0,1,0,0

2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0

3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1

4.通配符选择器的特殊性为0,0,0,0

5.结合符对选择器特殊性没有一点贡献

6.内联声明的特殊性都是1,0,0,0

7.继承没有特殊性

特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)

选择器的特殊性最终都会授予给其对应的声明

如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意区分：id选择器和属性选择器
div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）

（2）重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明，并允许在这些声明的结束分号之前插入!important 来标志。

必须要准确的放置 !important 否则声明无效。

!important 总是要放在声明的最后，即分号的前面。

标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。

实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决。

非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决。

如果一个重要声明与非重要声明冲突，胜出的总是重要声明。

（3）继承

继承没有特殊性，甚至连0特殊性都没有。

0特殊性要比无特殊性来的强。

（4）来源

CSS样式的来源大致有三种：

创作人员

读者

用户代理

权重：

读者的重要声明

创作人员的重要声明

创作人员的正常声明

读者的正常声明

用户代理的声明

（5）层叠

1.找出所有相关的规则，这些规则都包含一个选择器。

2.计算声明的优先级

先按来源排序

再按选择器的特殊性排序

最终按顺序

@font-face：允许网页开发者为其网页指定在线字体。

通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖。

font-family：所指定的字体名字将会被用于font或font-family属性。

src：字体资源。

注意:不能在一个 CSS 选择器中定义@font-face。

（1）opacity

opacity属性指定了一个元素的透明度。

默认值：1.0 ，不可继承。

（2）新增颜色样式rgba

（3）文字阴影(text-shadow)

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）

默认值：none ，不可继承 。

（4）文字描边(-webkit-text-stroke)

只有webkit内核才支持：-webkit-text-stroke（准确的来说不能算是CSS3的东西，但需要知道）。

（5）文字排版

direction:控制文字的方向，一定要配合unicode-bidi:bidi-override;来使用。

text-overflow :确定如何向用户发出未显示的溢出内容信号。

它可以被剪切，

显示一个省略号（"..."）

（1）盒模型阴影box-shadow

box-shadow
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text-shadows 规则相同(第一个阴影在最上面)。

默认值: none ， 不可继承。

（2）倒影-webkit-box-reflect

-webkit-box-reflect 设置元素的倒影（准确的来说不能算是CSS3的东西，但需要知道）。

默认值:none，不可继承。

（3）resize

resize CSS 属性允许你控制一个元素的可调整大小性。
（一定要配合overflow：auto使用）

默认值：none， 不可继承。

（4）box-sizing

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。

默认值：content-box， 不可继承。

（1）圆角border-radius

border-radius

默认值：0， 不可继承。

（2）边框图片border-image

border-image： CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。

默认值： 不可继承

border-image-source: none

border-image-slice: 100%

border-image-width: 1

border-image-outset: none

border-image-repeat: stretc

（3）背景background

（4）渐变

CSS 渐变 是在 CSS3 Image Module 中新增加的图片类型；使用 CSS渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：

线性渐变 (linear)，通过 linear-gradient 函数定义

径向渐变 (radial)，通过 radial-gradient 函数定义.

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

弹性盒模型，分老版与新版：

老版本的我们通常称之为`box `  
新版本的我们通常称之为`flex`

主轴 与 侧轴

由`flex-direction`/`-webkit-box-orient`确定

有了新版本后，为什么还需要老版本？（新版本比老版本要强大的很多）

很多移动端浏览器内核版本都超低。  

（1）老版
容器设置display为webkit-box
（注意:项目永远是在主轴上排列的）

-webkit-box-orient属性本质上确定了主轴是哪一根

horizontal:x轴

vertical:y轴

（注意:项目永远是沿着主轴的正方向排列的）

-webkit-box-direction属性本质上改变了主轴的方向

-webkit-box-direction: normal;

-webkit-box-direction: reverse;

富裕空间的管理（主轴）

start

end

center

justify

-webkit-box-pack:start;
不会给项目区分配空间，只是确定富裕空间的位置

富裕空间的管理（侧轴）

start

end

center

-webkit-box-align:center;
不会给项目区分配空间，只是确定富裕空间的位置

弹性空间的管理：将富裕空间按比例分配到各个项目上

-webkit-box-flex: 1;

默认值:0 ， 不可继承

（2）新版

容器的布局方向

flex-direction: row;

flex-direction: column;

容器的排列方向

flex-direction:row-reverse;

flex-direction:column-reverse;

更强大的富裕空间的管理（主轴）

justify-content: flex-start;

flex-start

flex-end

center

space-between

space-around(box 没有的)

更强大的富裕空间的管理（侧轴）

align-items: stretch;

flex-start

flex-end

center

baseline(box 没有的)

stretch(box 没有的)

弹性空间的管理

flex-grow: 1

https://developer.mozilla.org...

CSS3媒体查询是响应式方案核心。

（1）媒体类型

all： 所有媒体

braille： 盲文触觉设备

embossed： 盲文打印机

print： 手持设备

projection： 打印预览

screen： 彩色屏幕

speech： “听觉”类似的媒体设备

tty： 不适用像素的设备

tv： 电视

（2）媒体特性（媒体属性）

width （可加max min前缀）

height （可加max min前缀）

min-width：分辨率宽度大于设置值的时候识别

max-width：分辨率宽度小于设置值的时候识别

device-width （可加max min前缀）

device-pixel-ratio：像素比（可加max min前缀，需要加webkit前缀）

orientation：portrait ：竖屏

orientation：landscape：横屏

（3）操作符、关键字

and： 连接媒体特性

连接媒体属性 、连接媒体类型

对于所有的连接选项都要匹配成功才能应用规则

or : 和and相似

对于所有的连接选项只要匹配成功一个就能应用规则

not： 排除指定媒体类型

only： 指定某种特定的媒体类型

防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式。

@media only screen and (min-width:800px ){
        规则；
        规则
}

@media  screen and (min-width:800px ){

        规则；
        规则
}

在老款的浏览器下

@media only ---> 因为没有only这种设备，规则被忽略。

@media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询。

建议在每次书写media query的时候带上only。

（1）栏目宽度

column-width指定每一栏的宽度（这是多列布局的第一种分法）

（2）栏目列数

column-count指定要多少栏（这是多列布局的第二种分法）

（3）栏目距离

column-gap

（4）栏目间隔线

column-rule