H5+CSS寫網頁時遇到的一些坑(1)
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~