淘先锋技术网

首页 1 2 3 4 5 6 7

前端开发中,CSS的布局是网页设计中的重要一环,常见的传统布局也是我们经常使用的,但是在使用的过程中,我们常常犯以下错误:

/*不应该这样写*/
.wrap{
margin:0 auto;
width:100%;
}

这种写法虽然看上去没什么问题,但是会导致网页出现横向滚动条,因为.width的真实宽度已经超过了父级.wrap的宽度。

/*不应该这样写*/
.box{
position:absolute;
left:50%;
margin-left:-100px;
}

这种写法让元素向左移动了父元素宽度的一半,然后通过margin-left负值的方式来居中显示,但是这样容易出现左右可滚动的情况,而且当.box的宽度变化时,这种写法需要重新计算margin-left的数值。

/*不应该这样写*/
.clearfix{
overflow:hidden;
zoom:1;
}

clearfix用于清除浮动,但是这种写法有时会导致元素高度溢出,因为这种写法使用了hack,而且在非IE浏览器上没有效果。

以上是常见的传统布局错误,相信通过改正这些错误能够为网页的制作提供更便捷、更高效的方式。