今日收穫 18/4/1

1.發現圖片的<img>這個標籤自動並排顯示


2.今天發現,將div中的塊級元素絕對定位後,與同級塊狀元素重疊了。所以,又看了書上定位各屬性的意義。書上對

絕對定位的說法是:絕對定位的元素完全脫離HTML代碼確定的頁面流(把元素從頁面流中移出,把元素置於頁面之上)。也就是說,頁面中的其它元素甚至不知道絕對定位元素的存在。如果不小心,其它元素甚至會完全隱藏到絕對定位的元素後面。(注意:不要試圖在一個樣式中同時使用float屬性和靜態static定位或相對定位之外的定位類型。float屬性與絕對定位和固定定位不能同時應用到一個元素上)。類似於便利貼

相對定位:其位置相對於該元素在HTML流中的當前位置而定。頁面中的其它元素會顧及相對定位元素在HTML流中原來的位置。因此,使用相對定位移動元素後,原先的位置會留空相對定位的主要用途不是移動元素,而是爲其中需要絕對定位的元素設置參考點。因爲通常只使用相對定位創建新的定位上下文,所以甚至無需設置上下左右的距離

靜態定位:是web伊始瀏覽器定位內容的方式,就是從上到下顯示HTML。可能永遠不需要這麼做。

可以同時指定左右位置以及上下,讓瀏覽器確定元素的寬度和高度。

書中也說到:如果標籤在使用絕對定位,相對定位或固定定位的另一個標籤中,其位置相對於那個元素的邊界而定。這就解決我的一個疑惑:如何在一個使用絕對定位的元素中用絕對定位定位元素。

而這篇文章也講了什麼是HTML中的頁面流: 搞定HTML\CSS之absolute和relative


3.background: #748A9B url(bg2.gif) 0 0 repeat-y;


4.我想還是佈局打好再做內容吧。


5.剛剛遇到的問題是:中間兩欄佈局(都設置了float),還有一個footer,給左欄設置寬度,右欄沒有設置寬度後,footer跑到了左欄的右邊,而右欄跑到了下方。而且即使給右欄設置了寬度,但如果中間間隙足夠,footer仍然會擠到中間去。此時給footer清掉浮動就行了。另一個類似問題出現在兩欄中,右欄比左欄內容更多,如果兩個都設置浮動,那麼右欄可能會浮動到左欄下方。這時候只能調高父元素的高度了嗎?但其實我也沒有設置它的高度(調高也沒用,畢竟浮動是它的特點)。我又驚了!父元素這時候爲什麼有高度???。這種情況下是不是用絕對定位更好呢?

重述這裏遇到的問題:

->當div中有兩個同級的浮動div時,div沒有高度,但是如果其中一個是div以外的塊級元素如p元素就能被撐起來...

p標籤不可以自由嵌套的,p標籤內只能嵌套內聯元素,類似h1、div、ul塊元素都不可自由嵌套在p標籤內。

但是在兩欄均爲浮動時,如果側欄想要通過margin豎直方向置中是不行的。

6.我剛剛把notepad換成了Adobe的brackets(免費開源). 界面更扁平以及性冷淡,而且有自動縮進,有文件夾管理,HTML和CSS可以並排編輯,也是輕量級,暫時覺得很滿意。我又發現它的“效果實時查看”功能很厲害啊,點擊頁面上的某個元素就能定位到你寫的相應的代碼上。而且如果在當前元素中添加不適用的屬性時,它會自動標紅。啊啊啊滿意!

7.一個div中兩個h標籤,h標籤會展開到外層元素的寬度。

8.發現幾張圖片並排置放時,即使margin,padding已全清0,圖與圖之間仍有幾像素的間隙。但是如若使用float,間隙會消失。不太明白

發佈了25 篇原創文章 · 獲贊 7 · 訪問量 2420
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章