一、浮動
1.1 各個語言的主要知識點
HTML：標籤語義化(那麼怎麼樣佈局才是合理的?沒有絕對的對和錯)
CSS：
樣式：
佈局：
標準流(標準文件流、普通文件流)：盒子模型(width/height+padding+border+margin) 塊元素行內元素
浮動流：產生？影響？如何解決？
定位流：靜態定位(不定位) 相對定位 絕對定位 固定定位
JavaScript(JS)：
ECMAScript：語法
DOM：
BOM：
1.2 浮動產生的背景？
背景：浮動產生的初衷是為了解決圖文排版。
早期我們的網站中大量存在圖片和文字 沒有那麼多絢麗的東西，比如輪播圖也是藉助flash實現的。
早期的佈局是通過table實現的，現在佈局div+css。
浮動一開始就是為了解決圖文排版的：
如左側就是給圖片加一個樣式img{float:left}.
1.3 標準流
又稱標準文件流 普通文件流
說白了就是一個“預設”css佈局狀態。文件流指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。
在標準文件流中父元素的高度可以由子元素撐開
標準文件流：
塊元素：①獨自佔一行(參考目標：父元素)
1.4 浮動的演變過程
①我想讓兩個li排列到一行 並且li都有寬度和高度（那麼我們的處理方法把li設定為行內塊元素）
②但是由圖得知 設定完行內塊元素後 會出現間隙(在圖中的紅色區域)
③經過分析得知 紅色區域的間隙 是由程式碼中li標籤換行導致的 所以我們把li放到一行
④但是我們知道 程式碼在一行 不利於我們開發和後期的維護
⑤浮動橫空出世
1.5 浮動屬性
left左浮動：那麼該元素會緊貼著父元素的左邊，如果左邊已經有浮動的元素 那麼他會依次向後排列
right右浮動：那麼該元素會緊貼著父元素的右邊，如果右邊已經有浮動的元素 那麼他會依次向後排列
.one{ /*height: 100px;*/ /*width: 100px;*/ /*浮動屬性*/ float: left; background-color: green; } .two{ float: right; background-color: blue; }
1.6 浮動帶來的影響
對自身：無論行內元素還是塊元素都可以設定寬高，已經破壞了該元素在標準文件流裡面的屬性
對父元素：會造成父元素的高度塌陷(在標準文件流裡面父元素高度由子元素撐開 浮動完父元素高度就不能被子元素撐開了)
1.7 清除浮動
清除浮動就是：解決父元素高度塌陷的問題。
清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響(父元素的高度塌陷)。
1.7.1 給父元素加高度
ul{ /*清除浮動方案1*/ height: 200px; border: 5px solid #000; }
1.7.2 clear:both;
由1.7.1得知使用這種方法清除浮動前提是：必須知道子元素的高度
用法：在浮動元素的緊後面新增一個空標籤給該標籤設定css樣式為clear:both;
<ul> <li class="one">111</li> <li class="two">222</li> <!--行內樣式等價於你在css中寫div{clear:both;}--> <div style="clear: both;"></div> </ul> 測試文字
1.7.3 利用偽元素
利用clear:both;清除浮動帶來的影響，是我們之前的主流寫法。但是隨著我們們科技的進步，公司越來越對SEO優化愈加重視。搜尋引擎爬取是會認為這是一個廢標籤（搜尋引擎會不開心 她不開心就會導致你的頁面質量下降）
所以現在主流的清除浮動是利用偽類清除 寫一個清除浮動的類 然後把這個類加給浮動元素的父元素。
<style type="text/css"> /*before after*/ .clearfix:after{ content: ""; clear: both ; display: block; } .clearfix{ *zoom: 1;/*相容IE67*/ } </style> <body> <ul class="clearfix"> <li class="one">111</li> <li class="two">222</li> </ul> 測試文字-利用偽類 </body>
1.7.4 overflow:hidden;
當然第三種解決方案已經很完美了。我們們現在說的這種是利用的另一種機制(BFC-塊級格式化上下文)實現的。
實現：給浮動元素的父元素設定以下css{overflow:hidden}.
ul{ overflow: hidden;/*BFC機制的觸發條件之一*/
border: 5px solid #000; }
2.1 BFC
2.1.1 概念
在講 BFC 之前，我們先來了解一下常見的定位方案，定位方案是控制元素的佈局，有三種常見方案:
普通流 (normal flow)
|
在普通流中，元素按照其在 HTML 中的先後位置至上而下佈局，在這個過程中，行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素預設都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文件中的位置決定。 |
浮動流 (float)
|
在浮動佈局中，元素首先按照普通流的位置出現，然後根據浮動的方向儘可能的向左邊或右邊偏移，其效果與印刷排版中的文字環繞相似。 |
定位流(position)
|
在絕對/固定定位佈局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響，而元素具體的位置由絕對定位的座標決定。 |
什麼是BFC呢？Formatting context(格式化上下文) 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。這個css佈局的一種機制。具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器所沒有的一些特性。
通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
2.1.1 滿足條件
滿足下列CSS宣告之一的元素便會生成BFC：
1、根元素或其它包含它的元素
2、float的值不為none；
3、overflow的值不為visible；
4、position的值不為static；
5、display的值為inline-block、table-cell、table-caption；
6、flex boxes (元素的display: flex或inline-flex)；
注：也有人認為display: table能生成BFC，我認為最主要原因是table會預設生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC。
|
條件 |
值 |
|
根元素/根節點 |
html |
|
float |
left、right |
|
overfloow |
hidden |
|
display |
inline-block、table-cell、table-caption |
|
position |
fixed、absoult |
2.1.3BFC 特性及應用
- 同一個 BFC 下外邊距會發生摺疊-後面詳細闡述
- BFC 可以包含浮動的元素-清除浮動
- 3.BFC 可以阻止元素被浮動元素覆蓋-後續課程深入
三、定位
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也很讓人吃驚。
定位屬性的值：
|
屬性 |
屬性值 |
含義 |
|
position |
static |
靜態定位(不定位|預設值) |
|
position |
relative |
相對定位 |
|
position |
absoult |
絕對定位 |
|
position |
fixed |
固定定位 |
無論是哪種定位都具有5個屬性：
|
屬性 |
備註 |
單位 |
|
left |
左 |
px,% |
|
top |
上 |
px,% |
|
right |
右 |
px,% |
|
bottom |
下 |
px,% |
|
z-index |
層級 |
如果有人同時寫了left和right，那麼以left為準；同時寫了top和bottom那麼以top為準。
3.1固定定位fixed
固定定位是定位屬性的一種，他的參照物是可視視窗(可以看的見的視窗)。
圖中藍色框框住的地方就是我們們俗稱的可視視窗
3.1.1應用場景
我們常見的比如：右側固定導航、京東樓梯導航、返回頂部···這些都是利用的固定定位(IE6固定定位不相容)。
3.1.2原理講解
固定定位會脫離標準流，固定定位的參考點，是瀏覽器，固定定位無法以某個盒子作為參考點。
作用：實現盒子固定在瀏覽器可視視窗內
通過設定偏移量進行控制移動的位置，定位偏移量屬性：
就是說無論頁面怎麼滾動他就是根據可視視窗定位的雷打不動。如圖：雖然滾動條滾動了但是div的位置依然不動，就是這麼神奇。網頁中右側固定導航欄、返回頂部，都是利用這個特性實現的。
div { width: 50px; height: 50px; background-color: red; /*固定定位-可視視窗*/ position: fixed; left: 50px; top: 50px; }
3.2相對定位relative
相對定位的元素，會在原來的位置“留坑”，不管這個盒子被移動到什麼地方，這個坑永遠存在，並且盒子的margin會影響別人，“形影分離”。
相對定位的參考點是自身。
注意事項：
|
①相對定位不會破壞標準文件流，佔標準流的位置，並且不能改變盒子顯示模式 ②那麼①的意思是說：相對定位會在原有位置留下一個”坑”(佔著茅坑不拉屎) ③相對定位的參考點：以自身為參考物（起點），就是相對於原來自己所在的位置進行移動 ④定位偏移屬性最好是一對，從上下位移屬性選其一，從左右位移屬性選其一。 |
應用場景：相對定位一般不使用，它經常會配合絕對定位使用。
3.3絕對定位absoult
絕對定位的參考點：有定位屬性(relative,absult,fixed)的祖先元素(包括父元素、父元素的父元素、父元素的父元素的父元素···),如果說找到最外層都沒有發現定位屬性,那麼它參考body(頁面)。
如果bottom定位，就是瀏覽器首屏的左下角或右下角。
3.4層級屬性z-index
3.4.1 基本原理
層級屬性只有定位元素才具備，他是用來提升層級的。
z-index他的取值是數值，數值越大層級越高。預設是0.
.mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; /*數值越大層級越高*/ /*z-index: 99;*/ } a { z-index: -99; }
3.4.2z-index堆疊規則
在堆疊上下文（stacking context）中 ，子元素的堆疊順序還是按照上述規則。重點是，子元素的z-index值只在父元素範圍內有效。子堆疊上下文被看做是父堆疊上下文中一個獨立的模組，相鄰的堆疊上下文完全沒關係。
總結幾句：
渲染的時候，先確定小的stacking context中的順序，一個小的stacking context確定了以後再將其放在父stacking context中堆疊。有種由內而外，由小及大的感覺。
如圖紅色盒子z-index:99綠色盒子z-index:9,span1的z-index:-999,span2的z-index9999。但是span2還是被span1壓著因為父元素已經絕對他們自身的層級了。
3.5 盒子居中
·方法一：
div { width: 300px; height: 200px; background-color: red; position: absolute; left: 50%; top: 50%; /* left: -150px; */ margin-left: -150px; margin-top: -100px; }
top:50%;指的是元素的上邊線是50%的位置
left:50;指的是元素的左邊線是50%的位置
所以要往回拉一半自身的寬度和高度。
·方法二：
div { width: 312px; height: 275px; background-color: red; /* 下面這種盒子居中的方案 很完美可以不受盒子寬高的限制 但是不好理解 */ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 五馬分屍 */ }
四、Hack
Hack，別被名字嚇到了！ Hack就是針對不同的瀏覽器去寫不同的HTML、CSS樣式，從而讓各瀏覽器能達到一致的渲染效果。
Hack分為兩大類： HTML hack 和 CSS hack
HTML HACK：
<!--[if lte IE 9]> <![endif]-->
CSS HACK又分為兩類： 值Hack 和 選擇器Hack
值Hack：
/* IE 6 */ .selector { _color: blue; } .selector { -color: blue; } /* IE 6/7 - any combination of these characters: ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */ .selector { !color: blue; } .selector { $color: blue; } .selector { &color: blue; } .selector { *color: blue; } /* IE 8/9 */ .selector { color: blue\0/; } /* IE 6/7/8/9/10 */ .selector { color: blue\9; }
選擇器Hack：
/* IE 6 and below */
* html .selector {}
/* IE 7 and below */
.selector, {}
/* Everything but IE 6 */
html > body .selector {}
/* must go at the END of all rules */
/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}
IE6的問題
選擇器： 不支援連寫，比如div.big.green，其他我們學習的7種選擇器，IE6支援良好，權重計算良好。
盒模型： 如果不寫DTD，那麼IE6的盒模型就是內減的，而不是外擴的。 不支援小於一個文字高度的盒子
浮動： 後面標準流元素不鑽入 overflow:hidden;不支援，我們要觸發hasLayout機制 雙倍margin 3px bug