八、列表
1.概念：將一些具有相同或者相似特征的元素進行以整齊的排列
2.分類：有序列表ol，無需列表ul
3.語法：定義列表->書寫列表li
4.屬性：type - 定義列表項標識的樣式
有序列表的取值：1/a/A/i/I
無序列表的取值：circle/square
有序列表獨有的屬性： start -> 取值：阿拉伯數字
5.css列表
list-style-type：none； -使用css的方式去掉列表項標識
6.注意：今后能用無序列表的地方就用無序列表，有序列表盡量少用，不利于seo
九、尺寸
1.常用尺寸單位
a -%
b -px
c -em相對于父元素的尺寸
d -rem相對于根元素的尺寸
2.常用顏色單位
a. -rgb（x，x，x）
x->0~255之間的數字，絕大部分用于js中隨機生成隨機顏色
b. - #rrggbb
6位十六進制數字 1~9 a~f
簡寫： #rgb
c. -英文單詞
3.設置尺寸的元素
a.能夠設置尺寸的屬性
i.所有的塊級元素都能設置尺寸
div，h1~h6，p，ol，ul，li
ii.一些能夠設置尺寸的HTML元素
img，canvas，video
b.不能設置尺寸的屬性
i大部分的行內元素都不不能設置尺寸
span，i，b，u，s，sup，sub

十.浮動
1.語法 float
2.取值 none/left/right
3.概述
a.浮動的元素會脫離文檔流，不占據頁面空間
b.浮動的元素會停靠在包含框的左邊或右邊
c.浮動的元素依然會位于包含框之內
d.如果浮動的元素前已經有了一個已經浮動的元素，那么他會停靠在這個元素的左邊或右邊
e.浮動是專門用于解決塊級元素在一行顯示的問題
4.清除浮動
目的：解決后續元素受浮動影響的問題
語法：clear
取值：none/left/right/both（常用）；
5.浮動對父元素的影響（父元素為0的問題）
解決方案
a.直接給父元素添加一個高度
b.使用清除浮動的方式
c.讓父元素也浮動起來
d.overflow：hidden； //溢出隱藏（下拉菜單不能用）
十二.過渡
1.語法 transition：過渡屬性 過渡時間 過渡速度函數 過渡延遲；
注意：延遲一般不設置 默認是不延遲（0s）
過渡屬性：只要是帶數值的屬性都可以過渡
all-所有發生變化的屬性都過渡
過渡時間：.3s/.4s是用戶體驗最好的過渡時間
過渡速度函數： linear -勻速的
2.常用方法：all/.3/linear
十三.框模型
1.內邊距
a.語法：padding：n px；
b.定義：圍繞在元素周圍的空白領域
c.取值
padding：值1；
值1：上下左右四個方向的外邊距
padding：值1 值2：
值1.上下外邊距
值2.左右方向外邊距
padding：值1 值2 值3
值1：上外邊距
值2：左右外邊距
值3：下外邊距
padding：值1 值2 值3 值4；
d-單邊定義
padding-方向：n px；
方向：top/right/bottom/left
2.外邊距
a.語法：margin：n px；
b.定義：圍繞在元素周圍的空白領域
c.取值
margin：值1；
值1：上下左右四個方向的外邊距
margin：值1 值2：
值1.上下外邊距
值2.左右方向外邊距
margin：值1 值2 值3
值1：上外邊距
值2：左右外邊距
值3：下外邊距
margin：值1 值2 值3 值4；
margin：auto；
注意：auto只能控制左右方向自動居中（上下無效）
d-單邊定義
margin-方向：n px；
方向：top/right/bottom/left
3.特殊
a.元素實際所占大小計算方式
元素實際所占寬度=元素內容寬度+左右內邊距+左右邊框+左右外邊距
元素實際所占高度=元素內容高度+上下內邊距+上邊邊框+上下外邊距
b.改變元素所占大小計算方式
box-sizing：border-box
使我們設置的內容的大小包含元素內容、內邊距以及邊框的大小
十四、邊框
1.語法border
2.簡寫方式 border：邊框寬度 邊框樣式 邊框顏色；
樣式：solid -實線的
3.單邊定義
border-方向：xpx
4.特殊用法
使用邊框實現三角形
設置元素寬度、高度為0，并只設置其中一個邊的邊框
5.特殊的顏色
透明色 transparent
6.邊框倒角
直角變圓角
border-radius：px/%；
邊框倒角的單邊定義
border-上下方向-左右方向-radius：px/%；

十四.背景
1.背景顏色 background-color：合法顏色值；
2.背景圖像 background-image：url（“要引用圖像的路徑”）；
注意：如果背景圖像和背景顏色同事設置的話背景圖像會壓在背景顏色的上邊
3.背景平鋪 background-repeat：none/repeat-x/repeat-y/no-repeat；
4.背景尺寸 background-size：w h； ->px/%
5.背景圖像定位 background-position：x y；
x-x方向偏移量
取正：背景圖像向右移動
取負：背景圖像向左移動
x-y方向偏移量
取正-背景圖像向下移動
取負-背景圖像向上移動
配合精靈圖使用 ->圖像拼合技術
將多個小圖放在一張大圖中顯示
如何顯示精靈圖中的某些小圖
a.創建一個和想要顯示小圖一樣大的元素
b.將精靈圖作為背景圖像引入元素中，并使用背景圖像定位的方式移動背景圖像，以便顯示要顯示的小圖
注意：背景圖像定位的取值一定是<=0的
6.背景簡寫方式
background：背景顏色 背景圖像 背景平鋪 背景圖像定位；

十五、定位
1.相對定位
語法：a.相對定位的元素師不脫離文檔流
b.相對于自身的位置進行偏移
c.配合偏移屬性來使用（top/right/bottom/left）
d.絕大部分會配合絕對定位使用
使用場合：用于網頁元素位置的微調
2.絕對定位
語法：position：absolute；
特點：a脫離文檔流，不占據頁面空間
b.配合偏移屬性使用
c.相對于最近的已經定位的祖先元素進行定位
d.如果沒有已經定位的祖先元素，那么它會相對于最初的包含框進行定位
e.使用絕對定位來完成元素位置的初始化
使用場合：下拉菜單，網頁布局
3.固定定位
語法：position：fixed；
特點： a.脫離文檔流，不占據頁面空間
b.配合偏移屬性使用
c.相對于最初的包含框進行定位
使用場合：返回頂部，吸頂燈

十六.表格
table -定義表格
tr -定義行
td -定義列
1.table屬性
a.align="left/right/center" -控制制整個表格在頁面中的水平位置
b.bgcolor-整個表格的背景顏色
c.border=“n” -控制表格邊框寬度
d.width -整個表格的寬度
e.height -整個表格的高度
f.cellpadding-表格內邊距
g.cellspacing-表格外邊距
2.tr的屬性
a.align -控制當前行中內容的水平位置
b.bgcolor -控制當前行的背景顏色
3.td的屬性
a-align -控制當前單元格的內容的水平位置
b.bgcolor -控制當前單元格的背景顏色
c.width -設置當前列的寬度
d.colspan -跨列
從當前單元格位置向右橫向的合并掉幾個單元格，并且要把被合并的單元格刪掉
e.rowspan -跨列
從當前單元格位置向下縱向的合并掉幾個單元格，并且要把被合并掉的單元格刪掉