css3学习阶段总结-一一网

css3中常用知识点及常见问题

CSS在页面中的组成
- 首先是样式表
  - 样式表里包含规则
    - 规则里包含选择器+声明块
      - 声明块里包含声明
        
        声明里包含css属性+css属性值组成的键值对。
浏览器读取编译css选择器时是从右往左的顺序，因为可以有机会一次选中样式，就算不能一次选中也可以缩小范围。
css中的优先级不是选择器的优先级，是css声明的优先级。
学习css属性时首先要记住该属性的默认值和是否可以继承。
属性名不需要引号，属性值需要引号。
代码分析 #wrap li :nth-child(1):找到id为wrap底下的所有子元素，并且选中第一个子元素，并且这个子元素必须是<li>。
溢出显示省略号
- white-space：nowrap；
- overflow：hidden；
- text-overflow：ellipsis；（隐含条件是元素不能是被内容撑开的元素）
css全称：cascading style sheets
resize是css属性允许控制一个元素的可调整大小性。（一定要配合overflow:auto使用）默认值：
- none不可继承，元素不能被用户缩放。
- both,允许用户在水平和垂直方向上调整元素的大小。
- horizontal，允许用户在水平方向上调整元素的大小。
- vertical，允许用户在垂直方向上调整元素的大小。
当按照top和left作为参考时，坐标系是向右向下为正，相当于说正值往里收，负值往外扩；当按照bottom和right作为参考时，坐标系是向左向上为正，相当于是正值往外扩，负值往里收。
a.浮动提升半层，只有在浮动的情况下，才需要考虑元素分两层。定位元素提升一层（相对定位会在文档流里有残留）b.z-index为1怎么都会比a高；z-index为-1时怎么都会比a低。

css盒模型

倒影 -webkit-box-reflect不是css3里的是Google的，可设置图片的方向及与原图片的距离。
设置了box-sizing: border-box;的元素再设置padding以后，padding不会增加元素的大小，而是会往里挤内容区的空间。
盒模型阴影
- box-shadow，以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。默认值none不可继承，值：inset 默认阴影在边框外。使用inset后，阴影在边框内。offset-x，offset-y这是头两个length值，用来设置阴影偏移量。分别设置水平偏移量和垂直偏移量，可以设成负值。如果两者都是0，那么阴影位于元素后面。
- blur-radius值越大，模糊面积越大，阴影就越大越淡。不能为负值，默认为0.此时阴影边缘锐利。spread-radius取正值时，阴影扩大；取负值时，阴影收缩，默认为0，此时阴影与元素同样打。color：阴影颜色，如果没有指定，则由浏览器决定。
如果元素同时设置了border-radius，阴影也会有圆角效果，多个阴影时和多个text shadows规则相同。（第一个阴影在最上面）。
border-radius用来设置边框圆角，默认值为0不可继承，值：
- 固定的px值定义圆形半径或椭圆的半长轴，半短轴，不能用负值，
- 使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度，不能用负值。
- 这是一个简写属性，当设置一个值时，四个角一样，当设置两个值时，第一个值代表左上和右下，第二个值代表右上和左下。当设置三个值时，第一个值代表左上，第二个值代表右上和左下，第三个值代表右下。
border-image-source属性定义使用一张图片来代替边框样式，如果只为none，则仍然使用border-style定义的样式。默认值：none不可继承。
border-image-slice属性会通过规范将border-image-source的图片明确的分割为9个区域，四个角，四边以及中心区域。并可指定偏移量。
border-image-repeat定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平和垂直的边框。默认值：stretch 不可继承。值：stretch（拉伸），repeat，round（平铺）
border-image-width：定义图像边框宽度。默认值：1不可继承。
border-image-outset：属性定义边框图像可超出边框盒的大小。默认值：0 不可继承。只能正值：可超出边框盒的大小。

css背景

background-image属性用于为一个元素设置一个或多个背景图像，图像在绘制时，以z轴方向堆叠的方式进行，先指定的图像会在之后指定的图像上面进行绘制。注意：background-image-color会在image之下进行绘制，边框和内容会在image之上进行绘制。默认值：none。不可继承。
background-position：制定背景位置的初始位置。默认值：0% 0% 不可继承。值：百分比：参照尺寸为背景图片定位区域的大小减去背景图片的大小。
background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。默认值 scroll 不可继承。值：fixed此关键字表示背景相对于视口固定。即使一个元素有滚动机制，背景也不会随着元素的内容滚动。scroll此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动。
默认情况下背景图片是从padding box开始绘制，从border box开始剪裁。
background-origin设置背景渲染的起始位置。值：content-box，padding-box，border-box
background-clip设置背景剪裁位置。值：content-box，padding-box，border-box
-webkit-background-clip：text；可以只给文字设置背景。
background-size设置背景图片大小。默认值 auto auto不可继承。值：
- 百分比:指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为和模型的内容区与内边距。
- auto：以背景图片的比例缩放背景图片。注意：单值时，这个值指定图片的宽度，图片的高度隐式的为auto 。两个值：第一个值指定图片等宽度，第二个值指定图片的高度。

