css佈局和居中簡析

左右佈局

常用的左右佈局方式：
1.給需要左右排版的元素設定float屬性，然後給父元素清除浮動。清除浮動的常用方法有兩種：a.給子元素加一個空的div兄弟標籤，設定clear:both樣式；b.給父元素設定偽類，具體寫法為父元素::after{display:block;content:"";clear:both;}。這兩種本質其實都是利用clear:both來清除浮動，不過b可以減少使用無意義標籤，使頁面看起來更美觀，也有其他的清除浮動方式，但是沒怎麼用過，不做評價。

2.給需要左右排版的元素都設定display:inline-block;讓他們可以在同一行排列。但是同時又會帶來兩個問題，一個是元素之間會有空白，瀏覽器會把程式碼中內聯元素中間的換行符解析成一個空格，這個我們可以在程式碼中刪除程式碼中間的換行，但是個人感覺有點費勁，也可以給父元素設定font-size:0;來消除多餘的空格，這個可以解決大部分標籤的空格問題；第二個問題是設定了display:inline-block;後會影響元素內部的內容的基線對齊，就是左右兩個元素中的內容本來應該同一行顯示的，顯示成了一上一下錯位的，這時候需要用vertical-align來拉回基線，通過改變vertical-align的值改變內容的對齊方式，想要知道vertical-align這個屬性是怎麼作用的，應該看看下面兩張圖：

3.flex佈局。給父元素設定display:flex;表示使用flex佈局，然後設定flex-direction設定子元素排列方向，左右或上下都可，具體屬性用法參見https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

4.絕對定位。直接給子元素設定position:absolute,然後分別設定對應的top,right,left,bottom值即可

左中右佈局（左右固定，中間欄自適應）

1.浮動。左欄左浮動，右欄右浮動，左右定寬，中間欄給左右margin值實現自適應，注意順序，中間欄需要放在左右欄後面：

<style>
html,body{margin:0;height:100%}
.middle{margin:0 210px;height:100%;}
.left{float:left;width:200px;height:100%;}
.right{float:right;width:200px;height:100%;}
</style>複製程式碼

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
複製程式碼

2.margin負值法。本質還是使用了浮動的方法，給中間欄加一個子元素作為主體內容，然後利用margin負值讓本來已經另起一行的左右兩欄再回到和中間欄並列，左欄margin負值為100%，即中間欄的寬度，右欄maigin值是自身的寬度的負值。

<style>
html,body{margin:0;height:100%}
.middle{width:100%;height:100%;float:left;}
.middle .content{margin:0 210px;height:100%;}
.left{float:left;width:200px;height:100%;margin-left:-100%;}
.right{float:right;width:200px;height:100%;margin-right:-200px;}
</style>複製程式碼

<div class="middle"><div class="content"></div></div>
<div class="left"></div>
<div class="right"></div>複製程式碼

3.flex佈局，感覺跟左右佈局差不多，根據屬性設定每一欄的寬度百分比就行。

4.絕對定位。左右欄才用絕對定位，分別固定在兩側，中間欄用margin撐開兩邊距離。

水平垂直居中

使用絕對定位：

ONE:父盒子相對定位，子盒子絕對定位後，top，left設定50%,然後給定margin-top值為子盒子高度值一半的負值，margin-left值為子盒子寬度值一半的負值。如果高度不確定或者寬度不確定可以設定transform:translateX(-50%) translateY(-50%) 可以達到相同效果。

<div><img src="" /></div>複製程式碼

.box{width: 300px;height: 250px;background: #fff;position:relative;}img{width: 100px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin-left:-50px;margin-top:-33px;}複製程式碼

TWO:父盒子相對定位，子盒子絕對定位後，top,right,bottom,left都設定為0，設定margin:auto可同時水平垂直居中。只垂直居中，left,right不為0,；只水平居中，top,bottom不為0。

<div><img src="" /></div>複製程式碼

.box{width: 300px;height: 250px;background: #fff;position:relative;}img{width: 100px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
}複製程式碼

用display:table實現居中

不用設定定位，給img標籤包裹一個div,給父盒子設定display:table,給圖片外層的div設定display:table-cell和vertical-align:middle即可讓圖片垂直居中，水平居中給父盒子設定text-align:center。

<div class="box">   <div class="img">
      <img src="" />
    </div>
</div>複製程式碼

.box{width: 300px;height: 250px;background: #fff;display:table;text-align:center;}#img{display:table-cell;vertical-align:middle;}img{width: 100px;}複製程式碼

用flex實現居中

給父盒子設定display:flex,設定align-items:center使子元素垂直居中，justify-content:center使子元素水平居中。

<div class="box"><img src="" /></div>複製程式碼

.box{
width: 300px;height: 250px;background: #fff;display:flex;align-items:center;justify-content:center;}img{width: 100px;}複製程式碼

css佈局和居中簡析

相關文章