自学web前端笔记小结---CSS3

CSS3笔记
CSS3选择器规范地址：
问题：
1.CSS:cascading style sheets（层叠样式表） 面试常问
2.样式表及组成关系：由一条条规则（选择器+声明块）组成 笔试常考
声明：CSS属性+CSS属性值组成的键值对
3.浏览器读取编译CSS的顺序：从右往左 eg.div ul li .test{ }
为什么？有机会一次选中目标元素（算法复杂度低）
4.选择器
1)基本选择器及其扩展
* . # 后代 组合（#test.pink）

（子元素） +（相邻兄弟） ~（通用兄弟） 分组（，结合符）
注意：子元素（又叫直接后代）与后代选择器的区别：
子元素：只能选择儿子
后代：所有子孙元素
2)属性选择器
存在与值 属性选择器
[attr] [attr=”val”] attr~=”val”
子串值 属性选择器
^（托字符：表示以val开头的元素）
$（以val结尾的元素）
*（包含val的元素）
|(val val- ：表示属性值只能是val或者以val-开头的元素)
3)伪类与伪元素选择器
链接伪类
:link :visited :target(css实现选项卡)面试题：用CSS实现选项卡？ 只能在超链接 上使用
动态伪类
:hover :active(lvha)
表单伪类
:disabled（表示被禁用的表单） :enabled :checked(面试题：自定义单选按钮) :focus（匹配获焦的表单）
结构性伪类（重点）
Index的值从1开始！！！
ele:nth-child(index)
eg./*#wrap ele:nth-child(1)
找到#warp底下的所有子元素,并且选中第一个子元素,并且这个子元素必须是ele*/
ele:nth-of-type(index) 以元素为中心

            区别：
                1.nth-child找到第index个子元素  这个子元素必须满足ele的规则
                  nth-of-type找到底index个ele子元素
                2.nth-of-type以元素为中心
            注意：
                index可以是变量n（只能是n  0到正无穷）
                        odd：奇数
                        even：偶数 

not:除了某个元素
eg.div > a:not(:last-of-type)
empty:
伪元素
::after
::before

5.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.继承没有特殊性
总结：特殊性值大小（优先级）顺序：
内联声明>ID>类>伪元素>通配符

重要声明（没有特殊的特殊性值）
分号前+ ！Important来标志
来源
css样式的来源大致有三种
创作人员
读者
用户代理

        权重：
           读者的重要声明
           创作人员的重要声明
           创作人员的正常声明
           读者的正常声明
           用户代理的声明

层叠（优先级）

            先按来源进行刷选（读者？创作者？用户代理？）
            如果来源相同，按选择器的特殊性继续刷选
            选择器的特殊性如果相同，按顺序继续刷选

6.自定义字体
@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖
font-family
所指定的字体名字将会被用于font或font-family属性
src
字体资源
注意:
不能在一个 CSS 选择器中定义 @font-face
7.字体图标
常用工具：AI（可以生成矢量图） fontlab studio（生成自定义字体）一般与ui做
站点：字体兼容处理网站
https://www.fontsquirrel.com/tools/webfont-generator
icomoon字体图标（更专业，推荐使用）
https://icomoon.io/#home
阿里巴巴字体矢量图标库
基本思路：
–设计一套矢量图
–将不同的矢量图绑定到不同的字符上生成自定义字体
—一般通过工具或者站点来处理
–在页面中运用
好处：
不失真，可以降低网络的负担，更易于开发者操作
8.新增UI样式
1）文本新增样式
Opacity：属性指定了一个元素的透明度
新增颜色模式：rgba
可以用来设置背景透明文字不透明
1.1）文字阴影
text-shadow：用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。
可选值：
（可选） （必选） （值越大，模糊半径越大）
Eg.浮雕文字：color: white;
text-shadow: black 1px 1px 100px;
文字模糊：h1:hover{
color: rgba(0,0,0,0);
text-shadow: black 0 0 200px;
1.2）文字描边
只有webkit内核才支持：-webkit-text-stroke（准确的来说不能算是css3的东西，但需要大家知道）
1.3）文字排版
direction:控制文字的方向 ltr , rtl
一定要配合unicode-bidi:bidi-override;来使用

text-overflow :确定如何向用户发出未显示的溢出内容信号。
它可以被剪切，
显示一个省略号（’…’）
面试：怎样实现溢出显示省略号（常考）
white-space: nowrap;/取消溢出换行/
overflow: hidden;/截去（隐藏）溢出/
text-overflow: ellipsis;/溢出显示省略号/
注意:隐性条件：元素不能靠内容撑开（即应为block类元素）
2）盒模型新增样式
小结：
常考（必须掌握！！！！！）
盒模型居中方式：
已知高宽：
1.position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;/必须指定宽高/
注：包含块一定得是容器。（绝对定位盒模型的特性：可以在面试时提及）
Left（0）+right（0）+w+p（0）+m = 包含块的宽度
top+bottom+h+p+m = 包含块的高度
2.width: 100px;/必须指定宽高/
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
3.width: 100px;/必须指定宽高/
height: 100px;
position:absolute;
left:50%;
top:50%
transform:tranlate3d(-50%,-50%,0);
4.Flex
未知高宽：
1.
position：absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);百分比参照于自身的宽高*/
2.
flex
img元素如何元素垂直水平居中
1.基线

