一、水平居中
<body>
<div id="wrapper">
...
</div>
</body>>
body {
text-align: center;
min-width: 800px;
)
#wrapper {
margin: 0 auto;
width: 800px;
text-align: left;
}
二、要随时清除浮动元素
1.用空标签清除
.clear {clear: both;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clear"></p>
</div>
2.使用 overflow 属性
#layout { overflow: hidden; zoom: 1; }
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
3.使用 clearfix
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
三、去掉图片下边出现的多余空白
1.将图片转换为块级对象
.pic img {display: block;}
2.设置图片的垂直对齐方式
img {vertical-align: top;}
3.改变父对象的属性
如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置:
.pic {
width: 88px;
height: 31px;
overflow:hidden;
}
4.设置图片的浮动属性
.pic img {float: left;}
如果要实现图文混排,这种方法是很好的选择。
四、在IE下移除textarea的滚动条
textarea {overflow: auto;}
五、去除虚线轮廓
a, a:active { outline: none; }