css3学习阶段总结

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

CSS在页面中的组成css
- 首先是样式表
  - 样式表里包含规则
    - 规则里包含选择器+声明块
      - 声明块里包含声明
        
        声明里包含css属性+css属性值组成的键值对。
浏览器读取编译css选择器时是从右往左的顺序，由于能够有机会一次选中样式，就算不能一次选中也能够缩小范围。css3
css中的优先级不是选择器的优先级，是css声明的优先级。web
学习css属性时首先要记住该属性的默认值和是否能够继承。浏览器
属性名不须要引号，属性值须要引号。markdown
代码分析 #wrap li :nth-child(1):找到id为wrap底下的全部子元素，而且选中第一个子元素，而且这个子元素必须是<li>。ide
溢出显示省略号函数
- 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：取反

多列布局（分栏布局）

栏目宽度：column-width指定每一栏的宽度（这是多列布局的第一种分法）
栏目列数：column-count指定要多少栏（这是多列布局的第二种分法）
栏目距离：column-gap
栏目分割线：column-rule