1. 在布局時，可以多使用padding和margin來做，它可以很好的控制居中等，對於布局元素，一般不要設置其高度，而是由子元素來撐開，這樣做的好處是更容易控制布局，清晰明了，代碼較少。

2. 使文字之間空開，可以采取兩種方法：1. 給文字設置white-space:pre；這樣在html中保留的任何字符都可以顯示。2. 在html中使用shift+空格，切換到圓角符號，然後再空格，這時，我們得到的就是中文下的空格，就可以被保留了。

3.多看看網易新聞和新浪新聞的布局方式，一般最外層的div或其他包裹元素都只是設置margin和padding，padding更多用於上下，margin多用於左右，這樣是因為需要使用分隔線會更方便一些,當然如果對於分隔線沒有需要，直接全部在包裹元素設置padding更為明了、方便，而設置寬和高往往是在最內部的元素設置，這樣就可以將外部元素撐起來了，如果內層和外層都設置寬度和高度，這樣的結構可能更難以控制並導致部分沖突。

4.移動端布局時，可以大量采用css3的屬性，因為移動端對齊支持的已經很好了。 另外，在移動端，可以發現像網易、騰訊、新浪這樣大公司的網站，對於每一個條目，其將a標簽擴在div外面，這樣的好處是只要點任何一部分，都會進入該條目，並且點的瞬間，是沒有active類似的顏色變化的，應當註意，使用-webkit-tap-highlight-color:rgba(255,0,0,0)，但是新浪使用的方法感覺真的很亂，不推薦; 個人認為，搜狐公司這方面做的並不是很好，沒有借鑒價值。

5.截取、處理字符串時，有時候使用slice方法也會很簡單

6.設置圖片的大小時，往往給外層div固定寬高，而img設置為100%，註意：更好的做法時給width設置100%，然後給height設置min-height和max-height，比如min-height為100%，max-height為130%。而網易的做法時設置min-height的高度。但是這樣必須嚴格要求圖片的百分比在某一個特定的範圍內，否則會出現問題。

7. 類數組對象不是數組，所以不能用數組的方法，比如$("p")這裏獲取的就是一個類數組對象。

8. width即為我們所寫的width，而device-width為設備的width，媒體查詢也可以很清楚地表明這一點，這部分的內容可以總結博客。

9. 主頁的問題在於有的元素從html或者body處溢出來了，所以才能左右晃動，這時只需要設置html元素的overflow-x:hidden即可實現，如果設置了body的overflow:hidden，那麽這時候其offsetHeight不能使用。

10. flex布局不能用在多行多列的情況下，而只能用在單行或者單列的情況下，多行多列我們可以用inline-block的布局方式。多行多列，直接給最外層div固定的width，這是必須的，這樣才能精確控制，然後設置center這樣內部的inline元素居中，有img則給img再來一個div包裹，然後讓img的widht和height用百分比布局的方式。

11.實在不知道到底優先級的問題，直接!important，效果還是不錯的。

12.在分頁跳轉時，我們可以使用 將兩個模塊的父元素設置為white-space:nowrap; 然後將子元素的display設置位inlineblock，並且將父元素的寬度設置為子元素的兩倍（在子元素相等的情況下），這樣我們就可以使用動畫的形式來控制margin-left的值。

13. 當自己不懂某一方面的設計時，可以多多參考優秀公司的網站。

14. 有時候 a 標簽明明在，但是點擊卻毫無反應，並且設置的cursor： pointer; 也沒有用，這很有可能是你設置它或它的父元素為position: absolute;了，（也許不是這樣），本質問題是z-index值太小，導致我們的鼠標夠不到，只要設置較高的z-index值即可正常點擊。

15. color屬性一般情況下是繼承的，但是對於<a>標簽中的color屬性是不會繼承的，如果我們希望a標簽中的color屬性也能繼承，那麽我們可以給a標簽添加屬性 color: inherit; 這樣a標簽也可以繼承父元素的color屬性了。

一點小點