补充：关于百分比参照问题（记忆）
/top,height 百分比参照与包含块的高度/
/left,margin,padding,width 百分比参照与包含块的宽度/
/translate(-50%,-50%) 百分比参照于自身的宽高/
/background-position 百分比参照于（图片区域-图片的位图像素值）/
图片水平垂直居中方式：
思路：1.用图片将body撑开
html,body{
height: 100%;
}
2.垂直居中：
body:after{/body最后子元素的底部/
content: “”;
display: inline-block;
height: 100%;
vertical-align: middle;
}
img{
vertical-align: middle;
}
5.水平居中
body{
text-align: center;
}

2.1)盒模型阴影
box-shadow：
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。
可选值：
Inset（与文本不同）
默认阴影在边框外。
使用inset后，阴影在边框内。


这是第三个 值。值越大，模糊面积越大，阴影就越大越淡。
不能为负值。默认为0，此时阴影边缘锐利。

这是第四个 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。

阴影颜色，如果没有指定，则由浏览器决定
eg.box-shadow: -10px -10px 10px 0px black , 20px 20px 10px -10px deeppink;
2.2）倒影
-webkit-box-reflect ： 设置元素的倒影（准确的来说不能算是css3的东西，但需要大家知道）
Eg.-webkit-box-reflect:left 10px;
2.3)resize
resize CSS 属性允许你控制一个元素的可调整大小性。
（一定要配合overflow：auto使用）
2.4)box-sizing（必须掌握）
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。
box-sizing: border-box /width 和 height 属性包括内容，内边距和边框，但不包括外边距。/
box-sizing: content-box /width 与 height 只包括内容的宽和高， 不包括边框（border），/
3)新增UI样式
3.1)圆角（必须掌握）
CSS3圆角的优点：
* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。
　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。
　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况
值:可以是px或百分比值（注意百分比值在在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。）

扩展：
层级
a.浮动提升半层，只有在浮动的情况下，才需要考虑元素分两层
定位元素提一层
相对定位会在文档流你有残留
b.z-index为1怎么都会比a高;z-index为-1怎么都会比a低
页面初始化：禁止系统默认滚动条，将滚动条加给wrap
系统滚动条会不会影响初始包含块的位置？
会
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
border: 1px solid deeppink;
overflow: auto;
}
解决ie6下固定定位失效的问题：用绝对定位模拟固定定位（移动端常用）
思路：1.将滚动条加到wrap（即非初始包含块上）：禁止系统默认滚动条
2.将滚动条作用在最外层的包裹器上或者在body上
3.发现采用了绝对定位的元素随着滚动条的滑动位置不会改变
因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置
所以一个按照初始包含块定位的元素就不会产生移动#pink{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: pink;}
本质：滑动滚动条，初始包含块位置不变

3.2）边框图片
border-image-source 属性定义使用一张图片来代替边框样式；如果只为none，则仍然使用border-style 定义的样式。
border-image-slice 属性会通过规范将 border-image-source 的图片明确的分割为9个区域：四个角，四边以及中心区域。默认值100%
border-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。值： stretch （拉伸）默认值
repeat，round（平铺）
border-image-width 定义图像边框宽度。
border-image-outset属性定义边框图像可超出边框盒的大小
只能是正值： 可超出边框盒的大小
3.3）背景（必须掌握！）
CSS2（注意CSS2、CSS3不是版本。而是级别）
background-color 会设置元素的背景色 默认值：transparent
平铺整个border-box
background-image属性用于为一个元素设置一个或多个背景图像，图像在绘制时，以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。
默认情况下背景图片是从padding-box开始绘制，从border-box开始剪裁
background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。控制平铺与否
background-position:指定背景位置的初始位置 默认值：0% 0% 不可继承
值：百分比：参照尺寸为背景图片定位区域的大小减去背景图片的大小
px
background-attachment：决定背景是在视口中固定的还是随包含它的区块滚动的。
scroll：默认值，背景图不会随着元素滚动条的滚动而滚动
fixed：背景图铺在视口中固定定位了

