一、HTML5新特性
- HTML5的新增特性主要是针对以前的不足,增加了新的标签、新的表单和表单属性等。
- 这些新的特性都有兼容性问题,
基本上是IE9及以上浏览器才支持
,如果不考虑兼容性,可大量使用这些新特性
1、HTML新增的语义化标签
2、新增多媒体标签
video
<video src="" controls="controls"></video>
3、新增标签
- type=“search”
- type=“color”
4、新增表单属性
二、CSS3新特性
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
1、CSS3新增选择器
- 属性选择器:
input[type=password]{} /*type的值可用引号,也可不用 权重为11*/input[type="password"]{} /*type的值可用引号,也可不用 权重为11*/ div[class^=icon] /*选择div的class值开头为icon的元素 权重为11*/
注:
类选择器、伪类选择器、属性选择器的权重都为10,例如:div[class^=icon] 权重为11
- 结构伪类选择器
E:first-child
与E:first-of-type
的区别
E:first-child
先解析父元素中子元素的个数,再根据索引(从0开始)判断标签是否相等,相同则选中,否则不选中。E:first-of-type
先接线父元素中E的个数,再根据索引选中。下面例子选不中的原因:若选择子元素中第一个div,使用
.select div:first-child {}
则选不中2所在的标签,因为浏览器先解释:first-child
,先解析父元素中子元素的个数,此时第一个元素是p
,此时p
与.select div:first-child {}
中的div不匹配,所以无法选择,此时应使用first-of-type
。/*使2所在标签的背景颜色为红色*/<style> /*无效*/.select div:first-child{ background-color: red; } </style> <style> /*有效*/ .select div:first-{ background-color: red; } </style> <div class="select"> <p>1</p> <div>2</div> <div>3</div> </div>
- 伪元素选择器
- before和after前尽量使用双冒号
- before和after创建一个元素,但是属于行内元素
- 创建的这个元素在文档数中是找不的,所以称为
伪元素
- 语法
E::before{}
- before和after必须有
content属性
- before在父元素前创建元素,after在父元素后创建元素
- 伪元素选择器和标签选择器一样,权重为1 所以
div::after的权重为2
2、box-sizing
3、CSS3滤镜filter
4、过渡
.test {
width: 200px;
height: 200px;
background-color: red;
transition: all .5s;
}
.test:hover {
width: 400px;
height: 400px;
background-color: blue;
}
5、transform 变形
- translate 移动
- rotate 旋转
- scale 缩放
.progress {
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 30px;
border-radius: 50px;
border: 2px solid red;
overflow: hidden;
transition: all 0.5s;
}
.progress>div {
width: 30%;
background-color: tomato;
height: 30px;
transition: all 0.5s;
}
.progress:hover {
transform: translateX(30px);
}
.progress:hover div {
width: 100%;
}
- 盒子的居中
<div class="outer">
<div></div>
</div>
.outer {
position: relative;
height: 500px;
width: 500px;
background-color: tomato;
}
.outer>div {
position: absolute;
left: 50%;
top: 50%;
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
background-color: teal;
}
6、3D导航栏及其实现
<ul>
<li>
<div class="box">
<div>hello</div>
<div>everyone</div>
</div>
</li>
<li>
<div class="box">
<div>hello</div>
<div>everyone</div>
</div>
</li>
<li>
<div class="box">
<div>hello</div>
<div>everyone</div>
</div>
</li>
<li>
<div class="box">
<div>hello</div>
<div>everyone</div>
</div>
</li>
<li>
<div class="box">
<div>hello</div>
<div>everyone</div>
</div>
</li>
</ul>
body {
font: italic 25px 'Times New Roman';
line-height: 50px;
color: #fff;
text-align: center;
}
ul {
width: 800px;
margin: 0 auto;
margin-top: 300px;
/* transform-style: preserve-3d; */
perspective: 300px;
}
ul li {
float: left;
width: 150px;
height: 50px;
perspective: 800px;
margin-left: 3px;
}
.box {
transform-style: preserve-3d;
transition: all .5s;
}
.box div {
position: absolute;
width: 150px;
height: 50px;
transition: all 2s;
cursor: pointer;
}
.box div:first-child {
background-color: red;
}
.box div:last-child {
background-color: blue;
top: 50px;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
.box:hover {
transform-origin: 50px 25px;
transform: translateY(-25px) rotateX(90deg);
}