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移到子元素上就可以解决7.如何更好的理解浮动元素float记住浮动元素的几个特点:1、浮动会使元素a脱离文档流=>会破坏浮动前整个文档流的布局，造成下方的元素b会向上移动占据a元素之前的位置，视觉上出现浮动元素a漂浮在b元素之上，b元素被覆盖或者显示不全，但是b元素中的文字内容却默认a元素占用了空间，从而出现文字环绕的效果。2、浮动会使元素具有盒模型的特点。例如可以对行内元素span设置宽高(默认行内元素是不能设置宽度和高度的)3、元素浮动后的位置取决于向左或者向右移动直到碰到父元素的边框或者碰到另一个浮动元素的边框为止。
7、移动端使用绝对定位和相对定位来替换fixed定位。首先设置html的overflow：hidden，position：relative接着设置body的overflow：auto 最后将你需要达到固定定位的元素设置为绝对定位，然后当body出现滚动时，你设置的元素就会保持不动，和固定定位效果一样
网友评论