css小知识

css小知识

1. chrome默认body的margin为8px；
2. 垂直居中：

第一种方法：table-cell

<style type="text/css">
    .wrapper {display:table; width:800px; height:800px;} 
.cell {
    display:table-cell; 
    vertical-align:middle;
}
.content{
    height:200px;
}
</style>

<div class="wrapper">  
    <div class="cell">
        <div class="content"> Content goes here</div>
    </div>
</div>

第二种方法： absolute加上top：50% ,父元素可以absolute或者relative

<div style="height:500px; width:100%;background-color:green;position:absolute">
        <div style="position:absolute;top:50%;margin-top:-100px;height:200px;width:50%;background-color:red"></div>
    </div>

第三种方法：line-height(只限文本

<div style="height:500px; width:100%;background-color:green;line-height:500px">123123</div>

第四种方法：absolute和margin

<div style="height:500px; width:100%;background-color:green;position:absolute">
        <div style="position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;height:200px;width:50%;background-color:red"></div>

第五种方法：使用float(这个方法float没什么必要。。

<div style="width:800px; height:900px;background-color:red">
    <div style="float:left; height:50%;margin-bottom:-120px;"></div>
    <div style="clear:both;height:240px;position:relative">123123</div>
</div>

3.消除inline元素之间的空隙：
改为block
设置font-size:0
4.