web前端大神整理：CSS 佈局經典問題

本文來自前端大神的整理，主要對 CSS 佈局中常見的經典問題進行簡單說明，並提供相關解決方案的參考連接，涉及到三欄式佈局，負 margin，清除浮動，居中佈局，響應式設計，Flexbox 佈局，等等。

 

CSS 基礎知識

 

下面幾個入門教程不錯：

 

• 幕課網 – HTML+CSS基礎課程：偏基礎，能夠在線練習和預覽

• MDN – CSS入門教程: MDN 的官方文檔

• 學習 CSS 佈局：排版和配色特別舒服，簡短但不深刻，適合概覽入門

 

CSS 定位問題

 

主要就是經典的絕對定位，相對定位問題。

 

• 10個文檔學佈局：經過十個例子講解佈局，主要涉及相對佈局，絕對佈局，浮動。

• 百度前端學院筆記 – 理解絕對定位：文章自己通常，幾篇參考文獻比較詳細

• HTML和CSS高級指南之二——定位詳解（譯文）：介紹浮動的使用，詳細介紹定位的技巧，包括如何準確的給元素在 X 軸、Y 軸和 Z 軸定位

 

三欄式佈局

 

涉及浮動和清除浮動，主要講解「聖盃」和「雙飛翼」兩種解決方法。這兩種方法實現的都是三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，它們實現的效果是同樣的，差異在於其實現的思想。

 

聖盃佈局

 

聖盃：父盒子包含三個子盒子（左，中，右）

 

• 中間盒子的寬度設置爲 width: 100%; 獨佔一行；

• 使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；

  • .left {margin-left:-100%;} 把左邊的盒子拉上去

  • .right {margin-left：-右邊盒子寬度px;} 把右邊的盒子拉上去

• 父盒子設置左右的 padding 來爲左右盒子留位置；

• 對左右盒子使用相對佈局來佔據 padding 的空白，避免中間盒子的內容被左右盒子覆蓋；

 

<!-- 聖盃的 HTML 結構 -->

<div class="container">

    <!-- 中間的 div 必須寫在最前面 -->

    <div class="middle">中間彈性區</div>

    <div class="left">左邊欄</div>

    <div class="right">右邊欄</div>

</div>

 

雙飛翼佈局

 

雙飛翼：父盒子包含三個子盒子（左，中，右），中間的子盒子裏再加一個子盒子。

 

• 中間盒子的寬度設置爲 width: 100%; 獨佔一行；

• 使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；

• 在中間盒子裏面再添加一個 div，而後對這個 div 設置 margin-left 和 margin-right來爲左右盒子留位置；

 

<!-- 雙飛翼的 HTML 結構 -->

<div class="container">

    <!-- 中間的 div 必須寫在最前面 -->

    <div class="middle">

         <div class="middle-inner">中間彈性區</div>

    </div>

    <div class="left">左邊欄</div>

    <div class="right">右邊欄</div>

</div>

 

聖盃和雙飛翼異同

 

聖盃佈局和雙飛翼佈局解決的問題是同樣的，都是兩邊定寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。

 

• 兩種方法基本思路都相同：首先讓中間盒子 100% 寬度佔滿同一高度的空間，在左右兩個盒子被擠出中間盒子所在區域時，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。接下來進行一些調整避免中間盒子的內容被左右盒子遮擋。

• 主要區別在於 如何使中間盒子的內容不被左右盒子遮擋：

  • 聖盃佈局的方法：設置父盒子的 padding 值爲左右盒子留出空位，再利用相對佈局對左右盒子調整位置佔據 padding 出來的空位；

  • 雙飛翼佈局的方法：在中間盒子裏再增長一個子盒子，直接設置這個子盒子的 margin 值來讓出空位，而不用再調整左右盒子。

 

簡單提及來就是雙飛翼佈局比聖盃佈局多建立了一個 div，但不用相對佈局了，少設置幾個屬性。

 

利用浮動實現

 

我本身使用浮動也實現了三欄式佈局：左邊盒子左浮動，右邊盒子右浮動，中間盒子利用 margin-left 和 margin-right 來爲左右盒子留位置，同時父盒子設置 overflow: auto; 來避免子盒子溢出。

 

<!-- 浮動實現的 HTML 結構 -->

<div class="container">

    <div class="left">左邊欄</div>

    <div class="right">右邊欄</div>

    <!-- 中間的 div 必須寫在最後面 -->

    <div class="middle">中間彈性區</div>

</div>

 

三欄式佈局參考下面幾個連接:

 

• CSS三欄佈局——中間固定兩邊自適應寬度： w3cplus 的文章，使用了雙飛翼和浮動實現兩側定寬、中間自適應，也實現了兩側自適應、中間定寬

• 簡書 – 聖盃佈局和雙飛翼佈局（前端面試必看）：只講了聖盃，不過特別詳細

• In Search of the Holy Grail：聖盃佈局的來源

• 百度前端學院筆記 – 三欄式佈局之雙飛翼與聖盃：百度前端學院學員的前端學習筆記

 

三欄式佈局涉及到負 magin 和 清除浮動的問題。

 

負 magin

 

這裏引出了「負 margin」的問題：

 

• 負margin用法權威指南：The Definitive Guide to Using Negative Margins 的譯文,介紹了負 magin 的一些性質和不少實用技巧

• 簡書 – margin爲負值產生的影響和常見佈局應用：包括對自身的影響，對文檔流的影響，以及一些在佈局中的應用技巧(好比去除列表右邊框，負邊距+定位實現水平垂直居中，去除列表最後一個 li 元素的 border-bottom，多列等高)

