1.英文換行問題，其實只是個英文單詞的問題，需要在測試網頁的時候留心一下

我們想要這樣的效果，嗯，看起來很不錯

結果把圖片設定好了之後(float，大小什麼的)，興高采烈的F5了一下，以為達到了預期效果，結果是這樣的……

wtf，這和說好的不一樣啊，然後我就開始debug了一晚上，從div巢狀檢查到所有相關的CSS，結果還是找不出答案。

最後無意之中用一串中文代替了XXXXXX…………，結果成這樣了:

？？？？？？一頭霧水的我開始在網上找相關的資料……

結果發現了一個很重要的點：

CSS中新增word-break:break-all;即可使無法自動換行的一串字母自動換行，因為字母不會自動換行。

好吧，這個坑，記住了……

2.ul去掉前面的點點，這是我們經常遇到的一個問題，給出關鍵CSS屬性：

ul{ list-style: none;}，以及若要橫向顯示ul，只需把li浮動起來(float:left;)即可

3.很關鍵的一個點：我們都知道在CSS中佈局是個非常非常重要的東西，所以我把今日踩過的坑羅列如下：

1.position:absolute的絕對定位是相對於其最近的一個position屬性不為static的父元素。

2.position:fixed是絕對定位中的絕對定位，即相對於body進行絕對定位，常見用於廣告的懸浮以及一定要懸浮顯示的某些內容（小黃網？） 

3.position:relative不影響其他元素，即在其他元素眼中你並沒有出軌，但是其實你已經出軌……了…… 

4.預設網頁流佈局從上到下從左到右

下面舉個栗子，直接搞定這些點：

div1 div2 div3 進入文件流佈局，div2(relative)進行相對佈局

div2-1和div2-2位於div2下

其中div2-1(absolute)相對於其最近的一個position屬性不為static的父元素進行絕對定位，即div2

div2-2(fixed)相對於body進行絕對定位

效果圖：

over~