20200107pm
20200107
html
html中有哪些塊級元素？有哪些行內元素？
\- 行內元素 一個行內元素只佔據它對應標籤的邊框所包含的空間 通常狀況下，行內元素只能包含數據和其餘行內元素 b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea \- 塊級元素 佔據一整行，高度、行高、內邊距和外邊距均可以改變，能夠容納塊級標籤和其餘行內標籤 header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
img標籤中alt是作什麼用的？
\- img的alt屬性 若是沒法顯示圖像，瀏覽器將顯示alt指定的內容 \- 元素title屬性 在鼠標移到元素上時顯示title的內容
src和href的區別是什麼？
\- href href標識超文本引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間創建聯繫 若在文檔中添加href ，瀏覽器會識別該文檔爲 CSS 文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用 link 方式加載 CSS，而不是使用 @import 方式。 \- src src表示引用資源，替換當前元素，用在img，script，iframe上，src是頁面內容不可缺乏的一部分。 當瀏覽器解析到src ，會暫停其餘資源的下載和處理（圖片不會暫停其餘資源下載），直到將該資源加載、編譯、執行完畢，相似於將所指向資源應用到當前內容。這也是爲何建議把 js 腳本放在底部而不是頭部的緣由。
css
如何兼容css？
https://www.jianshu.com/p/a6f...javascript
一、CSS Hack
咱們爲了讓頁面造成統一的效果，要針對不一樣的瀏覽器/版本而寫css的過程就叫作CSS hack
(1)IE條件註釋法
即在正常代碼以外添加判別IE瀏覽器或對應版本的條件註釋，符合條件的瀏覽器或者版本號纔會執行裏面的代碼。
<!--格式-->
<!--lt是小於 gt是大於 lte是小於等於 gte是不小於 ！是不等於-->
<!--\[if IE\]>
你想要執行的代碼
<!\[endif\]-->
<!--\[if lt IE8\]>
你想要執行的代碼
<!\[endif\]-->
<!--\[if ! IE 8\]>
你想要執行的代碼
<!\[endif\]-->
<!--示例1-->
<!--\[if lte IE 8\]>
<link rel="stylesheet" type="text/css" href="base.css"/>
<!\[endif\]-->
1.png
2.png
(2)CSS屬性前綴法
即給css的屬性添加前綴，好比\*能夠被IE6/IE7識別，但\_只能被IE6識別，IE6-IE10均可以識別"\\9"，IE6不能識別！important ，Firefox不能識別 \* \_ \\9
說明：
在標準模式中
"-" 減號是IE6專有的hack
"\\9" IE6-IE10 都生效
"\\0" IE8-IE10 都生效，是IE8-IE10的hack
"\\9\\0" 只對IE9-IE10 生效
<!--示例2-->
<style>
h1{
color: #FF0000; /\* all \*/
color: #222\\9; /\* IE \*/
\*color: #333; /\* IE6/IE7 \*/
\_color:#444; /\* IE6 \*/
}
</style>
3.png
4.png
5.png
6.png
IEtester：http://www.ietester.cn/ 測試兼容的
(3)選擇器前綴法
IE6 可識別 \*div{color:red}
IE7 可識別 \*+{color:red}
@media screen \\9{...} 只對IE6/IE7生效
@media \\0screen {body {background:blue}} 只對IE6/7/8有效
。。。。。
<!--示例3-->
<style>
\*h2{
color:orange;
}
</style>
二、瀏覽器私有屬性
\-moz 表明Firefox瀏覽器私有屬性
\-ms 表明IE瀏覽器私有屬性
\-webkit 表明chrome、Safari私有屬性
\-o 表明Opera私有屬性
注意：對於私有屬性，要把標準寫法放到最後，兼容性寫法放到前面
咱們常常會在某個CSS的屬性前添加一些前綴，好比：-webkit-，-moz-，-ms-，這些就是瀏覽器的私有屬性。
爲何會出現私有屬性呢？這是由於制定HTML和CSS標準的組織w3c動做是很慢的。
一般，有W3C組織成員提出一個新屬性，好比說圓角border-radius，你們都以爲很好，但w3c制定標準，要走很複雜的程序、審查等，而瀏覽器市場推廣時間緊，若是一個屬性已經夠成熟了，就會在瀏覽器中加入支持。
可是爲避免往後w3c公佈標準時有所變動，會加入一個私有前綴，好比 -webkit- border-radius，經過這種方式來提早支持新屬性，等到往後w3c公佈了標準，border-radius的標準寫法確立以後，再讓新版的瀏覽器支持border-radius這種寫法。
<!--示例4-->
.box{
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius:150px;
-o-border-radius: 150px;
border-radius: 150px;
background-color: royalblue;
}
三、瀏覽器CSS樣式初始化
針對不一樣瀏覽器渲染效果的不一樣，能夠進行瀏覽器css樣式初始化，也就是加一個reset.css文件
/\*淘寶的reset.css\*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}
body,button,input,select,textarea { font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\\5b8b\\4f53,sans-serif}
h1,h2,h3,h4,h5,h6 {font-size:100%}
address,cite,dfn,em,var {font-style:normal}
code,kbd,pre,samp {font-family:courier new,courier,monospace}
small {font-size:12px}
ol,ul {list-style:none}
a {text-decoration:none}
a:hover {text-decoration:underline}
sup {vertical-align:text-top}
sub {vertical-align:text-bottom}
legend {color:#000}
fieldset,img {border:0}
button,input,select,textarea {font-size:100%}
table {border-collapse:collapse;border-spacing:0}
css中選擇器有哪幾種？選擇器的優先級是什麼？(出題:div>span和#s1誰的優先級高？div>span和.s1誰的優先級高？)
\- 選擇器類型： - ID #id - class .class - 標籤 p - 通用 \* - 屬性 \[type="text"\] - 僞類 ：hover - 僞元素 ::first-line - 子選擇器、相鄰選擇器 \- 權重計算規則： - 第一等：表明內聯樣式，如: style=」」，權值爲1000。 - 第二等：表明ID選擇器，如：#content，權值爲0100。 - 第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。 - 第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。 - 通配符、子選擇器、相鄰選擇器等的。如\*、>、+,權值爲0000。 - 繼承的樣式沒有權值。
選擇器權值的計算，不會超過本身的最大數量級 100個元素(1)元素選擇器相加，也不會大於10 #s1高 .s1高
css3有哪些新特性？
https://segmentfault.com/a/11...css
2.過渡
過渡，是我在項目裏面用得最多的一個特性了！也相信是不少人用得最多的一個例子！我日常使用就是想讓一些交互效果（主要是hover動畫），變得生動一些，不會顯得那麼生硬！好了，下面進入正文！
引用菜鳥教程的說法：CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。要實現這一點，必須規定兩項內容：指定要添加效果的CSS屬性指定效果的持續時間。
2-1語法
transition： CSS屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)
栗子1
/\*寬度從原始值到制定值的一個過渡，運動曲線ease,運動時間0.5秒，0.2秒後執行過渡\*/
transition：width,.5s,ease,.2s
栗子2
/\*全部屬性從原始值到制定值的一個過渡，運動曲線ease,運動時間0.5秒\*/
transition：all,.5s
上面栗子是簡寫模式，也能夠分開寫各個屬性（這個在下面就再也不重複了）
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
2-2實例-hover效果
clipboard.png
上面兩個按鈕，第一個使用了過渡，第二個沒有使用過渡，你們能夠看到當中的區別，用了過渡以後是否是沒有那麼生硬，有一個變化的過程，顯得比較生動。
固然這只是一個最簡單的過渡栗子，兩個按鈕的樣式代碼，惟一的區別就是，第一個按鈕加了過渡代碼transition: all .5s;
2-3實例-下拉菜單
clipboard.png
上面兩個菜單，第一個沒有使用過渡，第二個使用過渡，你們明顯看到區別，使用了過渡看起來也是比較舒服！代碼區別就是有過渡的ul的上級元素(祖先元素)有一個類名（ul-transition）。利用這個類名，設置ul的過渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}
可能你們不知道我在說什麼！我貼下代碼吧
html
<div class="demo-hover demo-ul t\_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">框架</a>
<ul>
<li><a href="#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="demo-hover demo-ul ul-transition t\_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">框架</a>
<ul>
<li><a href="#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
css
.demo-ul{margin-bottom: 300px;}
.demo-ul li{
padding: 0 10px;
width: 100px;
background: #f90;
position: relative;
}
.demo-ul li a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.demo-ul li ul{
position: absolute;
width: 100%;
top: 40px;
left: 0;
transform: scaleY(0);
overflow: hidden;
}
.ul-transition ul{
transform-origin: 0 0;
transition: all .5s;
}
.demo-ul li:hover ul{
transform: scaleY(1);
}
.demo-ul li ul li{
float: none;
background: #0099ff;
}
上面兩個能夠說是過渡很基礎的用法，過渡用法靈活，功能也強大，結合js，能夠很輕鬆實現各類效果（焦點圖，手風琴）等，以及不少意想不到的效果。這個靠你們要去挖掘！
3.動畫
動畫這個日常用的也不少，主要是作一個預設的動畫。和一些頁面交互的動畫效果，結果和過渡應該同樣，讓頁面不會那麼生硬！
3-1.語法
animation：動畫名稱，一個週期花費時間，運動曲線（默認ease），動畫延遲（默認0），播放次數（默認1），是否反向播放動畫（默認normal），是否暫停動畫（默認running）
栗子1
/\*執行一次logo2-line動畫，運動時間2秒，運動曲線爲 linear\*/
animation: logo2-line 2s linear;
栗子2
/\*2秒後開始執行一次logo2-line動畫，運動時間2秒，運動曲線爲 linear\*/
animation: logo2-line 2s linear 2s;
栗子3
/\*無限執行logo2-line動畫，每次運動時間2秒，運動曲線爲 linear，而且執行反向動畫\*/
animation: logo2-line 2s linear alternate infinite;
還有一個重要屬性
animation-fill-mode : none | forwards | backwards | both;
/\*none：不改變默認行爲。
forwards ：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards：在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。
both：向前和向後填充模式都被應用。 \*/
3-2.logo展現動畫
clipboard.png
這個是我用公司logo寫的動畫，沒那麼精細
代碼以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
width: 600px;
margin: 100px auto;
font-size: 0;
position: relative;
}
.logo-box div{
display: inline-block;
}
.logo-box .logo-text{
margin-left: 10px;
}
.logo-box .logo1{
animation: logo1 1s ease-in 2s;
animation-fill-mode:backwards;
}
.logo-box .logo-text{
animation: logoText 1s ease-in 3s;
animation-fill-mode:backwards;
}
.logo-box .logo2{
position: absolute;
top: 20px;
left: 20px;
animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
animation: logo2-line 2s linear;
}
@keyframes logo1 {
0%{
transform:rotate(180deg);
opacity: 0;
}
100%{
transform:rotate(0deg);
opacity: 1;
}
}
@keyframes logoText {
0%{
transform:translateX(30px);
opacity: 0;
}
100%{
transform:translateX(0);
opacity: 1;
}
}
@keyframes logo2-line {
0% { transform: translateX(200px)}
25% { transform: translateX(150px)}
50% { transform: translateX(100px)}
75% { transform: translateX(50px)}
100% { transform: translateX(0); }
}
@keyframes logo2-middle {
0% { transform: translateY(0); }
25% { transform: translateY(-100px); }
50% { transform: translateY(0); }
75% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>
<div class="wraper"><div class="item"></div></div>
</body>
</html>
下面讓你們看一個專業級別的
clipboard.png
代碼以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
overflow: hidden;
background: #fff;
}
.center {
margin: 80px auto;
}
.so {
display: block;
width: 500px;
height: 156px;
background: #ffffff;
}
.so .inner {
width: 500px;
height: 156px;
position: absolute;
}
.so .inner \* {
position: absolute;
animation-iteration-count: infinite;
animation-duration: 3.5s;
}
.so .inner .name {
position: absolute;
font-size: 54px;
left: 130px;
top: 95px;
}
.so .inner .name .b {
font-weight: bold;
}
.so .inner .stack-box {
top: 100px;
width: 115px;
height: 56px;
}
.so .inner .box {
width: 115px;
height: 56px;
left: 0px;
}
.so .inner .box div {
background: #BCBBBB;
}
.so .inner .box .bottom {
bottom: 0px;
left: 0px;
width: 115px;
height: 12px;
}
.so .inner .box .left {
bottom: 11px;
left: 0px;
width: 12px;
height: 34px;
}
.so .inner .box .right {
bottom: 11px;
left: 103px;
width: 12px;
height: 34px;
}
.so .inner .box .top {
top: 0px;
left: 0px;
width: 0;
height: 12px;
}
.so .inner .stack {
left: 22px;
top: 22px;
}
.so .inner .stack .inner-item {
background: #F48024;
width: 71px;
height: 12px;
}
.so .inner .stack .item {
transition: transform 0.3s;
width: 291px;
}
.so .inner .stack div:nth-child(1) {
transform: rotate(0deg);
}
.so .inner .stack div:nth-child(2) {
transform: rotate(12deg);
}
.so .inner .stack div:nth-child(3) {
transform: rotate(24deg);
}
.so .inner .stack div:nth-child(4) {
transform: rotate(36deg);
}
.so .inner .stack div:nth-child(5) {
transform: rotate(48deg);
}
.so .inner .box {
animation-name: box;
}
.so .inner .box .top {
animation-name: box-top;
}
.so .inner .box .left {
animation-name: box-left;
}
.so .inner .box .right {
animation-name: box-right;
}
.so .inner .box .bottom {
animation-name: box-bottom;
}
.so .inner .stack-box {
animation-name: stack-box;
}
.so .inner .stack {
animation-name: stack;
}
.so .inner .stack .inner-item {
animation-name: stack-items;
}
.so .inner .stack .item:nth-child(1) {
animation-name: stack-item-1;
}
.so .inner .stack .item:nth-child(2) {
animation-name: stack-item-2;
}
.so .inner .stack .item:nth-child(3) {
animation-name: stack-item-3;
}
.so .inner .stack .item:nth-child(4) {
animation-name: stack-item-4;
}
.so .inner .stack .item:nth-child(5) {
animation-name: stack-item-5;
}
@keyframes stack {
0% {
left: 22px;
}
15% {
left: 22px;
}
30% {
left: 52px;
}
50% {
left: 52px;
}
80% {
left: 22px;
}
}
@keyframes stack-item-1 {
0% {
transform: rotate(12deg \* 0);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg \* 0);
}
}
@keyframes stack-item-2 {
0% {
transform: rotate(12deg \* 1);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg \* 1);
}
}
@keyframes stack-item-3 {
0% {
transform: rotate(12deg \* 2);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg \* 2);
}
}
@keyframes stack-item-4 {
0% {
transform: rotate(12deg \* 3);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg \* 3);
}
}
@keyframes stack-item-5 {
0% {
transform: rotate(12deg \* 4);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg \* 4);
}
}
@keyframes stack-items {
0% {
width: 71px;
}
15% {
width: 71px;
}
30% {
width: 12px;
}
50% {
width: 12px;
}
80% {
width: 71px;
}
}
@keyframes box {
0% {
left: 0;
}
15% {
left: 0;
}
30% {
left: 30px;
}
50% {
left: 30px;
}
80% {
left: 0;
}
}
@keyframes box-top {
0% {
width: 0;
}
6% {
width: 0;
}
15% {
width: 115px;
}
30% {
width: 56px;
}
50% {
width: 56px;
}
59% {
width: 0;
}
}
@keyframes box-bottom {
0% {
width: 115px;
}
15% {
width: 115px;
}
30% {
width: 56px;
}
50% {
width: 56px;
}
80% {
width: 115px;
}
}
@keyframes box-right {
15% {
left: 103px;
}
30% {
left: 44px;
}
50% {
left: 44px;
}
80% {
left: 103px;
}
}
@keyframes stack-box {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(135deg);
}
50% {
transform: rotate(135deg);
}
83% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="so center">
<div class="inner">
<div class="stack-box">
<div class="stack">
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
</div>
<div class="box">
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="name">
stack<span class="b">overflow</span>
</div>
</div>
</div>
</body>
</html>
3-3.loading效果
clipboard.png
這個代碼實在太多了，你們直接上網址看吧。css3-loading
3-4.音樂震動條
clipboard.png
代碼以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS3模擬跳動的音符效果</title>
<style>
\*{margin:0;padding:0;list-style: none;}
body{background-color: #efefef;}
.demo-music {
position: absolute;
width: 100%;
height: 200px;
top: 120px;
zoom: 1.5;
}
.demo-music .music {
width: 80px;
height: 50px;
top: 50%;
left: 50%;
-webkit-transform: translate(-40px, -25px);
transform: translate(-40px, -25px);
position: absolute;
}
.demo-music #waves {
width: 80px;
height: 50px;
position: absolute;
top: 12px;
left: 12px;
}
.demo-music #waves li {
position: relative;
float: left;
height: 100%;
width: 12%;
overflow: hidden;
margin-right: 1px;
}
.demo-music #waves li span {
position: absolute;
bottom: 0;
display: block;
height: 100%;
width: 100px;
background: #09f;
}
.demo-music #waves .li1 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li2 span {
animation: waves 0.9s linear 0s infinite alternate;
-webkit-animation: waves 0.9s linear 0s infinite alternate;
}
.demo-music #waves .li3 span {
animation: waves 1s linear 0s infinite alternate;
-webkit-animation: waves 1s linear 0s infinite alternate;
}
.demo-music #waves .li4 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li5 span {
animation: waves 0.7s linear 0s infinite alternate;
-webkit-animation: waves 0.7s linear 0s infinite alternate;
}
.demo-music #waves .li6 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
@-webkit-keyframes waves {
10% {
height: 20%;
}
20% {
height: 60%;
}
40% {
height: 40%;
}
50% {
height: 100%;
}
100% {
height: 50%;
}
}
@keyframes waves {
10% {
height: 20%;
}
20% {
height: 60%;
}
40% {
height: 40%;
}
50% {
height: 100%;
}
100% {
height: 50%;
}
}
</style>
</head>
<body>
<div class="demo-music">
<div class="music">
<ul id="waves" class="movement">
<li class="li1"><span class="ani-li"></span></li>
<li class="li2"><span class="ani-li"></span></li>
<li class="li3"><span class="ani-li"></span></li>
<li class="li4"><span class="ani-li"></span></li>
<li class="li5"><span class="ani-li"></span></li>
<li class="li6"><span class="ani-li"></span></li>
</ul>
<div class="music-state"></div>
</div>
</div>
</body>
</html>
4.形狀轉換
這一部分，分2d轉換和3d轉換。有什麼好玩的，下面列舉幾個！
4-1.語法
transform:適用於2D或3D轉換的元素
transform-origin：轉換元素的位置（圍繞那個點進行轉換）。默認(x,y,z)：(50%,50%,0)
4-2.實例
transform:rotate(30deg);
clipboard.png
transform:translate(30px,30px);
clipboard.png
transform:scale(.8);
clipboard.png
transform: skew(10deg,10deg);
clipboard.png
transform:rotateX(180deg);
clipboard.png
transform:rotateY(180deg);
clipboard.png
transform:rotate3d(10,10,10,90deg);
clipboard.png
5.選擇器
css3提供的選擇器可讓咱們的開發，更加方便！這個你們都要了解。下面是css3提供的選擇器。
clipboard.png
圖片來自w3c。這一塊建議你們去w3c看（CSS 選擇器參考手冊），那裏的例子通俗易懂。我不重複講了。
提供的選擇器裏面，基本都挺好用的。可是我以爲有些不會很經常使用，好比，:root，:empty，:target，:enabled，:checked。並且幾個不推薦使用，網上的說法是性能較差\[attribute\*=value\]，\[attribute$=value\]，\[attribute^=value\]，這個我沒用過，不太清楚。
6.陰影
之前沒有css3的時候，或者須要兼容低版本瀏覽器的時候，陰影只能用圖片實現，可是如今不須要，css3就提供了！
6-1.語法
box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始方向（默認是從裏往外，設置inset就是從外往裏）;
6-1.栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:300px;
height:100px;
background:#09f;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
運行效果
clipboard.png
7.邊框
7-1.邊框圖片
7-1-1.語法
border-image: 圖片url 圖像邊界向內偏移 圖像邊界的寬度(默認爲邊框的寬度) 用於指定在邊框外部繪製偏移的量（默認0） 鋪滿方式--重複（repeat）、拉伸（stretch）或鋪滿（round）（默認：拉伸（stretch））;
7-1-2.栗子
邊框圖片（來自菜鳥教程）
clipboard.png
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
效果
clipboard.png
有趣變化
clipboard.png
clipboard.png
那個更好看，你們看着辦
7-2.邊框圓角
7-2-1.語法
border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/\*n1-n4四個值的順序是：左上角，右上角，右下角，左下角。\*/
7-2-2.栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
text-align:center;
width:300px;
border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>
運行結果
clipboard.png
8.背景
這一塊主要講css3提供背景的三個屬性
background-clip
制定背景繪製（顯示）區域
默認狀況（從邊框開始繪製）
clipboard.png
從padding開始繪製（顯示），不算border,，至關於把border那裏的背景給裁剪掉！（background-clip: padding-box;）
clipboard.png
只在內容區繪製（顯示），不算padding和border，至關於把padding和border那裏的背景給裁剪掉！（background-clip: content-box;）
clipboard.png
background-origin
引用菜鳥教程的說法：background-Origin屬性指定background-position屬性應該是相對位置
下面的div初始的html和css代碼都是同樣的。以下
html
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
css
div
{
border:10px dashed black;
padding:35px;
background:url('logo.png') no-repeat,#ccc;
background-position:0px 0px;
}
下面看下，background-origin不一樣的三種狀況
圖片描述
background-size
這個相信很好理解，就是制定背景的大小
下面的div初始的html和css代碼都是同樣的。以下
html
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
css
div
{
border:1px dashed black;
padding:35px;
background:url('test.jpg') no-repeat;
}
clipboard.png
多張背景圖
這個沒什麼，就是在一張圖片，使用多張背景圖片，代碼以下！
html
<p>兩張圖片的背景</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
css
div
{
border:1px dashed black;
padding:35px;
background-size: contain;
background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}
clipboard.png
9.反射
這個也能夠說是倒影，用起來也挺有趣的。
9-1.語法
\-webkit-box-reflect:方向\[ above-上 | below-下 | right-右 | left-左 \]，偏移量，遮罩圖片
9-2.下倒影
html
<p>下倒影</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom"></p>
css
.reflect-bottom-p {
padding-bottom: 300px;
}
.reflect-bottom {
-webkit-box-reflect: below;
}
clipboard.png
9-2.右倒影（有偏移）
clipboard.png
html
<p>右倒影同時有偏移</p>
<p><img src="test.jpg" class="reflect-right-translate"></p>
css
.reflect-right-translate {
-webkit-box-reflect: right 10px;
}
9-3.下倒影（漸變）
clipboard.png
html
<p>下倒影（漸變）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-mask"></p>
css
reflect-bottom-mask {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
9-3.下倒影（圖片遮罩）
使用的圖片
clipboard.png
clipboard.png
html
<p>下倒影（png圖片）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-img"></p>
css
.reflect-bottom-img {
-webkit-box-reflect: below 0 url(shou.png);
}
10.文字
換行
語法：word-break: normal|break-all|keep-all;
栗子和運行效果
clipboard.png
語法：word-wrap: normal|break-word;
栗子和運行效果
clipboard.png
超出省略號這個，主要講text-overflow這個屬性，我直接講實例的緣由是text-overflow的三個寫法，clip|ellipsis|string。clip這個方式處理不美觀，不優雅。string只在火狐兼容。
clipboard.png
超出省略號
這個其實有三行代碼，禁止換行，超出隱藏，超出省略號
html
<div>This is some long text that will not fit in the box</div>
css
div
{
width:200px;
border:1px solid #000000;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
運行結果
clipboard.png
多行超出省略號
超出省略號。這個對於你們來講，不難！可是之前若是是多行超出省略號，就只能用js模擬！如今css3提供了多行省略號的方法！遺憾就是這個暫時只支持webkit瀏覽器！
代碼以下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏</div>
</body>
</html>
效果圖
clipboard.png
這樣發現邊框貼着難看，要撐開一點，可是撐開上下邊框不要使用padding!由於會出現下面這個效果。
clipboard.png
正確姿式是這樣寫
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
padding:0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height:30px;
height:60px;
}
</style>
運行結果
clipboard.png
這樣寫，就算在不是webkit內核的瀏覽器，也能夠優雅降級（高度=行高\*行數（webkit-line-clamp））！
clipboard.png
文字陰影
語法：text-shadow:水平陰影，垂直陰影，模糊的距離，以及陰影的顏色。
栗子：text-shadow: 0 0 10px #f00;
效果
clipboard.png
11.顏色
這個其實就是css3提供了新的顏色表示方法。
rgba
一個是rgba（rgb爲顏色值，a爲透明度）
color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);
clipboard.png
hsla
h:色相」，「s：飽和度」，「l：亮度」，「a：透明度」
這個我姿式瞭解過，沒用過，這裏簡單給一個例子
color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);
clipboard.png
12.漸變
css3的漸變能夠說是一大亮點，提供了線性漸變，徑向漸變，圓錐漸變（w3c和菜鳥教程都沒有說起，是我從一篇文章瞭解到，可是我本身在谷歌瀏覽器嘗試，倒是一個無效的寫法！你們若是知道怎麼用，請告知！感謝）
漸變這一部分，因爲用法靈活，功能也強大，這個寫起來很長，寫一點又感受沒什麼意思，我這裏貼幾個連接教程給你們，在文章我很少說了，畢竟我也是從那幾個地方學的，他們寫得也是比我好，比我詳細！
CSS3 Gradient
再說CSS3漸變——線性漸變
再說CSS3漸變——徑向漸變
神奇的 conic-gradient 圓錐漸變（這篇就是看我看到圓錐漸變的文章）
13.Filter（濾鏡）
css3的濾鏡也是一個亮點，功能強大，寫法也靈活。
栗子代碼以下
<p>原圖</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" />
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" />
<p>飽和度saturate(2)</p>
<img src="test.jpg" />
<p>色相旋轉hue-rotate(90deg)</p>
<img src="test.jpg" />
<p>反色filter:invert(1)</p>
<img src="test.jpg" />
<p>透明度opacity(.5)</p>
<img src="test.jpg" />
<p>亮度brightness(.5)</p>
<img src="test.jpg" />
<p>對比度contrast(2)</p>
<img src="test.jpg" />
<p>模糊blur(3px)</p>
<img src="test.jpg" />
<p>陰影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" />
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
14.彈性佈局
這裏說的彈性佈局，就是flex；這一塊要講的話，必需要所有講完，不講完沒什麼意思，反而會把你們搞蒙！講完也是很長，因此，這裏我也只貼教程網址。博客講的很好，很詳細！
Flex 佈局教程：語法篇
Flex 佈局教程：實例篇
15.柵格佈局
柵格化佈局，就是grid；這一塊和flex同樣，要講就必須講完。這塊的內容和flex差很少，也有點長，這裏我也貼連接，這個連接講得也很詳細！
Grid佈局指南
16.多列布局
這一塊，我也是瞭解過，我以爲多列應該仍是挺有用的。雖然我沒在項目中用過，下面我簡單說下！舉個例子！這個屬性，建議加私有前綴，兼容性有待提升！
html
<div class="newspaper">
當我年輕的時候，我夢想改變這個世界；當我成熟之後，我發現我不可以改變這個世界，我將目光縮短了些，決定只改變個人國家；當我進入暮年之後，我發現我不可以改變咱們的國家，個人最後願望僅僅是改變一下個人家庭，可是，這也不可能。當我如今躺在牀上，行將就木時，我忽然意識到：若是一開始我僅僅去改變我本身，而後，我可能改變個人家庭；在家人的幫助和鼓勵下，我可能爲國家作一些事情；而後，誰知道呢?我甚至可能改變這個世界。
</div>
css
.newspaper
{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule:2px solid #000;
-webkit-column-rule:2px solid #000;
-mox-column-rule:2px solid #000;
}
clipboard.png
17.盒模型定義
box-sizing這個屬性，網上說法是：屬性容許您以特定的方式定義匹配某個區域的特定元素。
這個你們看着可能不知道在說什麼，簡單粗暴的理解就是：box-sizing:border-box的時候，邊框和padding包含在元素的寬高以內！以下圖
圖片描述
box-sizing:content-box的時候，邊框和padding不包含在元素的寬高以內！以下圖
圖片描述
18.媒體查詢
媒體查詢，就在監聽屏幕尺寸的變化，在不一樣尺寸的時候顯示不一樣的樣式！在作響應式的網站裏面，是必不可少的一環！不過因爲我最近的項目都是使用rem佈局。因此媒體查詢就沒怎麼用了！可是，媒體查詢，仍是很值得一看的！說不定哪一天就須要用上了！
栗子代碼以下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: pink;
}
@media screen and (max-width: 960px) {
body {
background-color: darkgoldenrod;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置瀏覽器窗口查看效果！</h1>
<p>若是媒體類型屏幕的可視窗口寬度小於 960 px ，背景顏色將改變。</p>
<p>若是媒體類型屏幕的可視窗口寬度小於 480 px ，背景顏色將改變。</p>
</body>
</html>
運行效果
clipboard.png
19.混合模式
混合模式，就像photoshop裏面的混合模式！這一塊，我瞭解過，在項目上沒用過，可是我以爲這個應該不會沒有用武之地！
css3的混合模式，兩個（background-blend-mode和mix-blend-mode）。這兩個寫法和顯示效果都很是像！區別就在於background-blend-mode是用於同一個元素的背景圖片和背景顏色的。mix-blend-mode用於一個元素的背景圖片或者顏色和子元素的。看如下代碼，區別就出來了！
這一塊圖片不少，你們看圖片快速掃一眼，看下什麼效果就好！
background-blend-mode
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
width: 480px;
height: 300px;
background:url('test.jpg')no-repeat,#09f;
}
</style>
<body>
<!---->
<p>原圖</p>
<div></div>
<p>multiply正片疊底</p>
<div ></div>
<p>screen濾色</p>
<div ></div>
<p>overlay疊加</p>
<div ></div>
<p>darken變暗</p>
<div ></div>
<p>lighten變亮</p>
<div ></div>
<p>color-dodge顏色減淡模式</p>
<div ></div>
<p>color-burn顏色加深</p>
<div ></div>
<p>hard-light強光</p>
<div ></div>
<p>soft-light柔光</p>
<div ></div>
<p>difference差值</p>
<div ></div>
<p>exclusion排除</p>
<div ></div>
<p>hue色相</p>
<div ></div>
<p>saturation飽和度</p>
<div ></div>
<p>color顏色</p>
<div ></div>
<p>luminosity亮度</p>
<div ></div>
</body>
</html>
運行效果
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
mix-blend-mode
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
padding: 20px;
width: 480px;
background: #09f;
}
</style>
<body>
<p>原圖</p>
<div><img src="test.jpg"/></div>
<p>multiply正片疊底</p>
<div><img src="test.jpg" /></div>
<p>screen濾色</p>
<div><img src="test.jpg" /></div>
<p>overlay疊加</p>
<div><img src="test.jpg" /></div>
<p>darken變暗</p>
<div><img src="test.jpg" /></div>
<p>lighten變亮</p>
<div><img src="test.jpg" /></div>
<p>color-dodge顏色減淡模式</p>
<div><img src="test.jpg" /></div>
<p>color-burn顏色加深</p>
<div><img src="test.jpg" /></div>
<p>hard-light強光</p>
<div><img src="test.jpg" /></div>
<p>soft-light柔光</p>
<div><img src="test.jpg" /></div>
<p>difference差值</p>
<div><img src="test.jpg" /></div>
<p>exclusion排除</p>
<div><img src="test.jpg" /></div>
<p>hue色相</p>
<div><img src="test.jpg" /></div>
<p>saturation飽和度</p>
<div><img src="test.jpg" /></div>
<p>color顏色</p>
<div><img src="test.jpg" /></div>
<p>luminosity亮度</p>
<div><img src="test.jpg" /></div>
</body>
</html>
運行效果
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
bootstrap和element-ui有什麼區別？
element-ui 基於vue 的ui組件庫，裏面也有自定義主題，能夠隨意修改，若是考慮用vue 搭建後臺管理，建議使用。 bootstrap是基於原生html+js開發，比較適合配合jQuery
原生js
如何實現一個表格中某一個單元格中由按鈕，點擊表格跳到詳情頁？點擊按鈕彈出彈出框？
事件代理
你對jQuery怎麼看？它和原生js有什麼區別？
https://www.cnblogs.com/hyesc...html
一、入口函數的不一樣
js：window.onload = function(){內部放js}
實質就是一個事件，擁有事件的三要素，事件源，事件，事件處理程序。等到全部內容，以及咱們的外部圖片之類的文件加載完了以後，纔會去執行。只能寫一個入口函數。
jQuery:$(function(){}) 或者 $(document).ready(function(){})
是在 html全部標籤都加載以後，就回去執行。能夠寫多個。
二、獲取元素的方式不一樣
js：經常使用的如下幾個，除了id，其餘的結果都是僞數組
複製代碼
document.getElementsByTagName("a")
document.getElementById("demo")
document.getElementsByClassName("class") 有兼容性問題
document.getElementsByTagName("\*") 得到全部的標籤，用來遍歷
html5新增選擇器
document.querySelector(selector) 能夠經過CSS選擇器的語法找到DOM元素，返回
第一個知足選擇器條件的元素 一個dom對象
document.querySelectorAll('.item');返回全部知足該條件的元素 一個元素類型是dom類
型的數組
複製代碼
jQuery：
$(" ") 經過和css雷同的選擇器方式來獲取元素。獲得的是jquery對象（dom元素的數組，外加其餘一些成員）
。即便寫的是id，惟一的，獲得的對象都不是單一的。
本質上jquery方式和qs方式都是獲取DOM數組， 只不過jquery會多一些其餘成員，
DOM數組的每個成員註冊事件不能像jquery同樣直接註冊， 必須分別給每一個元素註冊
三、DOM對象和jquery對象的相互轉換
jQuery對象轉換成DOM對象:
方式一：$(「#btn」)\[0\]
方式二：$(「#btn」).get(0)獲得dom對象。
eq（0）獲得jquery對象
DOM對象轉換成jQuery對象：
$(document) -> 把DOM對象轉成了jQuery對象
var btn = document.getElementById(「btn」);
btn -> $(btn); $(this)
Jquery獲得的元素類型都是對象，內容是僞數組，不管是否是惟一的元素。
四、事件處理程序不一樣
複製代碼
js：
document.getElementById(「id」).onclick = function(){ // 語句 }
document.getElementById(「id」).addEventListener("click",function(){})
onclick，onfoucs，onblur，fouce（自動得到），select（自動選擇文本域內容），onmouseover，onmouseout，
oninput/onpropertychange用戶輸入事件，onchange(下拉菜單select內容發生改變時發生事件，若是內容爲幾，那麼作出什麼反應)
jquery
$(「#id」).click(function(){ // 語句 });
複製代碼
五、設置類
js：document.getElementById(「btn」).className = "wrong1 wrong2"
能夠同時設置多個類名。
classList屬性（是數組），方法add remove contains toggle
jquery：
六、設置value
七、設置內容，html和text
js：document.getElementById(「btn」).innerHTML = "內容不能爲空"
能夠是文本，能夠是<p>內容不能爲空</p>。
jquery：
八、屬性
js：object.getAttribute(attribute) 獲取元素屬性
object.setAttrbute(attribute，value) 設置元素屬性
九、節點操做
js: childNodes屬性 element.childNodes 全部子元素，包括元素節點，文本節點， 屬性節點，甚至包括空格等，因此這個不怎麼用。
nodeType屬性 node.nodeType返回結果是數字。1表明元素節點，2屬性節點，3文本節點，
以上這兩個屬性都不建議使用，建議直接使用children。
十、對數組的增刪改查
js：
增：push()最後追加 返回新的長度。
unshift () 開頭添加，返回新的長度。即操做後若是輸出，結果是長度，不是新數組。
刪：pop()刪除最後一個，並返回刪掉的值，此方法無參數。
shift()刪除第一個元素，並返回刪掉的值，無參數。
鏈接數組：concat() 鏈接兩個或多個。它不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本
aa.concat(bb); 結果： \[1,3,5,「a」,」b」,」c」\];
轉換：join() 數組轉字符串 arrayObject.join(\[separator\]) ，返回新字符串，原數組不會有任何變化。
split() 字符串轉數組 返回新數組，原字符串沒有變化
stringObject.split(separator,howmany) 兩個參數均是可選的，默認是逗號分隔，第二個指定數組最大長度。
你都知道哪些web安全問題？如何防範？
要作好防XSS、CSRF、SQL注入攻擊.DDOS攻擊。 \- XSS概念: 譯爲跨站腳本攻擊,具體是指攻擊者在Web頁面裏插入惡意Script腳本，當用戶瀏覽該網頁時，Script代碼會被執行，從而進行惡意攻擊。 \- XSS預防: 關鍵cookie字段設置httpOnly 輸入檢查,特殊字符 < > / &等,對其進行轉義後存儲 \- CSRF概念： 本質上講，是黑客將一個http接口中須要傳遞的全部參數都預測出來，而後無論以什麼方式，他均可以根據他的目的來任意調用你的接口，對服務器實現CURD。 \- CSRF 預防： 使用驗證碼，更高級用圖靈測試 \- SQL概念： 一般沒有任何過濾，直接把參數存放到了SQL語句當中 \- SQL預防： 根本上防止SQL注入的方法，就是參數化查詢或者作詞法分析。 \- DDOS概念： 利用木桶原理，尋找利用系統應用的瓶頸；阻塞和耗盡；當前問題：用戶的帶寬小於攻擊的規模，噪聲訪問帶寬成爲木桶的短板。 \- DDOS預防：用軟硬件結合的方式來防護是最有效的
框架
Vue/React/Angular和jQuery有什麼區別？
https://www.cnblogs.com/zhuzh...前端
前端當前最火的三大框架當屬vue、react以及angular了。 可是在作項目的時候，咱們怎麼去選擇呢？ 這裏作一個比較，但願你們能夠有一個比較清晰的認識。 vue與react vue和react是當前最火的兩個前端框架，vue的發展很快，可是目前來講，react的生態系統會更強大，世界上使用這個框架的人也不少。 另外，react是facebook官方維護的， 而vue是尤雨溪本人維護的。 而且在其餘周邊庫，如react的react-rouer和redux，是react社區在維護的。 而vue的vuex和vue-router都是尤雨溪在維護的。 一、都在使用 Virtual DOM， 固然，不得不說，vue的虛擬DOM必定是從react這裏模仿的，可是好的東西就是須要被模仿的，而沒有必要重複的造輪子，因此沒毛病。使用虛擬DOM的好處就不少了，好比經過虛擬DOM結合diff算法，咱們能夠很好地解決DOM操做的性能問題，即 生成虛擬DOM的時間 + diff算法時間 + patch時間 < 修改DOM省下來的時間，固然，若是某一天DOM操做很快，那麼就不存在這個問題了。react可能就會被其餘框架取代了。 另外， 使用虛擬DOM，可使得JavaScript的應用不只僅侷限於網頁，還能夠是ios、安卓等，由於在react中沒有用到html，用到的時jsx，虛擬dom，最後生成的能夠是用在網頁上的html，也能夠是用在安卓和ios的控件，因此，react-native的大火也就可想而知了。 、 二、都提供了響應式（Reactive）和組件化（Composable）的視圖組件。 react和vue中的組件都是核心， 是整個框架的靈魂，以前咱們使用的都是以頁面爲基本單位的，可是殊不知道組件的好處。 首先經過組件化之後，這個組件就是可複用的了，好比若是使用傳統方式寫一個網站，若是標題和結尾都是同樣的，那咱們可能會不斷的複製、粘貼，可是呢，若是使用了組件化的思想，只須要寫好組件，而後在須要的地方插入組件便可。 又好比vue中的單文件組件，咱們寫一個組件，就知道是什麼含義，而且css和js均可以寫在一個文件裏， css經過屬性 scoped 能夠防止css的類名污染。 而對於template也能夠放心的使用，不用擔憂重複的問題。 基於react的UI庫ant.design，咱們還能夠直接調用這些組件，大大地加快了前端開發的速度和效率，因此，組件的使用，絕對是前端的一小步，歷史的一大步。 三、都將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。 即vue和react都是專一於視圖的框架，只是在局部區域，vue提供了雙向數據綁定，這樣更有利於咱們處理表單等問題，而react在這方面就有了必定的劣勢。。 而若是但願作大型的項目，對於vue來講，就可使用vue-router，來構建大型網站的路由； 狀態複雜，很差管了，咱們就使用vuex； 因此，這也就是官網所說的漸進式的框架 了 。一樣的，react也是能夠直接使用的，包括react-router和redux，方便咱們構建大型應用。 只是前者的周邊庫是由尤雨溪維護，後者是由react龐大的社區維護的。 四、vue比react更容易上手。 這一點是毋庸置疑的，爲何這麼說呢？ 由於對於vue，不管你是使用webpack仍是broserify， vue-cli均可以很好地知足你的開發任務。 學習vue，咱們只須要掌握中級的html、css、js便可，在head中引入一個vue.js庫，就能夠直接使用了。而且對於數據雙向綁定、指定等均可以很好地體現。 可是react的學習會更加複雜一些，react須要有ES6的基礎，由於react組件的建立可能是使用es6的class來建立的，因此會更加麻煩一些，而且對於JSX語法，仍是有必定的學習成本的。 所以咱們說vue更容易上手。 五、 性能都很好。 vue和react都採用了虛擬DOM的方式，因此在性能方面是很是地接近的，這個無需多說， 六、vue的優化作的要比react好一些。 在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹。如要避免沒必要要的子組件的重渲染，你須要在全部可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會須要使用不可變的數據結構來使得你的組件更容易被優化。 然而，使用 PureComponent 和 shouldComponentUpdate 時，須要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。若是不符合這個狀況，那麼此類優化就會致使難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨着至關的心智負擔。 而在作vue相關的項目時，咱們只須要關注於業務邏輯，而不須要去操心是否會產生沒必要要的組件渲染，由於vue已經把這些麻煩的東西很好的解決了。 七、vue和react一樣都支持本地渲染。 React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP（iOS 和 Android）。能同時跨多平臺開發，對開發者是很是棒的。相應地，Vue 和 Weex 會進行官方合做，Weex 是阿里的跨平臺用戶界面開發框架，Weex 的 JavaScript 框架運行時用的就是 Vue。這意味着在 Weex 的幫助下，你使用 Vue 語法開發的組件不只僅能夠運行在瀏覽器端，還能被用於開發 iOS 和 Android 上的原生應用。 一句話： 你寫的組件不只能夠跑在瀏覽器的網頁上，也能夠泡在安卓和ios的app裏。 八、 react更爲繁榮。 react社區仍是很是繁榮的，因此在知名度方面react也是更勝一籌，使用react和react-native的開發人員仍是不少的，這也是vue須要學習和進步的地方。 九、 vue寫起來更加流暢、方便， react語法更簡單、擴展更強大。 在這一方面，react和vue的出發點彷佛是不同的，可是我仍是比較喜歡vue的寫法。 好比，對於列表循環，使用vue，直接在標籤上寫 v-for 便可，而後就能夠直接循環了，而react須要經過一個數組的map，而後在return，在形式上來講，vue的寫法仍是更加舒服一點。 另外，因爲vue局部的數據雙向綁定，因此vue在處理表單這一塊也是遊刃有餘，很是方便，而react僅僅是處理一個表單，就須要添加不少無關的代碼，這個仍是很是彆扭的。 能夠看得出來，vue提供了更多的api，能夠作更多的事情，可是， 這也體現了react的優勢，即很是簡單，提供的api不多，它只幫咱們作了虛擬DOM的工做，其餘的事情可讓咱們自由的發揮，因此從這個角度來講，react仍是更加簡單一些的。 十、 vue的文檔更加好。 雖然react也有中文文檔，可是vue的文檔更新的更頻繁，而且寫的很好，咱們能夠很容易地學習。 畢竟大佬是中國的，仍是很不錯的，推薦初學者學習、使用。 十一、 不管是vue仍是react咱們都不須要觸碰DOM。 就這二者而言，咱們都關心虛擬DOM，而不用去觸碰DOM，這些都是vue幫助咱們處理好的了。由於dom的操做是費時的，因此經過vue，咱們能夠很好地解決這些問題，儘量少的減小DOM。 通常來講，對於一個項目，咱們使用了vue或者是react，jquery基本上就是不須要的了。若是真的須要，看看到底哪裏作的不對。 十二、vue對於事件的清除優於react。 在vue中，事件綁定以後，能夠在組件銷燬的同時事件接觸綁定，無需咱們本身去手動清除； 而react卻不是這樣的，react須要咱們在 componentDidMount 的時候綁定，在 componentWillUnMount 的時候接觸綁定，不然會出現問題，尤爲是添加在 document 上面的事件 。 vue與angular 二者都是數據雙向綁定的框架，我也只是看了看angular的api，沒有真正的用過，因此對於angular只能有一個簡單的比較 一、 angular和vue都使用了指令。 指令是一個比較方便的操做， 而vue做者的指令的靈感也都是從angular而來的，因此vue整體來講仍是react和angular的結合體，他把二者的優勢作告終合，把缺點去除，因此，vue是個好東西，惋惜不徹底是原創，可是也足夠讓咱們敬佩了。 二、 vue比angular的設計更簡單。 在api上，雖然vue比react複雜一些，可是angular更加複雜。 三、 vue更容易上手。 在vue和react的比較中，咱們就知道vue對於小白來講很容易就能夠上手了， 而angular還要學習typescript等等，上手難度較大。 四、angular的雙向數據綁定不容易控制。 在vue中，局部使用數據雙向綁定，可是全局而言使用的數據單向綁定。 而angular使用的確實數據雙向綁定，因此vue更容易管理狀態。 五、 性能上來講vue更好一些。 由於vue不須要使用angular的髒檢查，一些vue都已經給你作好了。 在 AngularJS 中，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。AngularJS 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。Vue 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步隊列更新，全部的數據變化都是獨立觸發，除非它們之間有明確的依賴關係。 react與angular 一、 二者的社區基礎都很好。 react是facebook的，angular是谷歌的，因此，咱們不用擔憂其社區基礎。 二、 angular是一個真正的框架，react是一個庫。 react不是框架。 angular自身就繼承了各類插件，因此，咱們不須要再過多的考慮，它已經提供給你了各類解決辦法，而react是比較輕的，只是解決了其中的某個痛點而已。 三、就性能而言，react更好。 react提出了虛擬DOM這個關鍵，很好地提高了性能，這一點要比angular強大。 三大框架與jQuery的對比 儘管三大框架目前都是很是流行的，可是不得不說，jQuery的使用仍是大多數（90%），可是選擇三大框架仍是選擇jQuery？ 若是你要作單頁面應用，那麼你就選擇三大框架； 若是你要作多頁應用，你就選擇jQuery。 若是你的數據都是在在服務器端進行修改的，那麼毫無疑問，使用三大框架你也無法管理數據，因此使用jQuery； 可是，若是你的數據都是在客戶端的，即前端須要處理大量的數據，那麼這時就須要選用三大框架了，好比vue的store倉庫、好比react的store，他們對於數據的存儲都有很好的管理能力。 單項數據流更使得應用便於管理，如react的store -> view -> action -> store -> view -> action。。。 如此循環往復的單項數據流。 若是你要頻繁的手動操做DOM，那麼選擇jQuery，畢竟jQuery封裝了大量的兼容性的DOM操做api； 而若是你的項目是數據驅動的，那麼選擇vue、react，由於你只要給定數據，就可使得頁面獲得渲染了， 而不須要操做dom，或者說，有了react，dom操做就不存在了。
Vue中是如何實現雙向數據綁定的？
\> 實現mvvm的雙向綁定，是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。 輸入框內容變化時，Data 中的數據同步變化。即 View => Data 的變化。 Data 中的數據變化時，文本節點的內容同步變化。即 Data => View 的變化。 其中，View 變化更新 Data ，能夠經過事件監聽的方式來實現，因此 Vue 的數據雙向綁定的工做主要是如何根據 Data 變化更新 View。 Vue 主要經過如下 4 個步驟來實現數據雙向綁定的： 實現一個監聽器 Observer：對數據對象進行遍歷，包括子屬性對象的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個對象的某個值賦值，就會觸發 setter，那麼就能監聽到了數據變化。 實現一個解析器 Compile：解析 Vue 模板指令，將模板中的變量都替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，調用更新函數進行數據更新。 實現一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑 ，主要的任務是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發解析器 Compile 中對應的更新函數。 實現一個訂閱器 Dep：訂閱器採用 發佈-訂閱 設計模式，用來收集訂閱者 Watcher，對監聽器 Observer 和 訂閱者 Watcher 進行統一管理。
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
