移动web第三天

拓展和补充

拓展

如何判断属性在各浏览器是否兼容：打开caniuse网站，搜索想要的属性

补充

一、过渡的四个属性

1.想要实现过渡的css属性名 width，height等通常用all；

2.过渡持续的时间：transition-duration：时间秒/s；

3.过渡的速度曲线：transition-timing-function: steps(数字);匀速：linear

4.过渡延迟时间：transition-delay: 时间秒/s；

二、块级元素设置了定位（绝对和固定），宽度有内容撑开，注意设置宽度。

动画

基本实现步骤

animation复合属性

补充

复合属性写法：

animation: name duration timing-function delay iteration-count direction fill-mode;

animation-fill-mode: both;开始跟结束两种状态都选；
animation-timing-function,速度曲线，默认值ease（先慢再快再慢），匀速：linear；
forwards（最后一帧状态）不能和infinite（无限循环）结合使用，否则不生效；
animation里面属性不分先后顺序，当属性里有两个时间时，第一个时间永远表示动画长，第二个永远表示延迟时间。

移动端

分辨率和像素

流式布局(百分比布局)：

宽度设置百分比，高度固定。

flex布局

父项

一、flex组成部分 display: flex

弹性容器（父项）：默认的宽度是父元素的宽度，默认的高度是由内容所撑开
弹性盒子（子项）：默认的宽度由内容撑开，默认的高度是父元素的高度；
子项元素不再区分块、行内、行内块元素，全部都可设置宽高；
子项设置浮动没有效果；定位、margin、transform都有效；
默认情况下，子项总宽度大于父项也不会换行，只会压缩。

二、主轴对齐方式(justify-content)：方向是水平

justify-content: flex-start; 默认值，由父元素的起点开始显示,左边；
justify-content: flex-end; 从父元素的终点开始显示，右边；
justify-content: center; 弹性盒子在弹性容器中水平居中；
justify-content: space-around; 空白空间围绕在弹性盒子的两侧--首尾弹性盒子离弹性容器的距离，是弹性盒子与弹性盒子之间的距离的1/2；
justify-content: space-between; 首尾的弹性盒子与弹性容器没有间隙，弹性盒子与性盒子之间的空间间隙相等；
justify-content: space-evenly; 平均空白缝隙，均分在弹性容器与弹性盒子之间。

三、侧轴对齐方式

a.单行对齐：align-items

a. align-items: flex-start; 默认值，由父元素的起点开始显示，上边;
b. align-items: flex-end; 从父元素的终点开始显示,下边；
c. align-items: center; 让弹性盒子在垂直方向上居中；
d. align-items: stretch; 默认值，让弹性盒子的高度沿着侧轴拉伸直到和父元素高度一致。

b.多行对齐: align-content

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;

**注意：**单行跟多行的对齐方式要对号入座

四、设置换行

属性：flex-wrap

默认值 nowrap 不换行

wrap 换行

五、设置主轴方向

row 默认值左到右；
row-reverse 右到左；
column 常用上到下；
column-reverse 下到上。

子项

1.默认宽度等于内容撑开；

2.默认高度等于父项的高度；

3.flex：1 设置子项的宽度；

4.align-self 设置子项在侧轴上的对齐：

a. flex-start 上;

b. flex-end 下;

c. center 居中。

主轴方向改了column（主轴垂直，侧轴水平）

默认的高度等于内容撑开；
默认宽度等于父项跨度；
flex：1 设置子项的高度；
align-self 设置子项在侧轴上的对齐（水平）。

弹性布局flex