CSS 定位問(wèn)題

主要就是經(jīng)典的絕對(duì)定位，相對(duì)定位問(wèn)題幻碱。

10個(gè)文檔學(xué)布局：通過(guò)十個(gè)例子講解布局收班，主要涉及相對(duì)布局摔桦，絕對(duì)布局承疲，浮動(dòng)燕鸽。

百度前端學(xué)院筆記 – 理解絕對(duì)定位：文章本身一般啊研，幾篇參考文獻(xiàn)比較詳細(xì)

HTML和CSS高級(jí)指南之二——定位詳解（譯文）：介紹浮動(dòng)的使用鸥拧，詳細(xì)介紹定位的技巧富弦，包括如何準(zhǔn)確的給元素在 X 軸沟娱、Y 軸和 Z 軸定位

三欄式布局

涉及浮動(dòng)和清除浮動(dòng)，主要講解“圣杯”和“雙飛翼”兩種解決方法腕柜。這兩種方法實(shí)現(xiàn)的都是三欄布局济似，兩邊的盒子寬度固定，中間盒子自適應(yīng)盏缤，它們實(shí)現(xiàn)的效果是一樣的砰蠢，差別在于其實(shí)現(xiàn)的思想。

圣杯布局

圣杯：父盒子包含三個(gè)子盒子（左唉铜，中台舱，右）

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

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

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

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

父盒子設(shè)置左右的 padding 來(lái)為左右盒子留位置；

對(duì)左右盒子使用相對(duì)布局來(lái)占據(jù) padding 的空白幻枉，避免中間盒子的內(nèi)容被左右盒子覆蓋碰声；

雙飛翼布局

雙飛翼：父盒子包含三個(gè)子盒子（左，中熬甫，右）胰挑，中間的子盒子里再加一個(gè)子盒子。

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

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

在中間盒子里面再添加一個(gè) div，然后對(duì)這個(gè) div 設(shè)置 margin-left 和 margin-right來(lái)為左右盒子留位置郑象；

圣杯和雙飛翼異同

圣杯布局和雙飛翼布局解決的問(wèn)題是一樣的贡这，都是兩邊定寬，中間自適應(yīng)的三欄布局厂榛，中間欄要在放在文檔流前面以優(yōu)先渲染盖矫。

兩種方法基本思路都相同：首先讓中間盒子 100% 寬度占滿同一高度的空間丽惭，在左右兩個(gè)盒子被擠出中間盒子所在區(qū)域時(shí)，使用 margin-left 的負(fù)值將左右兩個(gè)盒子拉回與中間盒子同一高度的空間辈双。接下來(lái)進(jìn)行一些調(diào)整避免中間盒子的內(nèi)容被左右盒子遮擋责掏。

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

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

雙飛翼布局的方法：在中間盒子里再增加一個(gè)子盒子换衬，直接設(shè)置這個(gè)子盒子的 margin 值來(lái)讓出空位，而不用再調(diào)整左右盒子证芭。

簡(jiǎn)單說(shuō)起來(lái)就是雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè) div瞳浦，但不用相對(duì)布局了，少設(shè)置幾個(gè)屬性檩帐。

利用浮動(dòng)實(shí)現(xiàn)

我自己使用浮動(dòng)也實(shí)現(xiàn)了三欄式布局：左邊盒子左浮動(dòng)术幔，右邊盒子右浮動(dòng)湃密，中間盒子利用 margin-left 和 margin-right 來(lái)為左右盒子留位置，同時(shí)父盒子設(shè)置 overflow: auto; 來(lái)避免子盒子溢出四敞。

三欄式布局參考下面幾個(gè)鏈接:

CSS三欄布局——中間固定兩邊自適應(yīng)寬度： w3cplus 的文章泛源，使用了雙飛翼和浮動(dòng)實(shí)現(xiàn)兩側(cè)定寬、中間自適應(yīng)忿危，也實(shí)現(xiàn)了兩側(cè)自適應(yīng)达箍、中間定寬

簡(jiǎn)書 – 圣杯布局和雙飛翼布局（前端面試必看）：只講了圣杯，不過(guò)特別詳細(xì)

In Search of the Holy Grail：圣杯布局的來(lái)源

百度前端學(xué)院筆記 – 三欄式布局之雙飛翼與圣杯：百度前端學(xué)院學(xué)員的前端學(xué)習(xí)筆記

三欄式布局涉及到負(fù) magin 和 清除浮動(dòng)的問(wèn)題铺厨。

負(fù) magin

這里引出了“負(fù) margin”的問(wèn)題：

負(fù)margin用法權(quán)威指南：The Definitive Guide to Using Negative Margins 的譯文,介紹了負(fù) magin 的一些性質(zhì)和很多實(shí)用技巧

簡(jiǎn)書 – margin為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用：包括對(duì)自身的影響缎玫，對(duì)文檔流的影響，以及一些在布局中的應(yīng)用技巧(比如去除列表右邊框解滓，負(fù)邊距+定位實(shí)現(xiàn)水平垂直居中赃磨，去除列表最后一個(gè) li 元素的 border-bottom，多列等高)

博客園 – CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距：和上文內(nèi)容差不多

簡(jiǎn)單總結(jié)幾點(diǎn)：

