CSS3的权重
1.什么是权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式
2.权重的等级划分
- !important，加在样式属性值后，权重值为 10000
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： content、:hover 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
css新增选择器
- E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
- E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
- E:first-child：匹配元素类型为E且是父元素的第一个子元素
- E:last-child：匹配元素类型为E且是父元素的最后一个子元素
- E:only-child：匹配元素类型为E且是父元素中唯一的子元素
- E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
- E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
- E:first-of-type：匹配父元素的第一个类型为E的子元素
- E:last-of-type：匹配父元素的最后一个类型为E的子元素
- E:only-of-type：匹配父元素中唯一子元素是E的子元素
- E:empty 选择一个空的元素
- E:enabled 可用的表单控件
- E:disabled 失效的表单控件
- E:checked 选中的checkbox
- E:not(s) 不包含某元素
CSS3圆角、阴影、rgba
1.CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角：border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
2.CSS3阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
3.rgba（新的颜色值表示法）
盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式
- linear 匀速
- ease 开始和结束慢速
- ease-in 开始是慢速
- ease-out 结束时慢速
- ease-in-out 开始和结束时慢速
- cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：https://matthewlein.com/ceaser/
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
CSS3 transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
HTML5新结构标签
h5新增的主要语义化标签如下：
1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚
PC端兼容h5的新标签的方法，在页面中引入以下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>HTML5 新增表单控件
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词
HTML5 音频和视频
html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。
audio标签
支持格式：ogg、wav、mp3
对应属性：
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音
举例：
<audio src="source/audio.mp3" autoplay controls loop preload></audio>
<!-- 或者用如下方式： -->
<audio autoplay controls loop preload>
<source src="source/audio.mp3" type="">
<source src="source/audio02.wav" type="">
</audio>
source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。
video标签
支持格式：ogg、mp4、webM
属性：
1、width
2、height
3、Poster
可选第三方播放器：
1、cyberplayer
2、tencentPlayer
3、youkuplayer
移动端页面布局
移动端app分类
1、Native App 原生app手机应用程序
使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C
2、Hybrid App 混合型app手机应用程序
混合使用原生的程序和html5页面开发的手机应用
3、Web App 基于Web的app手机应用程序
完全使用html5页面加前端js框架开发的手机应用
Viewport 视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
背景图强制改变大小，可以使用background新属性
background新属性
background-size:
- length：用长度值指定背景图像大小。不允许负值。
- percentage：用百分比指定背景图像大小。不允许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：流体布局+响应式布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局
- 弹性盒模型
流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
