O'REILLY_Chap.9_盒模型
<HeadFirst_HTML與CSS> O’REILLY_Chap.9_盒模型
本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫成部落格形式, 使用關鍵字查詢便可以快讀的找到相關的內容.
FollowMeReading系列所選的書籍一般選自O’REILLY或Apress出版社, 儘量保證筆記內容的權威性.
FollowMeReading系列的部落格標題格式為: <書名> 出版社章節數章節名, 方便大家在紙質版書籍中查詢.
FollowMeReading系列博文中的內容大部分是原文, 非原文部分前面將有’博主’字樣提醒.
感謝<HeadFirst_HTML與CSS>作者 Eric Freeman & Elisabeth Robson
感謝<HeadFirst_HTML與CSS>翻譯 徐陽 丁小峰本部落格由@scott編寫. 若轉載此文章, 請註明出處和作者
正文
原文
BULLTE POINTS(要點):
CSS使用一個盒模型來控制元素如何顯示.
盒子有內容區和可選的內邊距, 邊框和外邊距組成.
內容區包括元素的內容.
內邊距用來在內容區周圍建立可見的空間.
邊框包圍內邊距和內容, 它提供了從視覺上分離內容的一種手段.
外邊距包圍邊框, 內邊距和內容, 允許在元素和其他元素之間增加空間.
內邊距, 邊框和外邊距都是可選的.
元素的背景會在內容和內邊距下顯示, 但不會延伸大外邊距下面.
內邊距和外邊距大小可以用畫素或百分數設定.
邊框寬度可以用畫素設定, 也可以使用關鍵字
thin,medium,thick來指定.有8種不同的邊框樣式, 包括實現, 破折線, 虛線和脊線.
對於外邊距, 內邊距或邊框, CSS提供了相應的屬性, 可以一次對所有四個邊(上,右,下,左)完成設定, 也可以單獨設定任意一邊.
使用
border-radius屬性可以對有邊框的元素建立圓角.使用
line-height屬相可以增加文字行之間的間距.可以用
background-image屬性在元素的背景上放置影象.使用
background-postion和background-repeat屬性可以設定背景影象的位置和平鋪行為.對於希望成組指定樣式的元素要使用
class屬性.使用
id屬性為元素指定一個唯一的名字. 還可以使用id屬性為元素提供唯一的樣式.一個頁面上有給定
id的元素只能有一個.可以使用
id選擇器按id選擇元素. 例如#myfavoriteid.一個元素只能有一個id, 不過它可以屬於多個類.
在HTML中可以使用多個樣式表.
如果兩個樣式表包含衝突的屬性定義, HTML檔案中最後連結的樣式表最為優先.
可以在
<link>元素中使用媒體查詢或者使用CSS中的@media規則來指定裝置.