前端开发中,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浏览器上没有效果。
以上是常见的传统布局错误,相信通过改正这些错误能够为网页的制作提供更便捷、更高效的方式。