CSS3
background-origin：设置背景的渲染的起始位置
border-box
padding-box
content-box
background-clip:设置背景裁剪位置
-webkit-background-clip:text;/剪去文字外的所有图片/
background-size 设置背景图片大小
值：
百分比： 指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距
auto： 以背景图片的比例缩放背景图片。（默认值：auto auto）
注意：
单值时，这个值指定图片的宽度，图片的高度隐式的为auto（自适应）
两个值: 第一个值指定图片的宽度，第二个值指定图片的高度
background：
background 是CSS简写属性，用来集中设置各种背景属性。background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment。
4）渐变
渐变是图片
4.1）线性渐变
-默认从上到下发生渐变
linear-gradient(red,blue);

-改变渐变方向：（top bottom left right）
linear-gradient(to 结束的方向,red,blue);

-使用角度
linear-gradient(角度,red,blue);
Eg.90deg:90度
-颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
-重复渐变
repeating-linear-gradient(60deg,red 0,blue 30%);
应用：发廊灯、光斑动画
4.2）径向渐变
radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变

重点

1.过渡
transition-property:指定应用过渡属性的名称
transition-duration:属性以秒或毫秒为单位指定过渡动画所需的时间。
如果指定的时长个数小于属性个数，那么时长列表会重复
不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)！（面试提及！）
transition-delay:属性规定了在过渡效果开始作用之前需要等待的时间。
默认值是0s
transition-timing-function:CSS属性受到 transition的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。
如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease）
属性值：
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 贝塞尔曲线
7、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(,[,[start|end]]?)
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）
过渡的简写属性：
CSS 过渡 由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间
注意：
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay。如果只写一个，会赋给周期，延迟使用默认值0s.

检查过渡是否完成：
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）
注：该触发事件是属性事件，绑定了几个属性就会触发几个事件
但是，在transition完成前设置 display: none，事件同样不会被触发
过渡的天坑:
1.过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态
1.浏览器渲染机制和JS代码解析速度差：
Transition在元素首次渲染还没有结束的情况下是不会被触发的
Window.onload()是在元素渲染结束之后触发的
2.在绝大部分变换样式切换中，如果变换函数的位置、个数不相同，也不会触发过渡

总结：1.当属性值的列表长度不一致时
超出的情况下是会被全部截掉的
不够的时候，关于时间的会重复列表，transition-timing-function的时候使用的是默认值ease
2.面试的时候尤其注意要重点介绍容易出错的坑！！！！
3.改变前端编程思想，不是所见即所得、过程式的，而应该注意读取JS代码的速度是快于浏览器渲染样式的速度的（异步模式：做前端一定要有异步概念！）。代码行写在前面和后面有时效果是一样的

过渡（每天看）
transition-property
指定过渡动画的属性（并不是所有的属性都可以动画）
transition-duration
指定过渡动画的时间（0也要带单位）
transition-timing-function
指定过渡动画的形式（贝塞尔）
transition-delay
指定过渡动画的延迟
transition
第一个可以被解析成时间的值会赋给transition-duration
transtionend事件（DOM2）
在每个属性完成过渡时都会触发这个事件
当属性值的列表长度不一致时
跟时间有关的重复列表
transition-timing-function使用默认值

2.变形（变换）
1）2D变形（transform）
transform 属性允许你修改CSS视觉格式模型的坐标空间
transform 属性 , 只对 block 级元素生效！
属性：旋转（rotate）
transform:rotate(angle);
正值:顺时针旋转 rotate(360deg)
负值:逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
平移（translate）
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0
可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
例如transform: translate(100px);等价于transform: translate(100px,0);
倾斜（skew）
transform:skewX(45deg);
X方向倾斜:transform: skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜:transform: skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
二维倾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y轴上没有倾斜
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度 第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0);
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变

