可食用的「css佈局乾貨」,純Html示例，可調試 | 水平、垂直、多列

時間 2020-05-30

標籤可食用的 css 佈局乾貨 html 示例調試水平垂直多列欄目 CSS 简体版

原文原文鏈接

大家都不看的總集篇：從零開始的大前端築基之旅(深刻淺出，持續更新～)
以爲不錯就順手點個贊吧css

本篇文章僅整理經常使用的水平居中、垂直居中及多列等佈局，不求所有涉及，只考慮經常使用而且能夠順手拿來使用。如有其餘精妙的方案，歡迎在評論中指出，我會及時補充至文檔內。html

本文中全部示例均爲 html 渲染構成，沒有圖片及外鏈demo，因此能夠直接選中示例在控制檯調試，推薦本身動手試試文章中列舉的小提示，有助於加深理解。前端

最後，1個贊頂100閱讀量，告訴我你曾來過、看過，並在這裏不枉此行吧！！ wordpress

水平居中

text-align: center;

適用於行內內容(文字、行內元素、行內塊級元素)佈局

<div class="container">
  this is inner text
  <div classs="ele1">
    this is a block element
  </div>
  <div classs="ele2">
      this is another block element
  </div>
</div>
複製代碼

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
}
複製代碼

this is inner text

this is a block element

this is another block element

屬性會被繼承，影響到後代元素行內內容；post

ele1的塊級元素顯示文字居中是由於其寬度默認100%，與container一致，

Ele2內部文字居中是由於繼承了container的屬性，若想要ele2自己居中，設置 display: inline-block 轉爲行內塊或設置 margin: 0 auto

若是子元素寬度大於父元素寬度則無效flex

margin: 0 auto;

要求目標元素寬度固定，而且與父元素左右margin有空餘。網站

適用於父元素內有多個塊級元素上下排列的狀況this

<div class="container">
  this is inner text
  <div classs="ele2">
      this is another block element
  </div>
</div>
複製代碼

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
  margin:0 auto;
}
複製代碼

this is inner text

this is another block element

若是上下的margin設置了auto，其計算值爲0spa

絕對定位

絕對定位會致使元素不在文檔流中，須要處理父元素的高度，防止高度塌陷

top、right、bottom、left的值是相對於父元素尺寸的，

absolute + transform

transform設置百分比參數是相對於自身尺寸的

<div class="container">
   this is inner text
  <div class="ele1">
    this is a block element
  </div>
</div>
複製代碼

.container{
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid grey;
  	text-align: center;
}
.ele1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    width: 100px; // 此處能夠不設置，默認爲父元素一半寬度
    border: 1px solid #888;
}
複製代碼

this is inner text

this is a block element

ele1能夠不設定width的值，此時ele1的寬度會被計算爲 父元素的一半 - 左右邊框的寬度

absolute + margin

margin設置百分比參數是相對於父元素的，因此，此方法須要子元素固定寬度，而且值設爲自身寬度的一半；

html代碼同上，替換 ele1 元素樣式中 transform: translateX(-50%) 爲 margin-left: -50px;

.ele1{
    position: absolute;
    left: 50%;
    margin-left: -50px; // 負值，設爲元素自身寬度的一半
    width: 100px; // 此處必須設置
    border: 1px solid #888;
}
複製代碼

this is inner text

this is a block element

flex

flex默認水平軸爲主軸，設置當前主軸對齊方式爲居中

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>
複製代碼

.container{
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid #888;
}
複製代碼

this is a block element

ele1未設置寬高時，子元素寬度會自動適配內容的大小，高度會填滿父元素

垂直居中

vertical-align

使行內元素盒模型與其行內元素容器垂直對齊。例如，用於垂直對齊一行文本內的圖片
垂直對齊表格單元內容

僅用於同一行內的元素水平對齊，不用於相對父元素的垂直居中，以下面示例

<div class="container">
  <div class="ele1">this is inner text</div>
  <div class="ele">inline-block</div>
</div>
複製代碼

.container{
    width: 220px;
    height: 50px;
    vertical-align: middle;
    border: 1px solid grey;
}
.ele{
   border: 1px solid grey;
   height :30px;
   display: inline-block;
}
.ele1{
  vertical-align: middle;
  display: inline-block;
}
複製代碼

this is inner text

inline-block

ele1 經過設置高度撐起了一行，ele 元素設置 vertical-align: middle 來與 ele1 對齊。可是整行元素並未相對父元素對齊。

若是父元素未設置高度或高度與行內最高元素高度一致，則會表現爲本行與父元素相對垂直居中。

也能夠設置父元素 display: table-cell來使用 vertical-align 做用於表格對齊的特性，可是並不推薦此方法

line-height

適用於單行文本、行內元素、行內塊級元素

多行文本建議使用span包裹成一個子元素

