css比較經(jīng)典的例子

go4it 發(fā)布于2019-08-29 11:20 / 1321人閱讀

摘要：九宮格布局為之后每個格子都要向左向上移動做準(zhǔn)備，以免第一列和第一行超出范圍清除浮動垂直水平居中這一步很關(guān)鍵保證起作用如果不設(shè)置這一步，則只會顯示一半，另一半被旁邊格子的掩蓋了清除浮動方法一添加空元素，方法二父

九宮格布局

CSS清除浮動 方法一：添加空元素，clear:both

1
2


.clear{clear:both;height:0;line-height:0;}

方法二：父級定義overflow:hidden;


    1
    2
    3


.outer {overflow:auto/hidden;zoom:1}

方法三：父級元素:after

.outer:after{
    clear:both;
    content:".";
    display:block;
    width:0;
    height:0;
    visibility:hidden; //允許瀏覽器渲染，但不顯示
    overflow:hidden;
}

CSS垂直水平居中


    
        Content goes here

方法一：表格顯示方式

#wrapper {
    display:table;
}
#cell {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
} 
.content {
    display:inline-block;
}

方法二：文本水平垂直居中

.content{
    height:200px; 
    line-height:200px;
    text-align:center;
} //只適合單行文字的水平垂直居中

方法三：盒模型的水平垂直居中 padding填充


    


.wrap {
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:400px;
    height:400px;
    background-color:#ccc;
}
.content{    
    width:100px;
    height:100px;
    padding:(400-100) / 2;  //平分padding
    background-color:#333;
    background-clip:content-box;
}

margin填充

.content{
    margin-left:auto;
    margin-right:auto;//實現(xiàn)了水平居中
    margin-top:(400-100)/2;//平分margin
}

方法四：left:50%;top:50%

.wrap{
    width:400px;
    height:400px;
    position:relative;
}
.content{
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}
.content {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}


  
    
  


.wrap {
    width:400px;
    height:400px;
    position:relative;
}
.content-relative {
    position:absolute;
    width:200px;
    height:150px;
    left:50%;
    top:50%;
    background-color:transparent;
}
.content-inner {
    width:100%;
    height:100%;
    position:relative; //避免繼承absolute
    left:-50%;
    top:-50%;
}

方法五：text-align:center+absolute

.wrap{
    text-align:center;//由于content的display:inline-block,所以起作用，相當(dāng)于content設(shè)置left:50%;
    width:400px;
    height:400px;
}
.content{
    position:absolute;
    display:inline-block;
    width:200px;
    height:200px;
    margin-left:-(100px/2);
    margin-top:(400px-100px)/2;
}

.wrap{
    position:relative;
    width:400px;
    height:400px;
}
.content{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:200px;
    height:200px;
}