css基本选择器

选择器种类
1. 通配符选择器（*）
2. id选择器（#）
3. 类选择器（.）
4. 元素选择器（元素名）
5. 后代选择器（空格）
6. 选择器分组（，（结合符））
7. 相邻兄弟选择器（+），只会匹配紧跟着的兄弟元素。
8. 通用兄弟选择器（~），在使用~连接两个元素时，他会匹配第二个元素，条件是它必须跟（不一定紧跟）在第一个元素之后，且它们都有一个共同的元素。
9. 子元素选择器（直接后代选择器），与后代选择器的区别是此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。（使用时注意属性是否可继承）
10. 属性选择器（存在和值属性选择器）
  - [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
  - [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  - [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
11. 子串值属性选择器
  - [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
  - [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
  - [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
  - [attr*=val] : 选择attr属性的值中包含字符串val的元素。

css中的一些伪类

伪类和伪元素不存在于DOM树中，存在的目的是为了拿到元素的一些状态。
锚点在定义的时候需要注意link和visited要放在hover和active的前面，因为link和visited已经把<a>标签的所有状态全部涵盖住了，为了不让一些设置的状态失效，所以link和visited要放在hover和active的前面。link和visited只能在<a>标签身上起作用。它们叫锚点伪类也叫链接伪类。
链接伪类
- 注意:link，:visited，:target是作用于链接元素的！
- :link 表示作为超链接，并指向一个未访问的地址的所有锚
- :visited 表示作为超链接，并指向一个已访问的地址的所有锚
- :target 代表一个特殊的元素，它的id是URI的片段标识符
- 使用:target可以实现选项卡，步骤:
  1. 将<a>标签中的href属性值设置为选项卡的<div>的id。
  2. 设置<div>标签的display：none；，在:target中设置display：block；
动态伪类
- 注意:hover，:active基本可以作用于所有的元素！
- :hover 表示悬浮到元素上
- :active 表示匹配被用户激活的元素（点击按住时）
- 由于<a>标签的:link和:visited可以覆盖了所有<a>标签的状态，所以当:link，:visited，:hover，:active同时出现在<a>标签身上时 :link和:visited不能放在最后！！！
- 动态伪类和链接伪类可以选中一个DOM节点在DOM树以外的状态。
隐私与:visited选择器
- 只有下列的属性才能被应用到已访问链接：
  - color
  - background-color
  - border-color
表单相关伪类
- :enabled 匹配可编辑的表单
- :disable 匹配被禁用的表单
- :checked 匹配被选中的表单
- :focus 匹配获焦的表单
结构性伪类
- 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以元素为中心！！！例如一个父标签中有不同类型的子标签，但是子标签的class值都为一个值，那么调用这个值的nth-of-type（1）会给到不同类型的子标签的第一个元素，而不是父标签的第一个子标签。所以说只要父元素中的子元素类型不同，最好用nth-child。
- :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))
  - 注意：index可以是变量n（只能是n，0到正无穷）odd：奇数，even：偶数；
  - :empty(内容必须是空的，有空格都不行，有attr没关系)
- 给每个元素设置一个右边框，最后一个元素不要，可以采用:not伪类结合:last-of-type伪类进行操作。
伪元素
- 伪元素是DOM树以外的元素，靠css样式生成在页面中一个元素的不同类型伪元素只能有一个，设置多个相同类型的伪元素会被覆盖。
- 种类：
  - ::after 位于一个元素之后，不可选中
  - ::before 位于一个元素之前，不可选中
  - ::firstLetter 选中第一个
  - ::firstLine 选中第一行
  - ::selection 选中时改变选中的元素样式

自定义单选按钮

步骤：
1. 使用几个<input>标签，type=“radio”，name值相同。
2. 给每个<input>标签包含一个<label>标签，给<input>标签一个兄弟元素<span>元素（在页面中点击<span>元素时<input>标签也会被选中）
3. 给<label>设置样式，首先<label>设置浮动float：left；，因为<label>标签是内联元素，不能指定高宽，设置浮动以后变成块级元素，可以指定高宽。
4. 给<label>标签设置相对定位position：relative；，给<label>标签的子标签<input>标签设置绝对定位position:absolute;此时<input>标签的包含块是<label>标签。将<input>标签的left和top设置为负值，将<label>标签设置overflow:hidden；（这样就将<input>标签的单选按钮移出可见区域）。
5. 将<label>标签的子标签<span>设置绝对定位position：absolute；``left，top，right，bottom都设为0；此时<span>标签和<label>标签一样大小。
6. 使用<input>的伪类:checked再选中兄弟元素<span>(input:checked +span),在样式里设置相应的样式。

css中声明的优先级

选择器的特殊性
- 选择器的特殊性由选择器本身的组件确定，特殊性值表述为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）
- 重要声明
  - 有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明，并允许在这些声明的结束分号之前插入 !important 来标志必须要准确的放置 !important 否则声明无效。
  - !important 总是要放在声明的最后，即分号的前面
  - 标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
  - 实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
  - 非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
  - 如果一个重要声明与非重要声明冲突，胜出的总是重要声明
- 继承
  - 继承没有特殊性，甚至连0特殊性都没有
  - 0特殊性要比无特殊性来的强
- 来源
  - css样式的来源大致有三种
    - 创作人员
    - 读者
    - 用户代理
- 权重：
  - 读者的重要声明
  - 创作人员的重要声明
  - 创作人员的正常声明
  - 读者的正常声明
  - 用户代理的声明
- 层叠
  1. 找出所有相关的规则，这些规则都包含一个选择器
  2. 计算声明的优先级
    - 先按来源排序
    - 在按选择器的特殊性排序
    - 最终按顺序

css中字体，背景相关知识点

自定义字体@font-face允许网页开发者为其网页指定在线字体，通过这种作者自备字体的方式，@font-face可以消除对用户电脑字体的依赖。
font-family所指定的字体名字将会被用于font或font-family属性，src：字体资源。注意：不能在一个css选择器中定义@font-face，要在style中定义。
自定义字体图标步骤：
- 首先准备一个矢量图
- 将矢量图和不一样的字符一一绑定
- 通过工具或网站将矢量图和字符绑定起来的东西生成一套自定义字体
- 最终把这套字体去放到页面中去引用。
使用字体图标的时候，直接把要使用的元素的名字起成已经定义好的名字即可，前提是先把定义好的css样式表引入到要操作的页面中。如果想要改变字体图标的样式，最好在class中再起一个名字，然后去写这个名字的样式，而不要直接修改已定义好的名字的样式。
opacity不是一个继承属性，但是也会影响到子元素的透明度。
背景透明文字不透明，可以将背景设置为rgba的格式。
文字阴影 text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）值：color``（选择阴影的颜色），offset-x,offset-y（横向，纵向偏移量）,blur-radius（阴影模糊）
浮雕文字：
- 文字颜色为白色，
- text-shadow：black 1px 1px 1px;
文字模糊效果：
- 文字颜色为黑色，
- transition：1s；
- 给文字添加一个:hover伪类，
- color：rgba（0,0,0,0）；
- text-shadow：black 0 0 100px；
模糊背景：
1. 父元素div包含一个子元素div，给父元素设置高宽。
2. 让子元素和父元素的高宽相同，父元素的position：relative；子元素的position：absolute；left，top，bottom，right都为0；让子元素的层级z-index：-1；
3. 给子标签添加背景图片，为了图片可以适应高宽，background-size：100% 100%；4.让子标签模糊，filter：blur（xx px）；
文字描边 -webkit-text-stroke: 颜色，边的大小。
文字排版：direction：控制文字的方向，一定要配合unicode-bidi:bidi-override;

渐变相关知识

线性渐变(图片类型)：为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）。还要定义终止色。终止色就是你想让浏览器去平滑的过滚过去，并且必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。默认从上到下发生渐变
- 语法：linear-gradient（颜色，颜色，...）
- 改变渐变方向（top\buttom\left\right）：linear-gradient（to 结束的方向，颜色，颜色）
- 改变渐变角度：linear-gradient（角度，颜色，颜色）
- 颜色节点的分布（第一个不写为0%，最后一个不写为100%）:linear-gradient（颜色长度或者百分比，颜色长度或者百分比);
- 垂直渐变：repeating-linear-gradient
radial-gradient（）函数创建一个<image>,用来展示由原点（渐变中心）辐射开的颜色渐变。
- 默认均匀分布radial-gradient（颜色，颜色）。
- 不均匀分布 radial-gradient（颜色百分比，颜色百分比，...）。
- 改变渐变的形状radial-gradient（形状，颜色，颜色）（默认是椭圆ellipse，可选值circle）。
- 改变渐变形状的大小radial-gradient（要改变的大小形状，颜色，颜色）``closest-side最近边，farthest-side最远边，closest-comer最近角，farthest-comer最远角。
改变圆心 radial-gradient（要改变的大小形状 at px px，颜色，颜色）默认值最远角。

css动画

css transition提供了一种在更改css属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。
transition-property默认值为all，表示所有可被动画的属性都表现出过渡动画。可以指定多个property。
- 属性值：
  - none没有过度动画。
  - all所有可被动画的属性都表现出过渡动画。
  - IDENT属性名称（可以指定多个）
transition-duration属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为0s，表示不出现过渡动画。可以指定多个时长，每个时长都会被应用到由transition-prorerty指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复，如果时长列表更长，那么该列表会被裁减，两种情况下，属性列表都保持不变。属性值，以毫秒或秒为单位的数值。不接受负值，一定要加单位！
css属性受到transition的影响，会产生不断变化的中间值，而css transition-timing-function属性用来描述这个中间值是怎样计算的，实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。默认值：ease
- 可以规定多个timing function，通过使用transition-property属性，可以根据主列表的列表给每个css属性应用相应的timing function
  - 如果timing function的个数比主列中数量少，缺少的值被设置为初始值。
  - 如果timing function比主列更多，timing function函数列表会被截断至适合的大小，这两种情况下声明的css属性都是有效的。
- 属性值：
  - ease默认值，（加速然后减速）
  - linear（匀速）
  - ease-in（加速）
  - ease-out（减速）
  - ease-in-out（加速然后减速）
  - cubic-bezier:贝塞尔曲线。
  - step-start：等同于steps（1，start）
  - step-end：等同于steps（1，end）。
  - steps（步数，每一步的值发生变化的时间点默认是end）
transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。默认值0s。
- 可以指定多个延迟时间，每个延迟将会分别作用于所指定的相符合的css属性
  - 如果指定的时长个数小于属性个数，那么时长列表会重复，
  - 如果时长列表更长，那么该列表会被裁减。
  - 两种情况下，属性列表都保持不变。
- 属性值值以秒或毫秒为单位，表明动画过度效果将在何时开始，取值为正时会延迟一段时间来响应过渡效果，取值为负时会导致过渡立即开始。
当属性值的列表长度不一致时
- 超出的情况下是会被全部裁减的
- 不够的时候，
  - 关于时间的会重复列表，
  - transition-timing-function的时候使用的是默认值ease。
检测过渡是否完成，当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是transitionend，在webkit下是webkitTransitionEnd。（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）在transition完成前设置display：none，事件同样不会被触发。
transition在元素首次渲染还没有结束的情况下是不会被触发的。
transition简写属性，css过渡由简写属性transition定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。注意：在transition属性中，各个值的书写顺序是很重要的：
- 第一个可以解析为时间的值会被赋值给transition-duration，
- 第二个可以解析为时间的值会被赋值给transition-delay。
transform属性允许修改css视觉格式模型的坐标空间。transform属性只对block级元素生效。
- 可选值：
  - rotate（旋转角度）
  - translate（平移）
    - x方向平移：transform：translateX（距离）；
    - y方向平移：transform：translateY（距离）；
  - 二维平移transform：translate（距离，距离）如果距离没有指定，它的默认值为0.可设单值，也可设双值。正数表示xy轴正向位移，负数为反向位移，设单值表示只x轴位移，y轴坐标不变。
transform：skew，与translate差不多。
- 正值，拉正斜杠方向的两个角。
- 负值：拉反斜杠方向的两个角。
transform：scale（）
- 要缩小设0.01-0.99之间的值，
- 要放大设超过1的值。
- 正值：缩放的程度。
- 负值：不推荐使用（有旋转效果）
基点的变换transform-origin, css属性可以更改一个元素变形的基点。对平移不会产生影响。
矩阵（matrix）：
- 旋转matrix（cos θ，sinθ，-sinθ，cosθ，0,0）;
- 平移matrix（1,0,0,1，x,y）;
- 倾斜matrix（1,tanα,tanβ,1,0,0）;
变换组合的顺序不一样结果也会不一样，因为底层的原理是通过矩阵进行变换，矩阵的运算是不可逆的，不满足交换律。变换组合时计算方向是从右往左计算的。
在绝大部分变换样式切换时，如果变换函数的位置个数不相同也不会触发过渡。
过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态。
景深是指相机焦点前后相对清晰的成像范围。
- 简单理解就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好
- 在css3中，perspective用于激活一个3D空间，属性值就是景深大小。（默认none无景深）
- 应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响。（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）
- transform：perspective（depth） depth的默认值是none，可以设置为一个长度值，这个长度是沿着z轴距离坐标原点的距离。
- 1000px被认为是一个正常值，若使用perspective（）函数，那么它必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略。
一般来说写3d样式的元素要有一个包裹的元素称为“舞台”，景深要加在舞台上。
rotate3d（x,y,z,angle）x,y,z分别接受一个数值，用来计算矢量方向，矢量方向是三维空间中的一条线，从坐标系原点到x,y,z确定的那个点，元素围绕这条线旋转angle指定的值。
3D平移transform：translateZ（length）是3D Transform特有的，它不能使百分比值；那样的移动是没有意义的。transform：translate3d（translateX,translateY,translateZ）；
3D缩放transform：scaleZ(),transform：scale3d（scaleX,scaleY，scaleZ）;如果只设置scaleZ（），元素并没有被扩大或者压缩，scaleZ（）需要和translateZ（）配合使用，number乘以length得到的值，使元素沿z轴移动的距离，从而使得感觉被扩大或压缩。
景深：让3D场景有近大远小的效果（我们肉眼距离屏幕的距离），是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的）
景深的原理：景深越大，灭点越远，元素变形更小；景深越小，灭点越近，元素变形更大。
景深基点：用来控制基点的位置。perspective-origin默认值50%,50%参照于盒模型。
transform-style 营造层级的3d舞台。是一个不可继承属性，它作用于子元素。
景深叠加，尽量避免景深叠加问题。
backface-visibility属性用来设置是否显示元素的背面，默认是显示的。有两个值hidden和visible，默认值是visible。

动画内的属性

animation-name属性指定应用的一系列动画，每个名称代表一个动画序列。值：none（特殊关键字，表示无关键帧）。keyframename标识动画的字符串。
animation-duration指定一个动画周期的时长。默认值为0s，表示无动画，值无单位无效，注意，负值无效。
animation-timing-function动画的默认效果，由慢变快再变慢。
animation-direction定义了动画执行的方向。（一共有四个方向）值：reverse（反转）反转的也是关键帧和animation-timing-function

动画外的属性

animation-delay定义动画开始前等待的时间，以秒或毫秒为单位。

只作用于动画内的属性

animation-iteration-count定义了动画执行的次数（属于动画内的范畴）重复的是关键帧

元素在动画外的状态

animation-fill-mode，值backwards：from之前的状态与form的状态保持一致。forwards，通之后的状态与to的状态保持一致。both：backwards+forwards
animation-timing-function：作用于一个关键帧周期而非整个动画周期
animation-play-state定义了动画执行的运行和暂停。
关键帧语法： @keyframes animiationName{ keyframes-selector{ css-style } } animiationName必写项，定义动画的名称。keyframes-selector：必写项，动画持续时间的百分比。from：0% to ：100% css-style：css声明
关键帧控制的是动画的周期，animation-timing-function控制的是关键帧的每个周期。
一个元素分两面，但并不意味元素有厚度。在一个状态下，元素只能展现自己的一面

css3中的弹性盒子

css3中的弹性盒子分老版本（box）和新版本（flex），
flex不等同于浮动，同时老版本的flex和新版本的flex是有区别的
分清flex的容器和项目，项目永远在主轴的正方向上排列
容器的布局方向
- 老版本（box）-webkit-box-orient属性本质上确定了主轴是哪一个，值:horizontal（x轴），vertical（y轴）
- 新版本（flex）flex-direction属性本质上确定了主轴和侧轴分别是哪一个，值row（x轴），column（y轴）
容器的排列方向
- 老版本（box）-webkit-box-direction 控制主轴方向，值normal（正方向，默认），reverse（取反）
- 新版本（flex）flex-direction，值row-reverse（x轴取反），column-reverse（y轴取反）
富裕空间管理（主轴）
- 老版本（box）
  - start（富裕空间在右边（x轴），下边（y轴）） end（富裕空间在左边（x轴），上边（y轴）） center（富裕空间在两边） justify（富裕空间在项目之间）四个值
  - -webkit-box-pack不会给项目区分配空间，只是确定富裕空间的位置。
- 新版本（flex）
  - justify-content:flex-start（富裕空间在主轴的正方向）,flex-end（富裕空间在主轴的反方向）,center（富裕空间在两边）,space-between（富裕空间在项目之间）,space-around(box没有的，富裕空间在项目两边)
富裕空间管理（侧轴）
- 老版本（box）
  - start （富裕空间在上边) end（富裕空间在下边） center（富裕空间在两边），-webkit-box-align不会给项目区分配空间，只是确定富裕空间的位置
- 新版本（flex）
  - align-items，值stretch(box没有的，等高布局，不能有高度）,flex-start（富裕空间在侧轴的正方向）,flex-end（富裕空间在侧轴的反方向）,center（富裕空间在侧轴的两边）,baseline(box没有的，按基线对齐)，
弹性空间的管理：将主轴上的富裕空间按比例分配到各个项目的width/height上。-webkit-box-flex:1; 默认值：0不可继承。
控制侧轴的方向：flex-wrap属性控制了容器为单行/列还是多行/列，并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。值：nowrap(不换行)，wrap-reverse（换行）
控制多行多列时，富裕空间的管理，会把所有行，列看成一个整体。align-content属性定义弹性容器的侧轴方向上有额外空间时，如何排布局每一行/列，当弹性容器只有一行/列时无作用。默认值stretch不可继承。
flex-basis：伸缩规则计算的基准值（默认拿width或height的值）
order属性规定了弹性容器中的可伸缩项目在布局时的顺序，元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照他们在源代码中出现的顺序进行布局。
align-self会对其当前flex行中的flex元素，并覆盖align-items的值，如果任何flex元素的侧轴方向margin值设置为auto，则会忽略align-self。默认值auto，不可继承。
老版本-webkit-box-flex:弹性因子（默认值为0）
新版本flex-grow属性定义弹性盒子项（flex item）的拉伸因子。
可用空间=（容器大小-所有相邻项目flex-basis的总和）
可扩展空间=（可用空间/所有相邻项目flex-grow的总和）
每项伸缩大小=（伸缩基准值+（可扩展空间*flex-grow值））
flex-shrink起作用的前提是flex-wrap：nowrap；``flex-shrink的默认值是1.（收缩因子）
flex-shrink：每项flex收缩大小=伸展基准值-(收缩比例/收缩比例总和*溢出的空间) –>并不是
- 1.计算收缩因子与基准值乘的总和
  var a= 每一项flex-shrink*flex-basis之和
- 2.计算收缩因数，收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
  var b =(flex-shrink*flex-basis)/a
- 3.移出空间的计算移出空间=项目收缩因数*负溢出的空间
  var c = b*溢出的空间
侧轴富裕空间的管理
- 单行单列
  - align-items，align-self（优先级高）
- 多行多列
  - align-content
flex简写属性是一个语法糖，flex：1；表示flex-grow：1；flex-shrink：1；flex-basis：0%；

响应式布局核心

CSS3媒体查询选择器,语法：
@media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性 { //规则 }
媒体类型
- all 所有媒体（默认值）
- screen 彩色屏幕
- print 打印预览
- projection 手持设备
- tv 电视
- braille 盲文触觉设备
- embossed 盲文打印机
- speech “听觉”类似的媒体设备
- tty 不适用像素的设备
媒体属性
- width：浏览器的窗口尺寸
- device-width：设备尺寸
- device-pixel-ratio（必须加-webkit-前缀）：像素比
—以上三个媒体属性可加 min 和 max 前缀
- min：最小值为谁
- max：最大值为谁
横竖屏切换
- orientation：landscape（横屏）
- orientation：portrait （竖屏）
关键字
- only：处理浏览器兼容问题，防止老旧的浏览器，不支持带媒体属性的查询而应用到给定的样式。（让老版本的浏览器失效）
- @media only screen and (min-width:800px ){ 规则；规则 }
- @media screen and (min-width:800px ){ 规则；规则 }
- 在老款的浏览器下
  - @media only —> 因为没有only这种设备规则被忽略
  - @media screen —> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询
建议在每次抒写media query的时候带上only
- and：连接一条查询规则，连接媒体属性、连接媒体类型
  - 对于所有的连接选项都要匹配成功才能应用规则
- ,：连接多条查询规则，和and相似
  - 对于所有的连接选项只要匹配成功一个就能应用规则
- not：取反