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，实现全覆盖的效果
4.在进行响应式布局的时候，在不使用框架的情况下，用于宽度的不确定性，我们一般采用的是百分比布局的方式，还可以采用css3的vm布局方式（vm即将浏览器的视图窗口分为100份，比如视图窗口为1000px，width{10vm}，那么这个宽度就是1000/100*10 即为100px） 还可以使用less或者sass这种css变量方法
5.iframe的用法
<iframe name="container" src="http://www.baidu.com" width="50%" height="500px;"></iframe>
<p><a href="http://www.jd.com" target="container">京东</a>  
<a href="http://www.taobao.com" target="container">淘宝</a></p>
上面的代码就可以实现在一个页面中嵌套另一个页面 ，初始化页面为百度首页，然后点击对应的链接就会将链接的页面在iframe中进行显示
6.解决display:inline-block后产生的间距问题
项目需求：<div class="container" style="font-size:0;">
<div style="width:40%；display:inline-block;font-size:14px;">德玛西亚</div>
</div>
<style>*{margin:0;padding:0;box-sizing:border-box}</style>
需要两个子div可以并排排列在一行,占满父容器，如上一个宽度设置为40%一个设置为60%.但是这样设置结果也许会让你失望，因为第二个div会自动另起一行重新排列
原因 display:inline-block;会产生一定的间距，这样就会把第二个div挤下来
解决方法：将父容器的font-size:0,然后将需要设置的font-size移到子元素上就可以解决
网友评论