正值:拉正斜杠方向的两个角，负值:拉反斜杠方向的两个角
缩放（scale）
transform:scale(2);//表示相对原来放大2倍
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)
基点的变换
transform-origin
transform-origin CSS属性让你更改一个元素变形的基点。
Eg.transform-origin:10px 10px;
10% 10%（相对于自身尺寸的左上角）
矩阵（matrix）–变形的原理（了解，知道一下底层变化是在矩阵基础上即可）
在2D变换中，矩阵变换函数 matrix() 接受 6个值，语法形式如下：
transform: matrix(a, b, c, d, e, f);
旋转
对某一元素应用旋转变换 rotate(θ)，即等价于矩阵变换函数 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。
平移
对某一元素应用旋转变换 translate(X, Y)，即等价于使用矩阵变换函数 matrix(1, 0, 0, 1, X, Y)。
倾斜
对某一元素应用倾斜变换 skew(α, β)，即等价于使用矩阵变换函数 matrix(1, tanβ, tanα,1, 0, 0)。
缩放
对某一元素应用缩放变换 scale(scaleX, scaleY)，即等价于使用矩阵变换函数 matrix(scaleX, 0, 0, scaleY, 0, 0)
矩阵的运算是不可逆的！！！！
变换组合（重要，面试提及）
切记变换在组合时，计算方向是从右往左进行的
变化的顺序不一样，得到的结果就不一样（因为矩阵不满足交换律）
练习：扇形导航
时钟

3.3D变形
3D旋转：rotateX(angle)、rotateY(angle)、rotateZ(angle)，等价于rotate(angle)
rotate3d(x,y,z,angle)
3D平移：transform: translateZ(length)是3D Transformaton特有的，其他两个2D 中就有 它不能是百分比值 X,Y可以是百分比值，参照于width 和height
transform: translate3d(translateX,translateY,translateZ);
3D缩放：transform: scaleZ(number)
注：如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩
transform: scale3d(scaleX,scaleY,scaleZ);

景深（perspective）：
景深的写法：
2种写法。一种css属性，一种是transform属性的一个变换函数（必须在第一位）
作用：让3D场景有近大远小的效果（我们肉眼距离屏幕的距离）
* 是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的）
原理：
* 景深越大 灭点越远 元素变形更小
* 景深越小 灭点越近 元素变形更大
景深基点
* 视角的位置（由两个属性控制的，perspective（控制Z）和perspective-origin（控制X和Y））
用法：perspective: depth;/注：perspective属性是被用于元素的后代元素，而不是元素本身；Z轴是被perspective属性设置的/
perspective-origin;设置在父元素上，对后代元素起作用。作用：这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素 有默认值：50% 50%
问题：景深叠加（千万不要出现！！！）
3D舞台：transform-style
* 营造有层级的3d舞台
* 是一个不可继承属性，他作用于子元素
应用练习：立方体的构建（3D入门demo）
三棱柱
backface-visibility:属性用来设置是否显示元素的背面，默认是显示的。
有两个值，hidden和visible，默认值是visible
一个元素分两面，但并不意味元素有厚度。在一个状态下，元素只能展现自己的一面

3.动画（Animation）
不像过渡那样实现动画形式需要触发
属性：
animation-name：指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列（注意：是关键帧的名字，不是属性名字）
@keyframes animiationName{
keyframes-selector{
/可以写from to或者百分比 表示的是时间的划分！！/
css-style;
}
}
animation-duration：指定一个动画周期的时长
animation-timing-function：定义CSS动画在每一动画周期中执行的节奏
steps(n,[start|end]) （如何理解？有问题：为何最后一步不走？start: 看不到第一帧
end:看不到最后一帧
）
animation-delay：定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)
animation-iteration-count：定义了动画执行的次数（属于动画内的范畴）
重复的是关键帧
animation-direction：定义了动画执行的方向
值：normal：
reverse：反向运行动画
反转的是关键帧、animation-timing-function
alternate：动画交替反向运行
alternate-reverse: 反向交替， 反向开始交替
animation-fill-mode：定义动画在动画外的状态，属于动画外的范畴
值：none:动画外的状态保持在动画之前的位置
backwards：from之前的状态与from的状态保持一致
forwards：to之后的状态与to的状态保持一致
both：backwards+forwards（动画外的状态与from和to的状态保持一致）
animation-play-state:定义了动画执行的运行和暂停
值：running（默认值） 和paused
简写属性：在每个动画定义中，顺序很重要：可以被解析为 的第一个值被分配给animation-duration, 第二个分配给 animation-delay。
关键帧（@keyframes）：
和animation-timing-function比较：
相同：都是用于控制动画形式的
区分：作用范围不同：animation-timing-function：作用于一个关键帧周期
关键帧：作用于一个动画周期

动画练习：兔斯基动图
开机动画
移动端开发必写（记忆）：

