text-align

text-align CSS 屬性定義行內內容，如何相對它的塊元素對齊。并不控制快元素自己的對齊，只控制它的行內內容的對齊。
text-align:center 設置文本或img標簽等一些內聯對象（或與之類似的元素）的居中。

IE盒模型和 W3C 盒模型

W3C的是 element = content + padding + border + margin;

通過盒模型的外邊距 margin 拉開各元素之間的間隙、距離，使用 padding 來撐開自身的寬高

IE是是 element = content + margin。

在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁， ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

維基百科

*{box-sizing: border-box}

使用此屬性來模擬不正確支持CSS盒子模型規范的瀏覽器的行為。支持IE8+。

當設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。

MDN-box-sizing

line-height

數字：這個無單位數字乘以該元素的字體大小。大多數情況下，使用這種方法設置line-height是首選方法，在繼承情況下不會有異常的值。建議使用數字寫法。

百分比：與元素自身的字體大小有關。計算值是給定的百分比值乘以元素計算出的字體大小。

繼承：
如果父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個具體的px級別的值。

而如果屬性值沒有單位，則瀏覽器會直接繼承這個“因子（數值）”，而非計算后的具體值，此時它的line-height會根據本身的font-size值重新計算得到新的line-height 值。

一般來數，設置行高的值為 純數字 是最推薦的方式，因為其會隨著對應的 font-size 而縮放。

inline-block

設置了inline-block屬性的元素既擁有了block元素可以設置width和height的特性，又保持了inline元素不換行的特性。
默認情況下，inline元素之間就有間隙出現，inline-block 也有這個特點。

去除間隙：

給父元素設置 font-size:0；使用margin負值；無閉合標簽；使用letter-spacing；使用word-spacing。

張鑫旭

inline-block的默認對齊方式是vertical-block：baseline，就是inline-block元素要根據父元素的基線對齊。

給inline-block元素加上 vertical-align:top; vertical-align指定的對齊頂部、底部或中間，是相對于當前行而不是父元素。

CSS Sprite

css sprites直譯過來就是CSS精靈。通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”。其實就是通過將多個圖片融合到一張圖里面，然后通過CSS background背景定位技術技巧布局網頁背景。這樣做的好處也是顯而易見的，因為圖片多的話，會增加http的請求，無疑促使了網站性能的減低，特別是圖片特別多的網站，如果能用css sprites降低圖片數量，帶來的將是速度的提升。

百度百科

元素看不見

display:none; 將元素設置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有。

visibility:hidden; 元素在頁面消失后，其占據的空間依舊會保留著，只是肉眼看不到而已。
適用于那些元素隱藏后不希望頁面布局會發生變化的場景。

opacity:0; 表示元素的透明度，將元素的透明度設置為0后，頁面上將看不到。像穿了隱身衣一樣，隱藏后依舊占據著空間。

元素的margin，border，padding，height 和 width 等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，設置為 overflow:hidden 來隱藏其子元素。

display:none：元素徹底消失，不會觸發其點擊事件。

visibility:hidden：無法觸發其點擊事件，只是依然占據著頁面空間。

opacity:0：可以觸發點擊事件，設置元素透明度為0后，元素只是相對于人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發點擊事件。

height:0：將元素的高度設置為0，并且設置overflow:hidden。如果元素設置了border，padding等屬性不為0，頁面上還是能看到這個元素的，觸發元素的點擊事件完全沒有問題。如果全部屬性都設置為0，很顯然，這個元素相當于消失了，即無法觸發點擊事件。