1弓柱、主流瀏覽器的內(nèi)核：IE(trident)沟堡、firefox（gecko）、chrome （webkit）
2禀横、http：超文本傳輸協(xié)議 hypertext transfer protocol
3伤哺、html：超文本標(biāo)記語言 hypertext markup language
4立莉、css：層疊樣式表
5、javascript：行為動作
6茫舶、h1用于LOGO
7饶氏、特殊字符：?版權(quán)
8、iframe內(nèi)嵌窗口與A標(biāo)簽配合使用：用于廣告區(qū)
????????width
????????height
????????scrolling="auto" 是否出現(xiàn)滾動條
????????auto 默認(rèn) 自動
????????yes
????????no
????????frameborder=""
????????????0 沒有邊框
????????????1 有邊框
marginheight 上下多XX空間
marginwidth 左右多XX空間
9疹启、video
src
資源格式：mp4 webM ogg
controls
autoplay
width
height
audio
src=路徑
資源格式：mp3 wav ogg
controls 控制臺
controls="controls"
autoplay="autoplay"
10喊崖、table表格
cellspacing 單元格到單元格距離
cellpadding 內(nèi)容距離單元格的距離
rowspan 合并行
colspan 合并列
caption 是在table里面的第一行 描述信息
thead
tbody
tfoot
注：1荤懂、thead塘砸，tbody掉蔬，tfoot必須同時出現(xiàn)
2女轿、如果tbody里面的內(nèi)容太多，那么把tfoot放到tbody前面
11谈喳、form表單文本域“textarea”
placeholder提示文字
12婿禽、
13扭倾、
通配符<標(biāo)簽(偽元素)
0 1 10 100 1000 infinity
14膛壹、font-family默認(rèn)微軟雅黑16號字，多個單詞組成用引號
15肩民、font-weight字體加粗
bold加粗
normal正常
16链方、font-style字體傾斜:italic
17、text-indent文本縮進(jìn)em相對自己字體大小祟蚀，如果自己沒有字體大小，會繼承父級的字體大小
18患雏、text-decoration:underline下劃線
line-through中劃線
overline上劃線
none
19淹仑、background-size:contain優(yōu)先占滿寬度
cover優(yōu)先占滿高度
注：當(dāng)圖片和顏色都存在時攻人，圖片在上面
20悬槽、文字圖片對齊
文字圖片低對齊 默認(rèn)的樣子
文字圖片中對齊 img vertical-align: middle|top|bottom;
文字圖片上對齊 img vertical-align:top
float: left;
21初婆、 BFCblock format content 塊級格式化上下文
這是一種效果磅叛，這種效果可以觸發(fā)
position:absolute
display:inline-block
float：left
overflow：hidden
22、:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標(biāo)懸停
:active 激活鏈接(點下的一瞬間)
23兆龙、:和::的區(qū)別
::一般用于 偽元素
：一般用于偽類
----------------
::超偽類一般用于剛出來的還沒有被所有瀏覽器所兼容紫皇，或者沒有被w3c正式承認(rèn)
:已經(jīng)被承認(rèn)，并且兼容良好
24聪铺、 隱藏：display:none 不會占據(jù)原來的位置
隱藏：visibility:hidden 占著原來的位置
顯示：display：block
rgba
opacity：0
25、相對定位 position: relative;不改變元素類型撒桨，相對自己凤类，沒有脫離文檔流蝶押，為絕對做父級
絕對定位 position: absolute;改變元素類型棋电，相對relative/body，脫離文檔流企锌，用于運動效果圖
固定定位 position: fixed;改變元素類型撕攒，相對瀏覽器定位抖坪，脫離文檔流闷叉，廣告握侧，固定導(dǎo)航欄
26品擎、 定位層級
1、后寫的在上面
2甚颂、z-index 默認(rèn)是0 數(shù)越大 層級越高
27瓣铣、 清除浮動三件套.clearfix::after{
content: '';
clear: both;
display: block;
}
28、單行文本溢出隱藏三件套white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
注：定義類時記得配合title使用實現(xiàn)鼠標(biāo)懸停顯示全部字
29梦碗、 nth-child(n)
是從1開始的
按子元素的位置排列的
nth-of-type(n)
同類型子元素順序
last-child
最后一個元素
30洪规、 偽類選擇器
:checked 選擇選中的
:disable 選擇不可用的
:not() 反選
:enable 選擇可用的
::selection 用戶選中
::placeholder 提示文字
31、過渡
transition 參與過渡的屬性 過渡的時間 過渡的類型 延遲時間
單個屬性 s ms linear 勻速
all 500ms ease 由慢到快
.5s ease-in 慢速開始
ease-out 緩慢結(jié)束
ease-in-out 慢速開始雄人，慢速結(jié)束
32础钠、box-shadow:x軸的偏移量 y軸的偏移量 陰影的模糊半徑 陰影的擴(kuò)展半徑 陰影的顏色 投影的方式
可以是負(fù)數(shù) 不寫是外陰影
inset內(nèi)陰影
text-shadow: 4px 4px 4px red;
33叉谜、transform
rotate(deg)旋轉(zhuǎn)
scale() 0沒了 1不變 -1縮小在放大 一個值代表X,Y同時縮放
translate(x,y) 1個值代表X軸
skew(xdeg,ydeg)拉伸,一個值代表X軸
注：觸發(fā)的先后的順序：先寫的后執(zhí)行旗吁，后寫的先執(zhí)行
34停局、 變形的注意：
只能作用于塊或者行內(nèi)快
物體本身沒有發(fā)生變化码倦，盒子模型沒有變袁稽，他不會引起重排工禾，他只會重繪运提，性能高
看起來盒子動了，其實位置沒有發(fā)生變化
盒子模型的大小
內(nèi)容+padding+border+margin
盒子模型發(fā)生變化后：1闻葵、整個頁面結(jié)構(gòu)需要重新排列民泵，2整個頁面需要重新繪制（上色）
重繪重排
35、3D
景深 perspective(800px)
800-1000
假3D
transform：rotate(deg)
rotateX
rotateY
rotateZ 這個就是默認(rèn)rotate()
rotate3d(x,y,z)
translateX
translateY
translateZ
translate3d()
真正的3d
只讓物體出現(xiàn)三維空間
讓父級變成3d空間
transform-style:preserve-3d;
36槽畔、動畫
設(shè)置(定義)動畫
@keyframes 動畫名稱{
from{}
to{}
}
@keyframes 動畫名稱{
1%{}
栈妆。。。鳞尔。
100%{}
}
調(diào)用動畫
animation [動畫名稱] [動畫執(zhí)行的時間] [動畫播放的次數(shù)] [動畫的過渡效果] [等待嬉橙，延遲時間] [最終效果]
1 linear forwards
infinite ease
ease-in
ease-out
37、 線性漸變
linear-gradient(color1,color,.....)
linear-gradient(方向,color1,color,.....)
方向0 從下向上
90 從左到右
180 從上到下
270 從右到左
top
left
bootom
right
top left 不兼容
linear-gradient(方向,color1 大小,color 大小,.....)
徑向漸變
background:radial-gradient(red,blue) ;
background:radial-gradient(形狀,red,blue) ;
circle 圓形
ellipse 橢圓
background:radial-gradient(形狀,red 大小,blue 大小) ;
background:-webkit-radial-gradient(位置,形狀,red 大小,blue 大小) ;
位置：center left top...
x y 坐標(biāo)
不兼容
-webkit- 谷歌 蘋果
-moz- 火狐
-ms- 微軟
-o- 歐鵬
什么都不加的
background:-webkit-radial-gradient(位置,形狀,red 大小,blue 大小) ;
background:-moz-radial-gradient(位置,形狀,red 大小,blue 大小) ;
background:-ms-radial-gradient(位置,形狀,red 大小,blue 大小) ;
background:-o-radial-gradient(位置,形狀,red 大小,blue 大小) ;
background:radial-gradient(位置,形狀,red 大小,blue 大小) ;
重復(fù)漸變
background:repeating-linear-gradient(red 0px,red,10px,blue 10px, blue 20px);
background:repeating-radial-gradient(red 0px, blue 10px);
38寥假、蒙版
類似背景圖
有顏色的地方顯示出來糕韧，沒有顏色的地方不顯示
-webkit-mask: url(1.png);
-webkit-mask: 漸變
-webkit-mask-position:x y
文本蒙版
background:漸變|背景圖 //文字顯示的顏色
-webkit-background-clip:text;
color: rgba(0,0,0,0); //字體顏色透明
39、倒影
-webkit-box-reflect:方向 距離 顏色 ;
below
above
-webkit-box-reflect: below 4px linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