4.Flex布局（常考）
flex frog练习
http://flexboxfroggy.com/
flex分新旧两个版本
-webkit-box
-webkit-flex / flex
项目永远排列在主轴的正方向上
注意：特别记忆flex属性的默认值！！！影响很大！
1.Flex容器：
容器的布局方向
（控制主轴是哪一根） 容器的排列方向
（控制主轴的方向） 富裕空间的管理
新版 flex-direction：
row; 从左往右的x轴
row-reverse;从右往左的x轴
column; 从上往下的y轴
column-reverse;从下往上的y轴 主轴
justify-content
flex-start：在主轴的正方向
flex-end:在主轴的反方向
center： 在两边
space-between：在项目之间
space-around： 在项目两边

侧轴
align-items
flex-start：在侧轴的正方向
flex-end： 在侧轴的反方向
center： 在两边
baseline 基线对齐
stretch 等高布局（项目没有高度）
老版 -webkit-box-orient:horizontal/vertical -webkit-box-direction：normal/reverse 主轴
-webkit-box-pack
主轴是x轴
start：在右边
end: 在左边
center：在两边
justify：在项目之间
主轴是y轴
start：在下边
end：在上边
center：在两边 justify：在项目之间
侧轴
-webkit-box-algin
侧轴是x轴
start：在右边
end： 在左边
center：在两边
侧轴是y轴
start：在下边
end： 在上边
center：在两边

2.项目属性：弹性空间管理
将主轴上的富裕空间按比例分配到项目上!
老版本：-webkit-box-flex：1；（默认值为0）

新版本：flex-grow:1;（默认值为0）
3.新版本容器新增属性
1）控制侧轴方向（会使侧轴堆砌）：
flex-wrap：nowrap（不换行）
wrap(侧轴方向由上向下) （flex-shrink失效！）
wrap-reverse（侧轴方向由下向上） （flex-shrink失效！）
2）多行多列时,富裕空间的管理，会把所有行、列看成一个整体
align-content
区分：align-items：单行单列富裕空间额管理
align-content：多行多列富裕空间的管理
3）flex-direction和flex-wrap的简写属性
flex-flow：row nowrap（默认值）
4.新版本项目新增属性
1）order:控制项目的排列顺序
2）align-self:会对齐当前flex行中的flex元素，并覆盖align-items的值（即自己的富裕空间自己来管理）
总结:侧轴富裕空间管理的属性：
管理单行：align-items
管理多行：align-content
管理单个元素：align-self（单行时优先级高）
3）flex-shrink:收缩因子 默认值为1
前提：flex-wrap:nowrap（只能是单行，才能收缩）
注意flex-shrink的规则
4）flex-basis：伸缩规则计算的基准值（默认拿width和height的值）
5.伸缩规则
flex-basis：伸缩规则计算的基准值（默认拿width和height的值）
flex-grow：
可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
flex-shrink（默认值为1）
–.计算收缩因子与基准值乘的总和
var a = 每一项flex-shrink*flex-basis之和
–.计算收缩因数
收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
var b = (flex-shrink*flex-basis)/a
–.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
var c = b * 溢出的空间
6.应用：等分布局
flex-shrink: 1;
flex-grow: 1;
flex-basis: 0;
flex布局在移动端应用非常广泛，70%的微信小程序都是用flex布局做的
7.flex简写属性（等分布局）（非常好用）
flex:1（表示：flex-shrink: 1;flex-grow: 1;flex-basis: 0%;）

5.响应式布局（常考）
1.CSS3媒体查询选择器（响应式布局的核心）
@media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性 {
//规则
}

1）媒体类型
all
screen
print
2）媒体属性
width：浏览器的窗口尺寸
device-width：设备尺寸
device-pixel-ratio（必须加webkit前缀）：像素比
—以上三个媒体属性可加 min 和 max 前缀
min：最小值为谁
max：最大值为谁

    横竖屏切换
        orientation：landscape（横屏）
        orientation：portrait （竖屏）

3）关键字
only：处理浏览器兼容问题,指定某种特定的媒体类型
and：连接一条查询规则
, ：连接多条查询规则
not：取反
面试常考：三列布局？两边固定，中间自适应
兼容性好：flex布局
兼容性不好：1）使用定位实现（不太好）
2）使用浮动实现—中间列无法优先加载
要求：实现中间列的优先加载？—圣杯布局（常考）

CSS规范
1.Javascript规范
Ecma规范：ECMA262 js相关的标准
ECMA404 json规范

DOM规范（主流浏览器使用dom2多一点）
BOM没有规范（正在规划中，h5已把其拉入w3c规范），查看规范找“window”
2.html规范和css规范—-w3c在定义
看一个属性到底能不能用到can i use
3.html5=css+javascript+html
4.H5和CSS3之前的版本都不是以模块化形式推出的，之后的技术都是以模块推出的