**一、HTML標(biāo)簽 **
塊級(jí)元素
1、獨(dú)立占一行
2、可以設(shè)置寬和高
3、可以嵌套行內(nèi)元素、塊級(jí)元素、行內(nèi)塊元素
4、默認(rèn)顯示方式display:block;
5、塊級(jí)元素的上下外邊距取最大值，左右累加。
6、塊級(jí)元素可轉(zhuǎn)成行內(nèi)元素和行內(nèi)塊級(jí)元素
div form table h1-h6 p ul ol li dl dt dd tr
figure header footer nav aside section address
article
行內(nèi)元素
1、顯示在同一行
2、不可以設(shè)置寬和高
3、不能嵌套塊級(jí)元素，可以嵌套行內(nèi)元素和行內(nèi)塊元素
4、默認(rèn)顯示方式:display:inline
5、行內(nèi)元素沒有上下的內(nèi)外邊距，左右累加
6、行內(nèi)元素可以轉(zhuǎn)成塊級(jí)元素和行內(nèi)塊元素
a span strong b em i
time
行內(nèi)塊元素
1、在同一行顯示
2、可以設(shè)置寬和高
3、默認(rèn)顯示方式:display:inline-block
4、行內(nèi)塊元素的上下的外邊距累加,左右累加
5、行內(nèi)塊可以轉(zhuǎn)成塊級(jí)元素和行內(nèi)元素
img input select textarea td audio video
table
form
二、CSS
- 樣式表
行內(nèi)樣式表
內(nèi)部樣式表（內(nèi)嵌式樣式表）
外部樣式表
鏈接式
導(dǎo)入式
樣式表的優(yōu)先級(jí)
就近原則
選擇器
基本選擇器
* element .class #id element,.class,#id
層級(jí)選擇器
空格
>
+
~
偽類選擇器
動(dòng)態(tài)偽類選擇器
:link :visited :hover :active
LoVeHAte原則
結(jié)構(gòu)偽類選擇器
:first-child :nth-child :last-child
:first-of-type :nth-of-type :last-of-type
UI偽類選擇器
:checked
:enabled
:disabled
屬性選擇器
[attr] [attr=value]
偽元素（對(duì)象）選擇器
::before ::after ::first-line :first-letter
選擇器的優(yōu)先級(jí)
!important>行內(nèi)>id>.class>element>*
選擇器的權(quán)重
1000 100 10 1 0
CSS屬性
文字屬性
font-size:12px 14px 16px
font-family:微軟雅黑
font-weight:bold/normal
font-style:normal/italic
color
font-face
段落屬性
text-decoration:none/underline/overline/line-through
text-indent:2em/20px;
text-align:center/left/right
line-height:20px;
vertical-align:middle/bottom/top
text-transform:uppercase/lowercase/capitalize
white-space:nowrap
letter-spacing:20px;
word-spacing:20px;
text-oveflow:ellipsis
text-shadow:
背景屬性
background-color:#000 / rgb() /rgba()/ red;
background-image:url(),url();
background-position:left center,left bottom;
background-repeat:no-repeat,repeat-x;
background-attachment:fixed/scroll;
background-clip:border-box/padding-box/content-box;
background-size:20px 30px;
background-origin:border-box/padding-box/content-box;
background-image:linear-gradient(to top,red,blue);
background
列表屬性
list-style-type:
list-style-image:
list-style-position
list-style
邊框?qū)傩? border-style:solid/dashed/dotted
border-color:
border-width:
border-top:
border-bottom:
border-left:
border-right
border:
border-radius:
box-shadow:
box-sizing:border-box/conent-box
內(nèi)邊距
padding-left
padding-right
padding-top
padding-bottom
padding
外邊距
margin-top
margin-bottom
margin-left
margin-right
margin
布局屬性
float:left/right/none
clear:left/right/both
定位屬性
position:relative/absolute/fixed
left
top
right
bottom
z-index
溢出屬性
overflow:hidden/visible/auto
overflow-x:
overflow-y:
顯示屬性：
display:none/block/inline/inline-block
visibility:hidden/visible
動(dòng)畫屬性：
animation:
變形
transform
2d
translate
skew
scale
rotate
3d
transform-origin
過渡
transition:
布局頁(yè)面
頁(yè)面結(jié)構(gòu);
頭部
導(dǎo)航
banner
主體
左
中
右（側(cè)邊欄）
腳步
頁(yè)面組成部分
導(dǎo)航
1 2 3
欄目標(biāo)題
文章列表
圖片列表
頁(yè)面制作