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

已知高度的塊級子元素，采用絕對定位和負(fù)邊距
.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 兄弟元素，設(shè)置 vertical-align
缺點：需要增加額外標(biāo)簽，IE67不兼容
.container {
height: 100%;/定義父級高度，作為參考/
}
.extra .vertical{
display: inline-block; /行內(nèi)塊顯示/
vertical-align: middle; /垂直居中/
}
.extra {
height: 100%; /設(shè)置新增元素高度為100%/
}

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

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

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

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

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

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

元素的每個

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

元素的每個

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

元素的每個

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

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

元素。

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

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

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

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

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

創(chuàng)建動畫：@keyframes規(guī)則。
方式一：from{屬性：值;} to{屬性：值;}

方式二：0%{屬性：值;} 100%{屬性：值;}
0% 是動畫的開始，100% 是動畫的完成?？梢栽诙咧g加入25%，50%等。

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

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

// 把上、左、右三條邊隱藏掉（顏色設(shè)為 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瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一
IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性

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

box-sizing: content-box; // 默認(rèn)的標(biāo)準(zhǔn)(W3C)盒模型元素效果
box-sizing: border-box; // 觸發(fā)怪異(IE)盒模型元素的效果
box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

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

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