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

十.浮動
1.語法 float
2.取值 none/left/right
3.概述
a.浮動的元素會脫離文檔流，不占據(jù)頁面空間
b.浮動的元素會?？吭诎虻淖筮吇蛴疫?br /> c.浮動的元素依然會位于包含框之內(nèi)
d.如果浮動的元素前已經(jīng)有了一個已經(jīng)浮動的元素，那么他會?？吭谶@個元素的左邊或右邊
e.浮動是專門用于解決塊級元素在一行顯示的問題
4.清除浮動
目的：解決后續(xù)元素受浮動影響的問題
語法：clear
取值：none/left/right/both（常用）；
5.浮動對父元素的影響（父元素為0的問題）
解決方案
a.直接給父元素添加一個高度
b.使用清除浮動的方式
c.讓父元素也浮動起來
d.overflow：hidden； //溢出隱藏（下拉菜單不能用）
十二.過渡
1.語法 transition：過渡屬性 過渡時間 過渡速度函數(shù) 過渡延遲；
注意：延遲一般不設(shè)置 默認(rèn)是不延遲（0s）
過渡屬性：只要是帶數(shù)值的屬性都可以過渡
all-所有發(fā)生變化的屬性都過渡
過渡時間：.3s/.4s是用戶體驗最好的過渡時間
過渡速度函數(shù)： linear -勻速的
2.常用方法：all/.3/linear
十三.框模型
1.內(nèi)邊距
a.語法：padding：n px；
b.定義：圍繞在元素周圍的空白領(lǐng)域
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.定義：圍繞在元素周圍的空白領(lǐng)域
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.元素實際所占大小計算方式
元素實際所占寬度=元素內(nèi)容寬度+左右內(nèi)邊距+左右邊框+左右外邊距
元素實際所占高度=元素內(nèi)容高度+上下內(nèi)邊距+上邊邊框+上下外邊距
b.改變元素所占大小計算方式
box-sizing：border-box
使我們設(shè)置的內(nèi)容的大小包含元素內(nèi)容、內(nèi)邊距以及邊框的大小
十四、邊框
1.語法border
2.簡寫方式 border：邊框?qū)挾?邊框樣式 邊框顏色；
樣式：solid -實線的
3.單邊定義
border-方向：xpx
4.特殊用法
使用邊框?qū)崿F(xiàn)三角形
設(shè)置元素寬度、高度為0，并只設(shè)置其中一個邊的邊框
5.特殊的顏色
透明色 transparent
6.邊框倒角
直角變圓角
border-radius：px/%；
邊框倒角的單邊定義
border-上下方向-左右方向-radius：px/%；

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

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

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