1.畫素和百分比

長度單位畫素px，

螢幕（顯示器）由一個個點構成

不同螢幕的畫素大小是不同的，畫素越小的螢幕顯示的效果越清晰

所以200px在不同的裝置下的顯示效果不一樣

百分比：可以將屬性設定為其相對於父元素的比列

可以使子元素可以隨父元素的改變而改變

2.em和rem

em是根據當前字型大小來決定的長度單位

em是當前設定字型大小（一般字型大小是16px，所以em預設是16px）

rem是相對於根元素的字型大小來設定的

比如head的style裡

用hmtl{}來設定字型大小，這樣網頁的所有部分都會繼承它的樣式，rem的大小也會由其決定

3._RGB值(顏色單位)

RGB通過三種顏色（紅，綠，藍）的不同濃度來配出不同的顏色

R，red；G，green；B，blue

每一種顏色的濃度範圍在0-255%之間。

語法  RGB(xxx,xxx,xxx);

RGBA是在原來的基礎上加上了第四個屬性：透明度，

1是完全不透明，.5（寫作.5實際上是0.5）？半不透明，0完全透明

************************************

十六進位制表示顏色

語法： #紅色綠色藍色

取值00--ff

如#ff0000表示紅色，如果三個都是兩位兩位重複，可以簡寫

比如ffff00可以簡寫為ff0

4._HSL值（另一種顏色值）

常用於ps等，在程式設計中應用不多

hsla（色相，飽和度，亮度，透明度）

色相0-360，飽和度0%-100%，亮度0%-100%，透明度同上

5.文件流

網頁是一個多層結構，一層摞著一層

通過css可以分別為每一層設定樣式

使用者只能看到最頂層

在這些層中，最底下的一層叫作文件流，文件流是網頁的基礎

我們所建立的元素預設都在文件流中進行排序

元素在文件流中的特點：
塊元素：在頁面中獨佔一行（只在文件流中適用）

預設寬度是父元素的全部（把父元素撐開即是把html撐滿）

預設高度是被內容撐開（子元素）

行內元素：預設高度和寬度是被內容撐開，不獨佔一行，從左到右排列

6.盒子模型的組成（box model）

css將頁面中所有的元素設定為矩形的盒子

然後對頁面的佈局就變成了對盒子位置的佈局

每一個盒子都由下面幾個部分組成：
內容區（content）

邊框（border）

內邊距（padding）

外邊距（margin）

單個屬性的設定：四個值上下左右，三個值上，左右，下；兩個值上下，左右；一個值全部

a.內容區：width設定內容區寬度

height設定內容區高度

b.邊框（影響盒子大小）：盒子視覺化部分的邊緣，需要至少設定三個樣式

邊框寬度（預設）：border-width或者（border-left-width這種細節設定）

邊框的顏色（預設black）：border-color

邊框樣式：border-style（預設是none，需要指定）

solid 實線；dotted 點狀虛線；dashed 虛線；double 雙線

最簡單是border（top）：xxx xxx  xxx(分別對應寬度顏色樣式，順序無所謂)

或者全部設定後給一個邊設定none

c.內邊距

關於padding的屬性填寫和上面一樣

內邊距影響盒子大小，內容區的背景顏色延伸到內邊距，

如果設定一個內容區的子元素把內容區撐滿，再設定另一個顏色，可以明顯地看出差別

可見的盒子大小由內容區，內邊距，邊框共同決定

d.外邊距

不會影響盒子可見框的大小，但影響盒子的位置

margin的屬性設定與上相同，

預設情況下左上移動自己，右下移動別人

例如上邊距設定正值會自身向下移動（如果設定負值，會向相反方向移動）

外邊距影響元素實際的佔地大小

7.盒子水平和垂直方向的佈局

水平方向佈局：