css 日常总结

1、平时在结合css的伪类实现平滑过渡时，最开始时也许会这样写,当鼠标移动到a标签时.submit-btn-icon 元素向左移动20px（动画效果~~）
a:hover .submit-btn-icon {
transition: left 2s;
left:200px;
}
.submit-btn-icon {
position: absolute;
top: 2px;
left: 170px;
}
这样写随之会带来一个问题就是当鼠标移开a标签时 submit-btn-icon 元素会离开回到原来的位置即向右移动20px，速度很快，非常僵硬，我们希望它也能缓慢的回到开始的位置，要是先这种效果只需要对上面的css做一个简单的更改即可
a:hover .submit-btn-icon {
left:200px;
}

.submit-btn-icon {
position: absolute;
transition: left 2s;
top: 2px;
left: 170px;
}
只需要将伪类的渐变transition移动到目标元素中去即可

2、如何利用定位方式进行页面布局，左右固定布局，中间自适应宽带
body{position:relative} 
.left{position:absolute;left:0;top:0;width:100px;height:200px;} 
.right{position:absoulte;right:0;top:0;widht:160px;height:200px;}
.center{height:200px;margin-left:100px;margin-right:160px;} 
//原理利用绝对定位会使元素脱离文档流，center元素宽度自适应填满全屏，然后使用margin属性来调整其宽度

3、其实遮罩层也可以用css来实现
核心点在于将遮罩层外层的container容器设置为posititon：absoulte 重点在于接下来对坐标的设置
top:0;left:0;bottom:0;right:0;  然后将body元素上设置为position:relative;这四个定位属性一设置就会自动将这个container扩展覆盖整个body，实现全覆盖的效果