1.新增form表单:
<input type=“email”> 邮箱
<input type=“number”> 数字
<input type=“tel”> 手机
<input type=“search”> 搜索域
<input type=“url”> 网址
<input type=“date”> 年月日
<input type=“month”> 年月
<input type=“week”> 年周
<input type=“time”> 时分
<input type=“datetime”> 年月日时间
<input type=“datetime-local”> 本地时间
<input type=“range”> 滑动条
<input type=“color”> 拾色器
2:关键帧的定义
@keyframes 自定义动画名称{
from{
属性名 : 属性值;
}
to{
属性名 : 属性值;
}
}
@keyframes 自定义动画名称{
0%{
属性名 : 属性值;
}
100%{
属性名 : 属性值;
}
}
3:transform的变换值
transform : translate() / translateX() / translateY() 移动
transform : rotate() / rotateX() / rotateY() / rotateZ() 旋转
transform : scale() / scaleX() / scaleY() 缩放
transform : skew() / skewX() / skewY() 扭曲
需要注意的是X Y Z要大写!
4:变换基点
transform-origin: x y;
x和y的值也可以是表示位置的单词,如:top、left和center等等;
5: 边框阴影的语法
box-shadow: x y [模糊距离] [阴影扩展半径] [阴影颜色] [投影方式];
投影的方式有两种:内投影inset和外投影outset(默认值);
6: 优雅降级和渐进增强的区别
优雅降级是先构建完整的功能,再考虑低版本的兼容问题,并试图减少用户体验的供给,而渐进增强是从低版本的兼容性开始,并不断扩充,以适应新环境的需要。
7:display:none与visibility:hidden的区别
- visibility:hidden; 将元素隐藏,但是在网页中的位置不会被取缔。
display:none; 将元素的显示设为无,在网页中不占任何位置。
visibility 属性指定一个元素是否可见的
display 这个属性用于定义建立布局时元素生成的显示框类型
visibility:hidden; 会触发重绘(repaint)
display:none; 会触发回流(reflow)
注意:重绘不一定回流,回流一定重绘。
8:rem和em的区别
rem 受根html的字号大小影响,常用于移动端
em 受当前字号大小的影响
9:一个元素在另一个元素中垂直水平居中的方法
垂直水平都居中的方法目前有四种常见的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 第一种 */
.boxone{
position: relative;
width: 300px;
height: 300px;
background-color: #8A2BE2;
}
.boxone .one{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: #32CD32;
}
/* 第二种 */
.boxtwo{
position: relative;
width: 300px;
height: 300px;
background-color: #DC143C;
}
.boxtwo .two{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: #DEB887;
}
.boxthree{
position: relative;
width: 300px;
height: 300px;
background-color: #ada442;
}
.boxthree .three{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
/* car盒子高度的一半的负值 */
margin-left: -100px;
/* car盒子宽度的一半的负值 */
width: 200px;
height: 200px;
background-color: #DEB887;
}
.boxfour{
position: relative;
width: 300px;
height: 300px;
background-color: #8A2BE2;
}
.boxfour .four{
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px;
height: 200px;
background-color: #FF7F50;
}
</style>
</head>
<body>
<!-- 第一种 -->
<div class="boxone">
<div class="one"></div>
</div>
<!-- 第二种 -->
<div class="boxtwo">
<div class="two"></div>
</div>
<!-- 第三种 -->
<div class="boxthree">
<div class="three"></div>
</div>
<!-- 第四种 -->
<div class="boxfour">
<div class="four"></div>
</div>
</body>
</html>
下面的顺序和上面的顺序不一样大家可以对照一下
第一种:
父元素 position :relative
子元素 position : absolute ;
left:0;right:0;top:0;bottom:0;margin:auto
第二种
父元素 position:relative
子元素 position:absolute;
left:50%;
top:50%;
margin-left:-width/2 +px;
margin-top:-height/2 + px;
第三种
父元素 position:relative
子元素 position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
第四种
父元素 position:relative
子元素 position:absolute;
left:calc(50% - width/2 px)
top:calc(50% - height/2 px)
需要注意的是第四种方法的最后一定要加单位!