<div class="container">
    this is inner text
</div>
複製代碼

.container{
    width: 220px;
    height: 50px;
    line-height: 50px;
    border: 1px solid grey;
}
複製代碼

this is inner text

小貼士：

一般狀況下，若是一個未設置高度的div內部有文字，div的高度就會是文字的高度，可能有人會跟認爲是：文字撐開的！文字佔據空間，天然將div撐開。但實際上，根本不是文字撐開了div的高度，而是line-height！

若是一個標籤沒有定義height屬性(包括百分比高度)，那麼其最終表現的高度必定是由line-height起做用

換種理解方式，若是一個有文字的div，不設置高度，並將其行高設置0，div將不會被撐開。

<div class="container">
  <div class="ele">
    this is inner text
  </div>
  <div class="ele1">
    this is inner text
  </div>
</div>
複製代碼

.container{
    width: 220px;
    height:100px;
    border: 1px solid grey;
}
div{
   margin-top: 20px;
   border: 1px solid grey;
}
.ele{
 line-height:0;
}
複製代碼

this is inner text

所以，對於本節最開始的栗子，去掉 container的 height屬性，不會產生任何影響。能夠打開控制檯本身嘗試一下。

絕對定位

絕對定位會致使元素不在文檔流中，須要處理父元素的高度，防止高度塌陷

top、right、bottom、left的值是相對於父元素尺寸的，

absolute + transform

transform設置百分比參數是相對於自身尺寸的代碼同水平居中，css替換爲

top: 50%;
transform: translateY(-50%);  
複製代碼

absolute + margin

同水平居中，css替換爲

top: 50%;
margin-top: -50px; // 負值，設爲元素自身寬度的一半
複製代碼

absolute + margin: auto

前面說過，若是上下的margin設置了auto，其計算值爲0。這是子元素未設置絕對定位的狀況。

將子元素設置絕對定位，top、right、bottom、left都設爲0

<div class="container">
  <div class="ele">
    this is block element< /div>
</div>
複製代碼

.container{
    width: 200px;
    height: 120px;
    position: absolute;
    border: 1px solid grey;
}
.ele{
    width: 70px;
    height: 80px;
    border: 1px solid grey;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
複製代碼

this is block element

子元素必須定高定寬

flex

flex默認水平軸爲主軸，設置當前縱軸對齊方式爲居中

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>
複製代碼

.container{
    height: 200px;
    width: 220px;
    display: flex;
    align-items: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid #888;
}
複製代碼

this is a block element

> 若ele1未設置寬高，子元素寬度與高度會自動適配內容的大小，能夠直接打開控制檯試試

writing-mode

定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。

經過writing-mode讓文字的顯示變爲垂直方向，可使水平方向上的css屬性，變爲垂直方向上的屬性

<div class="container">
  <div class="ele1">
   block element
  </div>
</div>
複製代碼

.container{
    height: 200px;
    width: 200px;
    writing-mode: vertical-lr;
    border: 1px solid grey;
    text-align: center;
}
.ele1{
    display: inline-block;
    border: 1px solid #888;
}
複製代碼

block element

水平垂直居中

這個就不用講了吧

多列布局

仿window文件夾佈局

適用於內部item定寬，多個item平鋪於父元素。

內部子元素寬度固定
超出自動換行
自適應父元素寬度

<div class="parent">
  <div class="container">
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
  </div>
</div>
複製代碼

.parent{
  box-sizing: border-box;
  border: 1px solid grey;
  width: 392px;
}
.container{
    box-sizing: border-box;
    display: flex;  
    flex-wrap: wrap;
    margin-right: -10px;
}
.ele{
    box-sizing: border-box;
    background: #ccc;
    width: 90px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
}

複製代碼

element

上面示例中，多個ele水平排列，每一行顯示個數與parent的寬度有關，增長或減小parent的寬度，每行顯示個數會自動改變。能夠選中元素打開控制檯試試。

解釋：

container使用flex佈局，設置 flex-wrap: wrap; 超出折行顯示
parent寬度爲 (ele.width + ele.marginRight) * 4 - ele.marginRight 時，每行恰好顯示4個子元素。
上一條的參數能夠實現 justify-content: space-between 效果，但又不會致使某一行不夠4個時的樣式錯位
container 自己不設置寬度，利用內部元素撐開，同時設置 margin-right: -10px 會使 container在原有寬度的基礎上增長10px的大小，恰好包容每行最後一個 ele 的 marginRight

小知識：

margin的left、right爲負值時，若元素自己沒有寬度，則會增長元素寬度

元素自己有寬度，會產生位移

margin-top 爲負值，無論是否設置高度，都不會增長高度，而是會產生向上的位移

margin-bottom 爲負值的時候不會位移,而是會減小自身供css讀取的高度