Part1 CSS相關
1 內聯元素（inline-element）和塊元素（block element）分別有哪些
常見內聯元素（行內元素）有a、b、span、i 、em、input、select 、img等
常見的塊元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等
2 浮動相關
浮動布局指將元素脫離普通流/文檔流，使其可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到塊級元素的布局而只會影響內聯元素的排列。
正因為浮動元素脫離了文檔流，其父級元素并不知道它的存在，因此會表現為高度為0，無論浮動元素如何變化，其父級元素也不會隨它變化將其包裹，這種現象也叫作“高度塌陷”。
下面的例子中，不管#floatDom高度如何變化，#parent高度始終為0，這將導致父元素邊框不能被撐開，背景不能顯示等問題
<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <div style="clear:both"></div>
因為高度塌陷的存在（這往往不是我們所期望的），必須要清除浮動，下面介紹清除浮動的幾種方式：
•在浮動元素后添加樣式含有“clear：both”的元素
<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <div style="clear:both"></div>
也可以添加br標簽，其自帶clear：both屬性
<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <br/></div>
利用這種方式清除浮動的優點在于通俗易懂，容易掌握，缺點也很明顯，增加了很多無意義的標簽，這個在后期維護中是很痛苦的。
•為父元素添加樣式“overflow:hidden"
<div id="parent" style="overflow:hidden"> <div id="floatDOM" style="float:left;width:300px;height:300px;"></div>
利用這種方式不存在結構和語義化問題而且代碼量極少，然而在內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
•利用：after偽元素
<style type="text/css"> .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }</style><div id="parent" class="clearfix"> <div id="floatDOM" style="float:left;width:300px;height:300px;"></div>利用這種方式，僅需在目標元素上添加一個類，也是目前使用最多的一種方式。
Reference
iyunlu.com/view/css-xht
3 相對布局（relative）和絕對布局的區別（absolute）
相對布局和絕對布局最本質的區別在于是否脫離文檔流。
相對布局未脫離文檔流，即設置元素相對布局后，文檔流仍然保持其原始的位置，通過設置top、left等屬性可設置其相對于原始位置的偏移量。
絕對布局是脫離文檔流的，即文檔流中的要素并不知道該絕對布局要素的存在，絕對布局的定位是相對于父元素中具有相對布局或絕對布局的要素，若都不存在則相對于body布局。
4 盒模型(Box Model)
盒模型定義了一個元素的顯示形式，包括content（內容）、padding（內邊距）、border（邊界）以及margin（外邊距）幾部分組成，目前有兩種盒模型標準，一種是W3C標準盒子模型，還有一種是IE盒子模型，采用的是Microsoft自己的標準。
這兩種盒模型的區別主要在于元素寬度的計算。標準模式下css中定義的width即為content（內容）的寬度，整個元素在頁面中占有的寬度，計算公式為：
而在IE盒子模型中，css中定義的width為content + padding + border，因此在IE盒子模型中，整個元素在頁面中占有的寬度為(高度同理）
在CSS3中利用box-sizing保留了兩種盒子模型，當我們設置box-sizing: content-box（默認），采用的是W3C標準盒模型，當設置box-sizing:border-box時，采用的是IE盒模型。
5 CSS reset（重置）
每個瀏覽器都有一些自帶的樣式，而且各個瀏覽器這些自帶的樣式往往又存在不同，這給我們布局上帶來了一些不便。因此在實踐中往往需要對瀏覽器的css樣式進行“清零”，即CSS reset。最簡單的一種reset代碼如下：
*{ margin:0; padding:0;}這種方式雖然簡單但太過“暴力”，因為很多要素像div、li等本身默認就沒有margin、padding樣式，這無異于造成大量冗余，更推薦的方式根據自己需要編寫reset代碼。
Reference:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS hack
由于不同的瀏覽器對CSS的解析和支持是不同的，這會導致相同的CSS代碼在不同瀏覽器中的顯示方式并不是完全一致的，這就需要通過CSS Hack來解決不同瀏覽器的兼容性問題。針對不同瀏覽器寫不同的樣式的這個過程就稱為CSS hack。
CSS Hack常見的形式有如下幾種：
•屬性Hack
比如IE6能識別_width以及*width，而在IE7中能識別*width,但是不能識別_width,在FireFox中兩個都不識別。
•選擇符Hack
比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
•條件Hack
IE條件注釋是微軟從IE5開始就提供的一種非標準邏輯語句。比如針對所有IE：