資訊專欄INFORMATION COLUMN
摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。
HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯)
CSS：
樣式：
布局：
標準流(標準文檔流、普通文檔流)：盒子模型(width/height+padding+border+margin) 塊元素行內元素
浮動流：產生？影響？如何解決？
定位流：靜態定位(不定位) 相對定位 絕對定位 固定定位
JavaScript(JS)：
ECMAScript：語法
DOM：
BOM：
背景：浮動產生的初衷是為了解決圖文排版。
早期我們的網站中大量存在圖片和文字 沒有那么多絢麗的東西，比如輪播圖也是借助flash實現的。
早期的布局是通過table實現的，現在布局div+css。
浮動一開始就是為了解決圖文排版的：
如左側就是給圖片加一個樣式img{float:left}.
又稱標準文檔流 普通文檔流
說白了就是一個“默認”css布局狀態。文檔流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。
在標準文檔流中父元素的高度可以由子元素撐開
標準文檔流：
塊元素：①獨自占一行(參考目標：父元素)
①我想讓兩個li排列到一行 并且li都有寬度和高度（那么我們的處理方法把li設置為行內塊元素）
②但是由圖得知 設置完行內塊元素后 會出現間隙(在圖中的紅色區域)
③經過分析得知 紅色區域的間隙 是由代碼中li標簽換行導致的 所以我們把li放到一行
④但是我們知道 代碼在一行 不利于我們開發和后期的維護
⑤浮動橫空出世
left左浮動：那么該元素會緊貼著父元素的左邊，如果左邊已經有浮動的元素 那么他會依次向后排列
right右浮動：那么該元素會緊貼著父元素的右邊，如果右邊已經有浮動的元素 那么他會依次向后排列
.one{ /*height: 100px;*/ /*width: 100px;*/ /*浮動屬性*/ float: left; background-color: green; } .two{ float: right; background-color: blue; }
對自身：無論行內元素還是塊元素都可以設置寬高，已經破壞了該元素在標準文檔流里面的屬性
對父元素：會造成父元素的高度塌陷(在標準文檔流里面父元素高度由子元素撐開 浮動完父元素高度就不能被子元素撐開了)
清除浮動就是：解決父元素高度塌陷的問題。
清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響(父元素的高度塌陷)。
ul{ /*清除浮動方案1*/ height: 200px; border: 5px solid #000; }
由1.7.1得知使用這種方法清除浮動前提是：必須知道子元素的高度
用法：在浮動元素的緊后面添加一個空標簽給該標簽設置css樣式為clear:both;
<ul> <li class="one">111li> <li class="two">222li> <div style="clear: both;">div> ul> 測試文本
利用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">111li> <li class="two">222li> ul> 測試文本-利用偽類 body>
當然第三種解決方案已經很完美了。咱們現在說的這種是利用的另一種機制(BFC-塊級格式化上下文)實現的。
實現：給浮動元素的父元素設置以下css{overflow:hidden}.
ul{ overflow: hidden;/*BFC機制的觸發條件之一*/
border: 5px solid #000; }
在講 BFC 之前，我們先來了解一下常見的定位方案，定位方案是控制元素的布局，有三種常見方案:
普通流 (normal flow)
|
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中，行內元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。 |
浮動流 (float)
|
在浮動布局中，元素首先按照普通流的位置出現，然后根據浮動的方向盡可能的向左邊或右邊偏移，其效果與印刷排版中的文本環繞相似。 |
定位流(position)
|
在絕對/固定定位布局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響，而元素具體的位置由絕對定位的坐標決定。 |
什么是BFC呢？Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。這個css布局的一種機制。具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。
通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
滿足下列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 |
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。
定位屬性的值：
|
屬性 |
屬性值 |
含義 |
|
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為準。
固定定位是定位屬性的一種，他的參照物是可視窗口(可以看的見的窗口)。
圖中藍色框框住的地方就是咱們俗稱的可視窗口
我們常見的比如：右側固定導航、京東樓梯導航、返回頂部···這些都是利用的固定定位(IE6固定定位不兼容)。
固定定位會脫離標準流，固定定位的參考點，是瀏覽器，固定定位無法以某個盒子作為參考點。
作用：實現盒子固定在瀏覽器可視窗口內
通過設置偏移量進行控制移動的位置，定位偏移量屬性：
就是說無論頁面怎么滾動他就是根據可視窗口定位的雷打不動。如圖：雖然滾動條滾動了但是div的位置依然不動，就是這么神奇。網頁中右側固定導航欄、返回頂部，都是利用這個特性實現的。
div { width: 50px; height: 50px; background-color: red; /*固定定位-可視窗口*/ position: fixed; left: 50px; top: 50px; }
相對定位的元素，會在原來的位置“留坑”，不管這個盒子被移動到什么地方，這個坑永遠存在，并且盒子的margin會影響別人，“形影分離”。
相對定位的參考點是自身。
注意事項：
|
①相對定位不會破壞標準文檔流，占標準流的位置，并且不能改變盒子顯示模式 ②那么①的意思是說：相對定位會在原有位置留下一個”坑”(占著茅坑不拉屎) ③相對定位的參考點：以自身為參考物（起點），就是相對于原來自己所在的位置進行移動 ④定位偏移屬性最好是一對，從上下位移屬性選其一，從左右位移屬性選其一。 |
應用場景：相對定位一般不使用，它經常會配合絕對定位使用。
3.3絕對定位absoult
絕對定位的參考點：有定位屬性(relative,absult,fixed)的祖先元素(包括父元素、父元素的父元素、父元素的父元素的父元素···),如果說找到最外層都沒有發現定位屬性,那么它參考body(頁面)。
如果bottom定位，就是瀏覽器首屏的左下角或右下角。
層級屬性只有定位元素才具備，他是用來提升層級的。
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; }
在堆疊上下文（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壓著因為父元素已經絕對他們自身的層級了。
·方法一：
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：
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