CSS Tips

一、水平居中
<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;}


五、去除虚线轮廓
CSS Tips
a, a:active { outline: none; }

你可能感兴趣的:(html,css,IE)