不使用 float 的話洼裤，負(fù) margin 元素是不會(huì)破壞頁(yè)面的文檔流邻辉。所以如果你使用負(fù) margin 上移一個(gè)元素，所有跟隨的元素都會(huì)被上移(而 relative 定位的元素則不同腮鞍，會(huì)保留原位置值骇，影響文檔流)。

當(dāng) static 元素的 margin-top/margin-left 被賦予負(fù)值時(shí)移国，元素將被拉進(jìn)指定的方向吱瘩。

如果你設(shè)置 margin-bottom/right 為負(fù)數(shù)，元素并不會(huì)如你所想的那樣向下/右移動(dòng)迹缀，而是將后續(xù)的元素拖拉進(jìn)來(lái)使碾，覆蓋本來(lái)的元素蜜徽。

當(dāng)元素不存在 width 屬性或者 width: auto 的時(shí)候，負(fù) margin 會(huì)增加元素的寬度.

margin-top 為負(fù)值不會(huì)增加高度部逮，只會(huì)產(chǎn)生向上位移;margin-bottom 為負(fù)值不會(huì)產(chǎn)生位移娜汁，會(huì)減少自身的供 CSS 讀取的高度，影響下方的元素位置兄朋；上下相鄰的元素兩者均為負(fù)時(shí)掐禁，效果不疊加，取負(fù)值更多的那個(gè)效果颅和。

清除浮動(dòng)

清除浮動(dòng)主要是為了解決高度塌陷問(wèn)題傅事。而簡(jiǎn)單的 clear: both 并不能解決這個(gè)問(wèn)題，所以引出了許多解決方案峡扩。

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

那些年我們一起清除過(guò)的浮動(dòng)：神文蹭越，把“清除浮動(dòng)”定義為“閉合浮動(dòng)”，把問(wèn)題由來(lái)和解決方案都講清楚了教届，并且分析了各種解決方案的優(yōu)劣响鹃。

各種解決方案在上面的鏈接里有很詳細(xì)的說(shuō)明了，這里就不贅述了案训。大體分為兩類：

其一买置，通過(guò)在浮動(dòng)元素的末尾添加一個(gè)空元素，設(shè)置 clear: both 屬性强霎，after 偽元素其實(shí)也是通過(guò) content 在元素的后面生成了內(nèi)容為一個(gè)點(diǎn)的塊級(jí)元素忿项；

其二，通過(guò)設(shè)置父元素 overflow 或者 display: table 屬性來(lái)閉合浮動(dòng)

順便補(bǔ)充一句城舞，clear float(例如 clear: left) 是對(duì)某個(gè)元素設(shè)置轩触，以避免其某一邊有浮動(dòng)元素，即對(duì)當(dāng)前元素產(chǎn)生約束家夺，約束的邊界為其他的浮動(dòng)元素脱柱。對(duì)于已經(jīng)浮動(dòng)的元素，設(shè)置 clear float 是無(wú)效的秦踪。

居中布局

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

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

水平居中

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

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

對(duì)于多個(gè)塊級(jí)元素：對(duì)父元素設(shè)置 text-align: center;柠逞，對(duì)子元素設(shè)置 display: inline-block;；或者使用 flex 布局

垂直居中

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

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

多行：設(shè)置上下 pandding 相等板壮；或者設(shè)置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局合住；或者使用偽元素

對(duì)于塊級(jí)元素(block)：下面前兩種方案绰精，父元素需使用相對(duì)布局

已知高度：子元素使用絕對(duì)布局 top: 50%;撒璧，再用負(fù)的 margin-top 把子元素往上拉一半的高度

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

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

水平垂直居中

定高定寬：先用絕對(duì)布局 top: 50%; left: 50%;笨使，再用和寬高的一半相等的負(fù) margin 把子元素回拉

高度和寬度未知：先用絕對(duì)布局 top: 50%; left: 50%;卿樱，再設(shè)置 transform: translate(-50%, -50%);

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

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

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

媒體查詢(Media Queries)是做此事所需的最強(qiáng)大的工具硫椰。

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

RWD：

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

流體布局（fluid grids）

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

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

AWD：

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

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

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

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

可以參考 Bootstrap 的網(wǎng)格系統(tǒng)：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).

自己實(shí)現(xiàn)網(wǎng)格系統(tǒng)： Creating Your Own CSS Grid System

Flexbox 布局

Flexbox 布局參考下面幾篇文章就可以了奕翔，幾篇文章大同小異裕寨，看一兩篇就知道大概了，講的挺詳細(xì)的派继，在此不贅述

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

SegmentFault – Flexbox詳解

w3cplus – 圖解CSS3 Flexbox屬性

w3cplus – Flexbox——快速布局神器

最后：“相信有很多想學(xué)前端的小伙伴宾袜，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理驾窟，送給每一位前端小伙伴试和，53763，1707這里是小白聚集地纫普，歡迎初學(xué)和進(jìn)階中的小伙伴『们”

祝大家早日學(xué)有所成昨稼，拿到滿意offer，快速升職加薪拳锚，走上人生巔峰假栓。
原文：https://www.qdfuns.com/article/51352/efb650bec46bbc6cd918bb848f435d1b.html