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

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

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

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

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