《Head first HTML與CSS 第二版》讀書筆記 第九章 盒模型

line-height屬性指定行間距，可使用px，em和百分數。em和百分數相對於本元素字體的大小。

 

CSS將每一個元素看作一個盒子，這裏的元素包括塊元素和內聯元素在內的全部元素。每一個盒子由一個內容區以及可選的內邊距、邊框和外邊距組成。

 

background-image屬性把一個圖像放在元素的背景中：

background-image: url(images/background.gif)

還有另外兩個屬性影響背景圖像：

• background-position屬性會設置圖像的位置，能夠按像素指定，也能夠指定一個百分數，或者還可使用關鍵字，top/left/right/bottom/center。

• background-postion: top left;

• background-repeat屬相能夠控制平鋪行爲，默認的圖像會平鋪（repeat）。no-repeat圖像只顯示一次，repeat-x只在水平方向上重複，repeat-y只在垂直方向上重複，inherit按父元素的設置來處理。

 

使用padding-left屬性在左邊增長內邊距，設置邊距的順序很重要，後出現的會覆蓋先出現的設置。

 

border-style屬性能夠控制邊框的視覺樣式。共有八種樣式：

1. solid    實線；
2. double    雙線；
3. groove    槽線；
4. outest    外凸；
5. dotted    點線；
6. dashed    虛線；
7. inset    內凹；
8. ridge    脊線；

 

border-width屬性控制邊框的寬度，可使用像素或關鍵字（thin/medium/thick）。

border-color屬性設置邊框的顏色與設置字體顏色相似，可以使用顏色名、rgb值或十六進制碼。

像外邊距和內邊距同樣，能夠指定任意一邊的邊框的樣式、顏色和寬度：

border-top-color
border-bottom-style
border-right-width

border-radius屬性給邊框建立圓角，可使用像素和em。若是使用em，邊框半徑的度量相對元素字體大小。

也能夠只指定一個角建立圓角。

 

將邊框設置爲鋸齒效果的技巧：

1. 元素自己的背景色與頁面的背景色不一樣（假設頁面的背景色爲白色）；
2. 將邊框類型設置爲虛線（dashed）;
3. 將邊框的顏色設置爲白色（與頁面的背景色相同）。

 

按id選擇一個元素，須要在id 前面使用#字符，id能夠以一個數字或字母開頭，包括字母、數字以及下劃線，但不能包括空格。

 

在HTML中可使用多個樣式表。若是幾個樣式表包含衝突的屬性定義，HTML文件中最後連接的樣式表最優先。

有時會有一個樣式表做爲頁面的基礎樣式，要修改樣式，並非修改這個基礎樣式表，而是連接這個樣式表，而後在下面提供本身的樣式表，指定向修改的樣式。

 

<link>元素中的media屬性指定應用這個樣式表的設備類型：

media="screen and (max-device-width:480px)"
screen指定有屏幕的設備，
max-device-width指定屏幕寬度小於等於480px

media="screen and (orientation:landscape)"
orientation指定屏幕方向，landscape橫向,portrait縱向

media="print"
經過打印機查看頁面

也能夠在CSS中使用@media規則把全部適用的規則放到大括號裏：

@media screen and (min-device-width:480px) {
    #id{
       ......
    }
}

min-device-width/max-device-width關注設備的實際屏幕，也可使用min-width/max-width值得是瀏覽器的大小。

 

一些屬性：

• border-color    邊框顏色；
• border-width    邊框寬度；
• border-style    邊框樣式；
• padding    對內邊距設置大小，能夠是px或百分數；
• margin    對外邊距設置大小，用法與padding類似。