day7

一、review

1.transition 过渡，可以让属性改变的时候有动画

=> transition-property:all; 过渡属性

=> transition-duration 动画持续（执行）时间

=> transition-delay 延迟时间

=> transition-timing-function: linear | ease-in | ease-out | ease-in-out;

+ 缩写

=> transition: 值1 值2 值3 值4...

2.文本阴影/盒子阴影

text-shadow/box-shadow

+ 文本阴影/盒子阴影（inset表示内阴影）

+ 值1表示阴影的水平位置 值2表示阴影的垂直位置 值3表示阴影的模糊程度 值4表示阴影的颜色值。

3.flex弹性盒

伸缩流方向 => flex-direction: row | row-reverse | column | column-reverse 主轴对齐方式 => jusitify-content: flex-start | flex-end | center | space-around | space-between | space-evenly; 侧轴对齐方式 => align-items: flex-start | flex-end | center | baseline | stretch; 换行 => flex-wrap: nowrap | wrap | wrap-reverse; 缩写（伸缩流方向和换行） => flex-flow: wrap | wrap-reverse | row-reverse | column | column-reverse; 堆栈伸缩行 => align-content: flex-start | flex-end | center | space-around | space-between | space-evenly; 分配元素的所占的份额 => flex

二、元素隐藏

第一种方式 ​ => display:none; ​ => display:block; ​ => 会让元素直接消失，在页面中不占位置

第二种方式 ​ => opacity:0; ​ => opacity:1; ​ => 不是让元素隐藏了，其实是看不见了。元素隐藏后，正常的功能是存在的

第三种方式 ​ => visibility:hidden; ​ => visibility:visible; ​ => 是让元素进行隐藏，只不过会继续占用网页的位置。元素隐藏后，元素的功能会消失

三、三列布局

三列布局 容器里面有三块内容 两边的内容宽度是固定的，中间内容区域需要宽度自适应

圣杯和双飞翼布局 圣杯和双飞翼布局其实效果是一样的，实现思路有不同的点，在这里采用最简单的和最实用的方式（采用弹性盒+order） => 容器里面有三块内容 => 左右两边的内容宽度是固定的，中间内容区域需要宽度自适应 => 中间内容区域在解析代码的时候优先加载，但是在显示效果的时候中间内容区域还是在中间显示

四、HTML5多媒体标记

video专门用来播放视频的。flash可以做动画、可以播放音频和视频

属性 => src 视频的资源路径 => controls 视频控件（点击播放、进度条、声音、全屏等等） => muted 静音 => loop 循环播放 => autoplay 自动播放 => poster 视频封面

支持的视频格式 => ogg => mp4 => webm

注意点 => source标记可以写多个，主要目的是当浏览器不支持其中某个视频格式的时候，可以去查找其他的格式 --> <!-- <video src="./videos/chrome_japan.mp4" controls loop width="500" autoplay poster="./img/5.jpg"></video> --> <!--

video controls loop width="500"> <source src="" type="video/ogg"> <source src="./videos/dongbei.mp4" type="video/mp4"> <source src="" type="video/webm"> </video>

五、rem单位

rem

是css3新增的一个单位 以一个参照物，进行动态的变化，让网页实现自适应的布局

是根标记（html）字体大小为参照物的单位

<script src="./js/flexbox.js"></script>

rem适配方案，是使用js动态的计算html font-size的大小的 exbox方案是手淘团队使用的实现原理 => 无论多大的屏幕，默认都是把屏幕划分成10等分的，是按照10等分的比例进行缩放

六、属性选择器

通过标记自生带来的属性来选择元素

①通过属性选取元素： input[type]{ border: 1px solid orange; }

input[name]{ border: 1px solid orange; }

input[value]{ border: 1px solid orange; }

②通过属性的属性值来选择元素：

input[type="text"]{ ​ width: 300px; ​ border: 1px solid hotpink; ​ }

input[type="number"]{ ​ border: 1px solid hotpink; ​ }

③ 通过属性的属性值的开头选择元素 ​ a[href^="h"]{ ​ color: hotpink; ​ }

④ 通过属性的属性值的结尾选择元素 ​ a[href$="com"]{ ​ color: orange; ​ }

⑤通过属性的属性值的任意字符选择元素 ​ a[href*="c"]{ ​ color: gold; ​ }

七、字体图标

iconfont

+ 字体图标

+ 把图标当成普通文本区处理

+ 文本的颜色和字体大小可以对它起作用