• 博客園 – CSS佈局奇淫巧計之-強大的負邊距：和上文內容差很少

 

簡單總結幾點：

 

• 不使用 float 的話，負 margin 元素是不會破壞頁面的文檔流。因此若是你使用負 margin 上移一個元素，全部跟隨的元素都會被上移(而 relative 定位的元素則不一樣，會保留原位置，影響文檔流)。

• 當 static 元素的 margin-top/margin-left 被賦予負值時，元素將被拉進指定的方向。

• 若是你設置 margin-bottom/right 爲負數，元素並不會如你所想的那樣向下/右移動，而是將後續的元素拖拉進來，覆蓋原本的元素。

• 當元素不存在 width 屬性或者 width: auto 的時候，負 margin 會增長元素的寬度.

• margin-top 爲負值不會增長高度，只會產生向上位移;margin-bottom 爲負值不會產生位移，會減小自身的供 CSS 讀取的高度，影響下方的元素位置；上下相鄰的元素二者均爲負時，效果不疊加，取負值更多的那個效果。

 

清除浮動

 

清除浮動主要是爲了解決高度塌陷問題。而簡單的 clear: both 並不能解決這個問題，因此引出了許多解決方案。

 

• StackOverflow – What methods of ‘clearfix’ can I use?：清除浮動黑科技完整解讀

• 那些年咱們一塊兒清除過的浮動：神文，把「清除浮動」定義爲「閉合浮動」，把問題由來和解決方案都講清楚了，而且分析了各類解決方案的優劣。

 

各類解決方案在上面的連接裏有很詳細的說明了，這裏就不贅述了。大致分爲兩類：

 

其一，經過在浮動元素的末尾添加一個空元素，設置 clear: both 屬性，after 僞元素其實也是經過 content 在元素的後面生成了內容爲一個點的塊級元素；

其二，經過設置父元素 overflow 或者 display: table 屬性來閉合浮動

 

順便補充一句，clear float(例如 clear: left) 是對某個元素設置，以免其某一邊有浮動元素，即對當前元素產生約束，約束的邊界爲其餘的浮動元素。對於已經浮動的元素，設置 clear float 是無效的。

 

居中佈局

 

Centering in CSS: A Complete Guide：很是全面的居中定位博客，包括各類狀況下的水平居中，垂直居中和水平垂直居中方案。有展現示例及相應的 HTML 和 CSS 代碼

文章大體結構：

 

• 水平居中

  • 對於行內元素(inline)：text-align: center;

  • 對於塊級元素(block)：設置寬度且 marigin-left 和 margin-right 是設成 auto

  • 對於多個塊級元素：對父元素設置 text-align: center;，對子元素設置 display: inline-block;；或者使用 flex 佈局

• 垂直居中

  • 對於行內元素(inline)

    • 單行：設置上下 pandding 相等；或者設置 line-height 和 height 相等

    • 多行：設置上下 pandding 相等；或者設置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 佈局；或者使用僞元素

  • 對於塊級元素(block)：下面前兩種方案，父元素需使用相對佈局

    • 已知高度：子元素使用絕對佈局 top: 50%;，再用負的 margin-top 把子元素往上拉一半的高度

    • 未知高度：子元素使用絕對佈局 position: absolute; top: 50%; transform: translateY(-50%);

    • 使用 Flexbox：選擇方向，justify-content: center;

• 水平垂直居中

  • 定高定寬：先用絕對佈局 top: 50%; left: 50%;，再用和寬高的一半相等的負 margin 把子元素回拉

  • 高度和寬度未知：先用絕對佈局 top: 50%; left: 50%;，再設置 transform: translate(-50%, -50%);

  • 使用 Flexbox：justify-content: center; align-items: center;

 

響應式設計

 

「響應式設計（Responsive Design)」 是一種讓網站針對不一樣的瀏覽器和設備「呈現」不一樣顯示效果的策略。

 

媒體查詢(Media Queries)是作此事所需的最強大的工具。

 

注： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD

 

RWD：

 

• 採用 CSS 的 media query 技術

• 流體佈局（fluid grids）

• 自適應的圖片/視頻等資源素材

 

（爲小、中、大屏幕作一些優化，目的是讓任何尺寸的屏幕空間都能獲得充分利用）

 

AWD：

 

• CSS media query 技術（僅針對有限幾種預設的屏幕尺寸設計）

• 用 JavaScript 來操做 HTML 內容

• 在服務器端操做 HTML 內容（好比爲移動端減小內容，爲桌面端提供更多內容）

 

以上 RWD 和 AWD 解釋引自 知乎 @屹峯

 

能夠參考 Bootstrap 的網格系統：http://getbootstrap.com/css/#grid-less

 

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).

 

本身實現網格系統： Creating Your Own CSS Grid System

 

Flexbox 佈局

 

Flexbox 佈局參考下面幾篇文章就能夠了，幾篇文章大同小異，看一兩篇就知道大概了，講的挺詳細的，在此不贅述

 

• w3cplus – 一個完整的Flexbox指南：A Complete Guide to Flexbox 的譯文

• SegmentFault – Flexbox詳解

• w3cplus – 圖解CSS3 Flexbox屬性

• w3cplus – Flexbox——快速佈局神器

  做者：brianway

  brianway.github.io/2017/05/18/css-layout-classical-problems/

• web前端新手學習平臺：知海匠庫http://www.zhihaijiangku.com