摘要：目前，除了及更早版本外，所有瀏覽器均已支持。視口單位中的視口，桌面端指的是瀏覽器的可視區域移動端指的就是中的。根據規范，視口單位主要包括以下個等于視口寬度的。等于視口高度的。生成相對定位的元素，相對于其正常位置進行定位。

已知高度的塊級子元素，采用絕對定位和負邊距
.container {
position: relative;
}
.vertical {
height: 300px; /子元素高度/
position: absolute;
top:50%; /父元素高度50%/
margin-top: -150px; /自身高度一半/
}
CSS3彈性盒模型
.container {
display:flex;
justify-content: center; /子元素水平居中/
align-items: center; /子元素垂直居中/
}
未知高度的塊級父子元素居中，模擬表格布局
缺點：IE67不兼容，父級 overflow：hidden 失效
.container {

  display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
}

新增 inline-block 兄弟元素，設置 vertical-align
缺點：需要增加額外標簽，IE67不兼容
.container {
height: 100%;/定義父級高度，作為參考/
}
.extra .vertical{
display: inline-block; /行內塊顯示/
vertical-align: middle; /垂直居中/
}
.extra {
height: 100%; /設置新增元素高度為100%/
}

px 相對于顯示器屏幕分辨率，無法用瀏覽器字體放大功能
em 值并不是固定的，會繼承父級的字體大小： em = 像素值 / 父級font-size
rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
為了簡化font-size的換算，我們在根元素html中加入font-size: 62.5%;
html {font-size: 62.5%; } / 公式16px62.5%=10px */

視口單位(Viewport units)
什么是視口？
在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。
視口單位中的“視口”，桌面端指的是瀏覽器的可視區域；移動端指的就是Viewport中的Layout Viewport。
根據CSS3規范，視口單位主要包括以下4個：

  1.vw：1vw等于視口寬度的1%。
  2.vh：1vh等于視口高度的1%。
  3.vmin：選取vw和vh中最小的那個。
  4.vmax：選取vw和vh中最大的那個。

vh and vw：相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）。1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度。

比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax。

視口單位(Viewport units)

文字排版的屬性:font
font-size等
line-height color visibility cursor

聯系：它們都能讓元素不可見
區別：
display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility:hidden;是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式
修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden元素內容

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
不同部分的說明：
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

盒子模型構成：內容(content)、內填充(padding)、 邊框(border)、外邊距(margin)
IE8及其以下版本瀏覽器，未聲明 DOCTYPE，內容寬高會包含內填充和邊框，稱為怪異盒模型(IE盒模型)
標準(W3C)盒模型：元素寬度 = width + padding + border + margin
怪異(IE)盒模型：元素寬度 = width + margin
標準瀏覽器通過設置 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。
p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素。
p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。

:after 在元素之前添加內容,也可以用來做清除浮動。
:before 在元素之后添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中

block 象塊類型元素一樣顯示。
none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值

absolute
生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。
fixed （老IE不支持）
生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative
生成相對定位的元素，相對于其正常位置進行定位。
static
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right - z-index 聲明）。
inherit
規定從父元素繼承 position 屬性的值

新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （ShadowReflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
增加了旋轉,縮放,定位,傾斜,動畫，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

一般瀏覽器支持@keyframes 規則和 animation 屬性
當瀏覽器不支持時，可以加前綴 -webkit-, -ms- 或 -moz-

創建動畫：@keyframes規則。
方式一：from{屬性：值;} to{屬性：值;}

方式二：0%{屬性：值;} 100%{屬性：值;}
0% 是動畫的開始，100% 是動畫的完成。可以在二者之間加入25%，50%等。

將動畫綁定到選擇器：
在樣式中，設置動畫屬性animation，自定義動畫名稱和時長。
animation：動畫名 時長；
此時就可以完成一個簡單的動畫了，要進行更多設置還需要其他屬性。

規定動畫開始時的等待時間：
animation-delay：時間；可以為秒、毫秒2s，2ms。
播放次數：
animation-iteration-count：次數；
永久播放的值取infinite。
動畫速度曲線：
animation-timing-function：變化類型；
變化類型有：linear 勻速；ease-in 開始慢；ease-out 結束慢；ease 動畫有一個緩慢的開始，然后快，結束慢。

// 把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一
IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統一通過getAttribute()獲取自定義屬性
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了

box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

:checked 選擇被選中的表單元素
:after 在元素內部最前添加內容
:before 在元素內部最后添加內容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，從后向前數

visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在
opacity: 0; CSS3屬性，設置0可以使一個元素完全透明
position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外
display: none; 元素會變得不可見，并且不會再占用文檔的空間。