只是總結(jié)了一些平時(shí)容易忘記的知識(shí)點(diǎn)勺馆，太基礎(chǔ)的沒摘錄，望大家不喜就噴。
0.HTML和CSS
1.標(biāo)簽子元素
/*a盒子下面的第一個(gè)b元素先朦，注意b元素必須為a元素下面的第一個(gè)元素，否則失效*/
.a > b:nth-child(1){
color:red;
font-size:red;
}
.ul1 > li:nth-child(1):修飾class=ul1的第1個(gè)li子元素
.ul1 > li:nth-child(2):修飾class=ul1的第2個(gè)li子元素
.ul1 > li:nth-child(3):修飾class=ul1的第3個(gè)li子元素
2.邊框
boder-radius:設(shè)置邊框圓角犬缨，設(shè)置為50%為一個(gè)圓喳魏；
box-shadow:10px 10px 5px red;/x,y方向偏移量，透明度怀薛，顏色/
transition:transform 2s;旋轉(zhuǎn)效果兩秒內(nèi)平滑完成刺彩；
transform:rotate(50deg);旋轉(zhuǎn)50度
text-decoration:none 去掉文字的下劃線
text-decoration:underline; 下劃線
text-decoration:line-through; 刪除線
list-style: none;去掉li 的圓心
border:solid 1px red; 設(shè)置容器的邊框線為1px，實(shí)線solid,dashed虛線,dotted點(diǎn),紅色枝恋，會(huì)占實(shí)際寬高
outline:solid 1px red; 設(shè)置容器的邊框線為1px迂苛，實(shí)線,紅色，不會(huì)占實(shí)際寬高
line-height:30px;行高鼓择，設(shè)置文字垂直居中方式,如果行高值等于容器的值就會(huì)垂直居中
text-align:center/left/right; 設(shè)置文字水平居中方式, 居中/靠左/靠右
letter-spacing:5px; 設(shè)置每個(gè)字符間距
3.white-space
white-space: normal; 默認(rèn)空白處理三幻，忽略空白；
white-space: pre;保留空白符呐能；
white-space: pre-line;容器寬度不夠時(shí)念搬，自動(dòng)換行
4.background
background-color:black;背景顏色
background-image:url("../images/b.jpg");
background-repeat: no-repeat;背景圖不重復(fù)
background-repeat: repeat-x;重復(fù)水平方向
background-repeat: repeat-y;重復(fù)垂直方向
background:url("../images/b.jpg") no-repeat;
5.list-style
list-style:none; 去掉li的圓心
list-style:disc;實(shí)心圓
list-style:circle;空心圓
list-style:square;實(shí)心正方形
list-style:decimal; 數(shù)字1.2.3
6.內(nèi)外間距
左外間距
margin-left:30px;
margin-top:40px;
上抑堡，右，下朗徊，左
margin:30px 100px 200px 100px;
內(nèi)間距
padding:30px 100px 100px 100px;
盒子實(shí)際寬高=height/width + padding + border
7.border
border:solid 10px blue;
border-right:solid 10px blue; 右邊框線
border-top:solid 10px blue;; 上邊框線
border-left:solid 10px blue;;左邊框線
border-bottom:solid 10px blue;底部邊框線
margin:auto;實(shí)現(xiàn)相對(duì)外部容器的水平居中
8.選擇器
1：ID選擇器 #id{}
2：類選擇器 .class{}
3：標(biāo)簽選擇器 div{}
4：后代選擇器
語法：div p
作用：選擇 div 里面的所有p元素首妖，不論是第一代，還是第二代
div .p
作用：選擇所有div的后代中class="p"的元素爷恳，后代不論是第一代有缆，還是第二代
div .p #nav
作用:選擇所有div的后代中class="p"的后代中ID=nav的元素
5：子代選擇器：
語法：div > p
作用：只選擇第一代元素
6：相鄰兄弟選擇器
語法：div + p
作用：只選擇div后面的第一個(gè)p元素，注意是相鄰的第一個(gè)温亲。
7：兄弟選擇器
語法：div ~ p
作用：選擇div后面的所有p元素
選擇器的優(yōu)先級(jí)：標(biāo)簽<類選擇器<ID選擇器
9.a標(biāo)簽
a標(biāo)簽的幾種狀態(tài)：
a:link 未訪問狀態(tài)
a:visited 已訪問狀態(tài)
a:hover 鼠標(biāo)移上狀態(tài)
a:active 激活選定狀態(tài)：鼠標(biāo)單擊但未釋放
定義錨鏈接的步驟：
1：定義錨
<a name="名字"></a>
<a name="bottom"></a>
2：鏈接錨
<a href="#錨的名字"> 文字</a>
<a href="#bottom">跳到底部</a>
10.樣式
1:內(nèi)部樣式
<style>
</style>
2:行內(nèi)樣式
<span style="font-size:20px;color:red">10</span>元
3:外部樣式
<link href="css的路徑" rel="stylesheet"/>
行內(nèi)樣式優(yōu)先級(jí)最高, 內(nèi)部樣式和外部樣式誰后加載就優(yōu)先
11.一些常用css3標(biāo)簽用法
border-radius:2px; //單位是圓角的弧度
border-radius:50%; 圓
box-shadow:10px 10px 5px 顏色
第1棚壁，2個(gè)參數(shù)是設(shè)置陰影x，y方向栈虚，第3個(gè)參數(shù)設(shè)置陰影的透明度袖外，
第4個(gè)參數(shù)設(shè)置陰影的大小范圍，第5個(gè)參數(shù)設(shè)置陰影的顏色魂务。
box-shadow:-5px -5px 20px 2px black;
background-size 屬性規(guī)定背景圖片的尺寸曼验。
在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸和容器的大小決定的粘姜。
在 CSS3 中鬓照，可以規(guī)定背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片孤紧。
您能夠以像素或百分比規(guī)定尺寸颖杏。如果以百分比規(guī)定尺寸，那么尺寸相對(duì)于父元素的寬度和高度坛芽。
background-size: 200% 200px;
div{
background:url(bg_flower.gif);
}
在 CSS3 中留储，text-shadow 可向文本應(yīng)用陰影。
h1{
text-shadow: 5px 5px 5px #FF0000;
}
rotate() 方法
通過 rotate() 方法咙轩，元素順時(shí)針旋轉(zhuǎn)給定的角度获讳。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)活喊。
div{
transform:rotate(50deg); //旋轉(zhuǎn)50度
}
transform: rotate3d(1,1,1,50deg);
translate() 方法
通過 translate() 方法丐膝，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)：
div{
transform: translate(50px,100px);
}
scale() 方法
通過 scale() 方法钾菊，元素的尺寸會(huì)增加或減少帅矗，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：
實(shí)例
div{
transform: scale(2,4);
}
skew() 方法
通過 skew() 方法，元素翻轉(zhuǎn)給定的角度煞烫，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：
實(shí)例
div{
transform: skew(30deg,20deg);
}
應(yīng)用于寬度屬性的過渡效果浑此，時(shí)長為 2 秒：
div{
transition: width 2s;
}
實(shí)例
向?qū)挾取⒏叨群娃D(zhuǎn)換添加過渡效果：
div{
transition: width 2s, height 2s, transform 2s;
}
transition:0.7s; 所有效果都在0.7秒內(nèi)過渡完成
如果是img只能縮放scale()
div可以直接設(shè)置寬高用transition過渡完成
//縮放0.5倍滞详，同時(shí)x,y移動(dòng)50px
transform: scale(0.5,0.5) translate(50px,50px);
//針對(duì)transform的效果變化全部在2s內(nèi)完成
transition:transform 1s,width 2s;
//所有效果變化都在2s內(nèi)完成
transition-duration: 2s;
動(dòng)畫
@keyframes myfirst 定義動(dòng)畫,名稱叫myfirst
{
from {background: red;}
to {background: yellow;}
}
把 "myfirst" 動(dòng)畫捆綁到 div 元素凛俱，時(shí)長：5 秒：
div{
animation: myfirst 5s;
}
