1、h5新增的内容是什么？
- 新增了语义化标签：header，nav，body，main，article，aside，footer。
- 新增了多媒体标签属性：video，auto。
- 新增了表单控件：number，search，email，tel，date，time，URL。
- 新增了本地离线存储local-storage长期存储数据。
- 新增了自定义属性：data-*。
- 新增了画布canvas。
- 拖拽释放（rap）API on drop
- 新的技术文本WebSocket，一种在单个tcp链接上进行全双工通讯的协议，浏览器通过JavaScript向服务器发出建立webSocket连接的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据，当你获取WebSocket连接后，就可以通过send()方法向服务器发送数据，并通过onmessage事件来接受服务器返回的数据。
- 新增了地理位置（Geo location） API。
2、css3新增内容
2.1新增选择器：
2.1.1属性选择器
a[href^=‘http’] :查找含有href属性为http的a元素
2.1.2伪类选择器
| 选择 | 功能描述 |
|---|
| :root | 选择匹配文档的根元素 | | E:nth-child(n) | 选择所有在其父元素中的第n个位置的匹配E的子元素 | | E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 | | E:nth-of-type(n) | 选择所有在其父元素中同类型第n个位置的匹配E的子元素 | | E:nth-last-of-type(n) | 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素 | | E:last-child | 选择位于其父元素中最后一个位置，且匹配E的子元素 ，与E:nth-last-child(1)等同 | | E:fisrt-child | 选择位于其父元素中第一个位置，且匹配E的子元素 ，与E:nth-child(1)等同 | | E:empty | 选择匹配E的元素，且该元素不包含子元素。 | | E:first-of-type | 选择在其父元素中匹配E的第一个同类型子元素 |
2.1.3UI伪类选择器
E:enabled : 选择匹配E的所有可用UI元素。
E：disabled：选择所有E的不可见元素。
E：:required ： 用于匹配设置了’required’属性的元素。
2.1.4：伪元素选择符:
| 选择器 | 功能描述 |
|---|
| first:letter | 设置对象内的第一个字符的样式 | | first-line | 设置对象内的第一行的样式 | | before | 设置对象前发生的内容，用来和content属性一起使用 | | after | 设置对象后发生的内容，用来和content属性一起使用 | | placeholder | 设置对象文字占位符的样式 | | selection | 设置对象被选时的颜色 |
2.2关于文本:
文本的阴影：text-shadow 文本换行：Word-wrap 、 Word-break 文本字体 @font-face使用。
2.3背景:
- background-image
- background-size
- background-origin:属性指定了背景图像的位置区域。
- background-clip属性指定背景绘制区域。
2.4动画：
- transform变换效果：
- animation动画效果：
2.5过渡效果：
- transition过渡效果：
2.6边框效果：
- border-color：为边框设置多种颜色。
- border-image：图片边框。
- border-radius：圆角边框。
- box-shadow：阴影效果。
3、盒子模型
3.1盒子模型有：
css盒子模型有：content-box border-box padding-box。
content-box:测量只包括内容，不包padding、border、margin。
padding-box:width和height属性包括padding大小，不包括border，margin。
border-box：width和height属性包括padding、border大小，不包括margin
3.1IE怪异盒子模型
IE怪异盒子模型：width = padding + width + border
IE盒子模型box-sizing:border-box;
W3C标准盒子模型：width = content
box-sizing：content-box
3.、flex布局。
3.1 flex-deirection：设置主轴方向。
- flex-direction：row | row-reverse | column | column-reverse
- row：默认值，表示沿水平方向，自左向右。
- row-reverse：表示沿水平方向 ， 自右向左。
- column：表示垂直方向，自上而下。
- column-reverse：表示垂直方向：自下而上。
3.2 flex-wrap属性
- flex-wrap：nowrap | wrap | wrap-reverse
- nowrap：表示不换行 有多少都是一行排列
- wrap：正常换行
- wrap-reverse：向上换行，第一行位于下面
3.3 justify-content属性
- justify-content:flex-start | flex-end | center | space-between | space-around。
- flex-start:默认值 ， 左对齐。
- flex-end:右对齐。
- center：居中对齐。
- pace-between：两端对齐。
- space-around：每个项目的两侧的间距相等。
3.4 align-items属性
- align-items：flex-start | flex-end | center | baseline | stretch。
- flex-start：左对齐 x轴。
- flex-end：右对齐 x轴。
- center：居中对齐 x轴。
- baseline：项目的第一行文字的基线对齐。
- stretch：默认值：如果未设置高度和宽度为auto。
4、position属性
position有五个属性：static ， relative ， absolute ， fixed ， sticky。
5、CSS优先级计算规则是怎样的？
- ！important的优先级为最高。
- ID > class > 元素选择器
- 但是外联样式不一定低于内联样式。
- 一般的时候行内样式大于外联样式和内联样式。
6、重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？
重置（Resetting）： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。
标准化（Normalizing）： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
（我的选择）当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。
|