清除浮动，移动端位置更换top left
2021-01-07 本文已影响0人
肥羊猪
清除浮动：
1.使用before和after双伪元素清除浮动 优点：代码更简洁 缺点：用zoom:1触发hasLayout.
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
2.使用after伪元素清除浮动 优点：符合闭合浮动思想，结构语义化正确 。缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
移动端位置更换top left
css的重绘与回流
重绘：当节点需要更改外观而不会影响布局。
回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。
常见的几何属性有width、height、padding、margin、left、top、border 或者是DOM节点发生增减移动。
减少重绘和回流的办法。
使用css3新增属性：translate替代top等方向值。
避免频繁使用style，而是采用class。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(10, 110, 200);
opacity: 0.6;
transform:translate(100px,50px);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
