CSS3选择器有哪些？
属性选择器、伪类选择器、伪元素选择器。
CSS3新特性有哪些？
- 颜色：新增RGBA，HSLA模式
- 文本效果
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
- 边框：
圆角：border-radius
边框阴影： box-shadow
将图片规定为包围 div 元素的边框：border-image
- 盒子模型：box-sizing
- 背景：
background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
- 渐变：linear-gradient、radial-gradient
- 过渡：transition，可实现动画
- 在CSS3中唯一引入的伪元素是 ：selection.
- 媒体查询，多栏布局
- border-image
- 2D转换
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
- 3D转换
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
- 自定义动画
CSS3新增伪类有那些？
- p:first-of-type 指定父元素的第一个p元素
- p:last-of-type 指定父元素的最后一个p元素
- p:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素
- p:only-child 规定属于其父元素的唯一子元素的每个 p 元素
- p:nth-child(2) 规定属于其父元素的第二个子元素的每个 p
- :enabled :disabled 控制表单控件的禁用状态
- :checked 控制单选框或复选框被选中状态
HTML5新特性
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签
- 结构标签： header、nav、footer、aside、article、section
- 新增标签： datalist（定义选项列表）、details（定义文档细节，通常与summary使用）、menu（定义列表/菜单）、address、progress（进度条，有两个值：value、max）、mark（标记）、time（时间）
- 新增表单元素type： email、url、tel、number（min、max、step）、range（进度条）、color（颜色面板）、search、calendar、date、time、email
- 属性： form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex
- 音频、视频API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 新的技术webworker, websocket, Geolocation支持HTML5新标签：
处理html5新标签与浏览器兼容性问题：
（1）、使用document创建标签
（2）、a）使用html5shim：在<head>中调用以下代码：
1.<!--[if lt IE 9]>
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3.<![endif]-->
b）使用kill IE6: 在</body>之前调用以下代码：
1.<!--[if lte IE 6]>
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
3.<![endif]-->
网友评论