CSS 定位問題

主要就是經(jīng)典的絕對定位申尤，相對定位問題滚粟。

10個文檔學布局：通過十個例子講解布局寻仗，主要涉及相對布局，絕對布局凡壤，浮動署尤。

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

三欄式布局

涉及浮動和清除浮動，主要講解“圣杯”和“雙飛翼”兩種解決方法硝烂。這兩種方法實現(xiàn)的都是三欄布局箕别，兩邊的盒子寬度固定，中間盒子自適應(yīng)钢坦，它們實現(xiàn)的效果是一樣的究孕，差別在于其實現(xiàn)的思想。

圣杯布局

圣杯：父盒子包含三個子盒子（左爹凹，中厨诸，右）

中間盒子的寬度設(shè)置為 width: 100%; 獨占一行；

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

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

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

父盒子設(shè)置左右的 padding 來為左右盒子留位置微酬；

對左右盒子使用相對布局來占據(jù) padding 的空白，避免中間盒子的內(nèi)容被左右盒子覆蓋颤陶；

雙飛翼布局

雙飛翼：父盒子包含三個子盒子（左颗管，中，右）滓走，中間的子盒子里再加一個子盒子垦江。

中間盒子的寬度設(shè)置為 width: 100%; 獨占一行；

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

在中間盒子里面再添加一個 div比吭，然后對這個 div 設(shè)置 margin-left 和 margin-right來為左右盒子留位置绽族；

圣杯和雙飛翼異同

圣杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬衩藤，中間自適應(yīng)的三欄布局吧慢，中間欄要在放在文檔流前面以優(yōu)先渲染。

兩種方法基本思路都相同：首先讓中間盒子 100% 寬度占滿同一高度的空間赏表，在左右兩個盒子被擠出中間盒子所在區(qū)域時检诗，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。接下來進行一些調(diào)整避免中間盒子的內(nèi)容被左右盒子遮擋瓢剿。

主要區(qū)別在于 如何使中間盒子的內(nèi)容不被左右盒子遮擋：

圣杯布局的方法：設(shè)置父盒子的 padding 值為左右盒子留出空位逢慌，再利用相對布局對左右盒子調(diào)整位置占據(jù) padding 出來的空位；

雙飛翼布局的方法：在中間盒子里再增加一個子盒子跋选，直接設(shè)置這個子盒子的 margin 值來讓出空位涕癣，而不用再調(diào)整左右盒子哗蜈。

簡單說起來就是雙飛翼布局比圣杯布局多創(chuàng)建了一個 div前标，但不用相對布局了，少設(shè)置幾個屬性距潘。

利用浮動實現(xiàn)

我自己使用浮動也實現(xiàn)了三欄式布局：左邊盒子左浮動炼列，右邊盒子右浮動，中間盒子利用 margin-left 和 margin-right 來為左右盒子留位置音比，同時父盒子設(shè)置 overflow: auto; 來避免子盒子溢出俭尖。

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

負 magin

簡單總結(jié)幾點：

不使用 float 的話洞翩，負 margin 元素是不會破壞頁面的文檔流稽犁。所以如果你使用負 margin 上移一個元素，所有跟隨的元素都會被上移(而 relative 定位的元素則不同骚亿，會保留原位置已亥，影響文檔流)。

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

如果你設(shè)置 margin-bottom/right 為負數(shù)，元素并不會如你所想的那樣向下/右移動俱笛，而是將后續(xù)的元素拖拉進來捆姜，覆蓋本來的元素。

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

margin-top 為負值不會增加高度泥技，只會產(chǎn)生向上位移;margin-bottom 為負值不會產(chǎn)生位移，會減少自身的供 CSS 讀取的高度磕仅，影響下方的元素位置珊豹；上下相鄰的元素兩者均為負時镊讼，效果不疊加，取負值更多的那個效果平夜。

清除浮動

清除浮動主要是為了解決高度塌陷問題蝶棋。而簡單的 clear: both 并不能解決這個問題，所以引出了許多解決方案忽妒。

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

那些年我們一起清除過的浮動：神文玩裙，把“清除浮動”定義為“閉合浮動”，把問題由來和解決方案都講清楚了段直，并且分析了各種解決方案的優(yōu)劣吃溅。

各種解決方案在上面的鏈接里有很詳細的說明了，這里就不贅述了鸯檬。大體分為兩類：

其一决侈，通過在浮動元素的末尾添加一個空元素，設(shè)置 clear: both 屬性喧务，after 偽元素其實也是通過 content 在元素的后面生成了內(nèi)容為一個點的塊級元素赖歌；

其二，通過設(shè)置父元素 overflow 或者 display: table 屬性來閉合浮動

順便補充一句功茴，clear float(例如 clear: left) 是對某個元素設(shè)置庐冯，以避免其某一邊有浮動元素，即對當前元素產(chǎn)生約束坎穿，約束的邊界為其他的浮動元素展父。對于已經(jīng)浮動的元素，設(shè)置 clear float 是無效的玲昧。

居中布局

Centering in CSS: A Complete Guide：非常全面的居中定位博客栖茉，包括各種情況下的水平居中，垂直居中和水平垂直居中方案孵延。有展示示例及相應(yīng)的 HTML 和 CSS 代碼

文章大致結(jié)構(gòu)：

水平居中

對于行內(nèi)元素(inline)：text-align: center;

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

對于多個塊級元素：對父元素設(shè)置 text-align: center;吕漂，對子元素設(shè)置 display: inline-block;；或者使用 flex 布局

垂直居中

對于行內(nèi)元素(inline)

單行：設(shè)置上下 pandding 相等隙袁；或者設(shè)置 line-height 和 height 相等

多行：設(shè)置上下 pandding 相等痰娱；或者設(shè)置 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%;，再設(shè)置 transform: translate(-50%, -50%);

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

響應(yīng)式設(shè)計

“響應(yīng)式設(shè)計（Responsive Design)” 是一種讓網(wǎng)站針對不同的瀏覽器和設(shè)備“呈現(xiàn)”不同顯示效果的策略。

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

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

RWD：

采用 CSS 的 media query 技術(shù)

流體布局（fluid grids）

自適應(yīng)的圖片/視頻等資源素材

（為小、中愿伴、大屏幕做一些優(yōu)化肺魁，目的是讓任何尺寸的屏幕空間都能得到充分利用）

AWD：

CSS media query 技術(shù)（僅針對有限幾種預設(shè)的屏幕尺寸設(shè)計）

用 JavaScript 來操作 HTML 內(nèi)容

在服務(wù)器端操作 HTML 內(nèi)容（比如為移動端減少內(nèi)容，為桌面端提供更多內(nèi)容）

Flexbox 布局

Flexbox 布局參考下面幾篇文章就可以了隔节，幾篇文章大同小異鹅经，看一兩篇就知道大概了，講的挺詳細的怎诫，在此不贅述

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

SegmentFault – Flexbox詳解

w3cplus – 圖解CSS3 Flexbox屬性

w3cplus – Flexbox——快速布局神器

最后：

“相信有很多想學前端的小伙伴瘾晃，今年年初我花了一個月整理了一份最適合2018年學習的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5等都有整理幻妓，送給每一位前端小伙伴蹦误，53763，1707這里是小白聚集地肉津，歡迎初學和進階中的小伙伴强胰。”

祝大家早日學有所成阀圾，拿到滿意offer哪廓，快速升職加薪狗唉，走上人生巔峰初烘。