1. 程式人生 > >web前端大神整理:CSS 布局經典問題

web前端大神整理:CSS 布局經典問題

ica 新手學習 ron arc 利用 一個 補充 視頻 大屏

本文來自前端大神的整理,主要對 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

web前端大神整理:CSS 布局經典問題