當對乙個文件進行布局的時候，瀏覽器的渲染引擎會根據盒模型將所有元素表示為乙個個矩形的盒子，css 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）
每個盒子有4個區域：從內到外是content、padding、border、margin。margin區域用於分開相鄰元素。
border使用box-sizing來指定要使用的盒模型。
box-sizing：content-box為標準盒子模型，可通過（min、max）height、width來控制內容區域的大小。
box-sizing：border-box為ie盒子模型，通過（min、max）height、width來控制邊框區域的大小。常用於避免padding和border造成的元素顯示的大小改變。
盒子的背景會延申到邊框外延，可通過background-clip來改變。
塊級元素(block)特性：
總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裡面文字或的大小;
內聯塊元素（display:inline-block）：表現為同行顯示並可修改寬高內外邊距等屬性。
inline-block常用於將div元素並列顯示，相比於使用float、position，不需要去除環形圍繞clear。
inline-block並列顯示的div元素vertical-align預設為bottom，div元素間的換行符會產生縫隙。
inline-block還常用於水平選單，用於li或a標籤。
產生原因：html中的換行符、空格符、製表符等空白符，字型大小不為0的情況下，空白符佔據一定寬度，使用inline-block會產生元素間的空隙。
惆悵
淡定
惆悵淡定
惆悵
淡定
有條件hack，屬性hack，選擇符hack。
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。
區別：a. 優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給
b. 漸進增強則是從乙個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶
有opacity屬性的所有後代元素都會繼承 opacity 屬性，而rgba後代元素不會繼承不透明屬性
布局的時候，常會用到float、負margin、relative定位、transform的translate，還有flex彈性盒子、grid網格布局，方法很多。
三欄布局（聖杯布局）
左右兩欄定寬，中間主體自適應寬度，優先渲染主體部分。
基本思路：主體部分放前面，三欄左浮動，將左右的padding設為左右兩欄的寬度，使用負外邊距和相對布局移動左右兩欄到主體左右的padding區域。
細節：box-sizing要設定為boeder-box,這樣各欄border和padding的調整不會影響整體布局。
父容器要設定min-width,要計算，如果設定小了，在小型裝置上布局會崩掉。
我放在codepen上的**，可以自己fork乙個調一下感受。
可以改父容器的width來模擬小型裝置。
**：
header
okleft
right
footer
div
.body
#container
#container .column
#center
#left
#right
#footer
不同的方案各有優劣，參考原文說明，在codepen上自行調整體會。
必備前端知識 二css
2.css cascading style sheets 層疊樣式表 層疊 多個樣式可以作用在同乙個html元素上，同時生效 好處 1.功能比較強大 2.將元素展示和樣式控制分離降低耦合度。解耦，讓分工合作更容易，提高開發效率 css的使用 css 與html的結合方式 1.內聯 hello css...
前端之CSS篇
css本質就是乙個樣式表 主要由選擇器和宣告兩個部分組成，宣告部分又包括屬性跟屬性值 注釋 多行注釋 內部樣式 外部樣式 將css 寫在單獨的檔案中，再進行引用 行內樣式 hello world id選擇器 id名 類選擇器 類名 元素選擇器 元素名 通用選擇器 例子 id1 c1p 後代選擇器 作...
前端必備知識之GIT篇 1
linux命令列可能用到命令 1.ls 檢視該目錄下的所有檔案 2.vi 編輯檔案 3.cd 進入某目錄 1.建立版本庫 倉庫 repository mkdir learning cd learning pwd 檢視該目錄結構 2.初始化目錄 git init 使該目錄變成git可以管理的目錄 3....