《精彩絕倫的CSS》讀書筆記(三)

 4.1

輪廓(outline)不參與佈局,邊框(border)參與佈局
4.2
許多初學者(包括我)不瞭解的:margin:0 auto指的是上下外邊距爲0,相對父元素水平居中
4.6
相鄰清除 clear:both,用來遏制前面元素的浮動效果
(額,就是說假設前面所有元素都浮起來,後添加的元素(默認樣式的情況下)會居於左上角,而不是浮動元素的下方,clear:both可使元素居於浮動元素下方)
(文字表達能力低下..請見諒,不懂的可以評論,我會盡力回答)
position默認值爲static
(關於清除浮動的方法可以查看我的另一篇博文http://willkan.blog.51cto.com/3904004/1028810)
4.9
要實現帶分隔符的分欄,可以先把帶分隔符的背景設置好,再移動元素至適當位置
4.11
通過設置適當的margin可以實現元素的排列順序獨立於文檔源代碼(html)的順序
4.12
加入position:relative後,我們可以給元素加入一個相對偏移量(right,top,bottom,left)來達到放置元素的目的
4.13
width,height使用百分比時別忘了設置min-width,min-height
4.14
基於em佈局的核心思想就是保持每行的長度以及相對放置位置,無論瀏覽器窗口多大.
4.15
可通過設置負外邊距來實現文字居於直線中間(覆蓋直線)
4.18
固定頁頭有一個潛在問題:按下鍵盤上的翻頁鍵時每次會調過跟瀏覽器窗口高度相等的距離,也就是說,每次翻頁的時候用戶都會錯過幾行內容(錯過內容高度和頁頭高度相等)
不完美的解決方案:把頁頭之外的內容用容器包起來,並把容器的position設爲fixed,將其放置在頁頭下方.但這方案帶來一個問題,滾動條可能出現在容器中(個人認爲這種滾動條超醜的)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章