Web前端工程師應該懂的的知識點——HTML/CSS

優雅升級 vs 漸進加強

優雅升級：先知足全部功能，再想盡辦法去兼容全部瀏覽器。
漸進加強：先知足基本功能，保證網頁的可訪問性，注重標籤的語言化；而後再爲高級瀏覽器和高帶寬用戶提供高級功能與效果。

doctype是神馬

<!doctype>不是HTML標籤，是用來告訴瀏覽器用怎樣的規範去解析當前文檔。
HTML4.01的<!doctype>中指向一個DTD（Document Type Definition），而HTM5中不須要，是由於HTMTL5不是基於SGML(Standard Generalized Markup Language) 標準通用標記語言。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

img標籤的title和alt有什麼區別

title：是globale attributes之一，當鼠標劃上去時顯示的內容；
alt：是img的特有屬性，是圖片的等價內容描述，有三重意思：
1.當圖片沒法加載時就顯示alt的內容;
2.屏幕閱讀器「閱讀」圖片時,讀的就是這個alt值;
3.對搜索引擎友好。

display: none VS visibility: hidden

1.display:none; 不佔空間；visibility:hidden;佔空間；
2.visibility:hidden;是繼承的，因此如何子孫節點修改visibility:visible
;能夠顯示；但display:none;不能夠。
3.修改display屬性會致使整個文檔重排，但修改visibility屬性只會致使元素重繪。
4.讀屏器不會讀display:none的元素，但會讀visibility:hidden的元素。

display: block; VS display: inline;

block：
1.在常規流中，若是沒有設置width，會填充滿父容器；
2.margin，padding有效；
3.忽略vertical-align;
inline:
1.在水平方向，根據direction依次佈局；
2.margin和padding在垂直方向無效，水平方向有效；
3.浮動或絕對定位時會轉換成block；
4.vertical-align屬性生效；

什麼是FOUC?如何避免

FOUC：Flash Of Unstyled Content。意識是先顯示了無樣式的文檔內容，後又加載了樣式文件，致使從新渲染，出現閃爍的現象。
解決方法：1.樣式文件放在文檔的head標籤中；2.儘量避免用@import來引入css文件，由於這樣會無法同步加載樣式文件，可能致使FOUC現象。

解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間，浮動元素碰到包含它的邊框或者浮動元素的邊框才停留。
清除方法：
1.使用空標籤清除浮動：在全部浮動標籤後面加一個空標籤，定義樣式clear:both;弊端就是增長了無心義的標籤。
2.使用after僞對象清除浮動，注意要設置height:0;不然該元素會比實際多出若干像素。
3.使用oveflow：給包含浮動元素的父元素增長樣式：overfow:auto;zoom:1;（兼容IE6）。

CSS3中的transition是什麼意思

transition:過渡。
意思是容許CSS的屬性在必定時間內平滑地過渡。
語法：transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>,~~]
transition-property: none|all|color|width|...
transition-duration: 持續時間
transition-timing-function: linear(勻速)|ease(逐漸慢)|ease-in(加速)|ease-out(減速)|ease-in-out(先加速後減速)|cubic-bezier(x1,y1,x2,y2)這裏的兩對座標實際上是貝塞爾曲線的那兩個槓桿點。
transition-delay: 動畫的延遲執行事件

CSS3中的transform是什麼意思

transform：改變。
意思是：讓元素執行什麼變化，如旋轉/縮放/移動/傾斜等

none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 經過設置 X 軸的值來定義縮放轉換。
scaleY(y) 經過設置 Y 軸的值來定義縮放轉換。
scaleZ(z) 經過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿着 X 軸的 3D 旋轉。 測試
rotateY(angle) 定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿着 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿着 Y 軸的 2D 傾斜轉換。
perspective(n) 爲 3D 轉換元素定義透視視圖。

比較有意思的是matrix這個屬性，基本上其餘屬性的效果都能經過這個matrix實現。

CSS中的僞類與僞元素

僞類：

僞元素：