web前端高頻面試題

paragraph

『陸』 2019Web前端面試題及答案匯總-Jquery篇

今天小編要跟大家分享的文章是關於2019Web前端面試題及答案匯總-Jquery篇。相信最近准備參加Web前端面試的小夥伴一定不在少數，為了幫助大家順利的通過面試成為一名優秀的Web前端工程師，小編為大家准備了前端面試題系列，通過Web知識的整理以及經驗的總結，希望能幫到更多的前端面試者。

Jquery相關


1、jQuery庫中的$()是什麼?


$()函數是jQuery()函數的別稱。$()函數用於將任何對象包裹成jQuery對象，接著你就被允許調用定義在jQuery
對象上的多個不同方法。你可以將一個選擇器字元串傳入$()函數，它會返回一個包含所有匹配的DOM元素數組的jQuery對象。


2、如何找到所有HTMLselect標簽的選中項?


$('[name=selectname]:selected')


3、$(this)和this關鍵字在jQuery中有何不同?


$(this)返回一個jQuery對象，你可以對它調用多個jQuery方法，比如用text()獲取文本，用val()
獲取值等等。


而this代表當前元素，它是JavaScript關鍵詞中的一個，表示上下文中的當前DOM元素。你不能對它調用jQuery方法，直到它被
$()函數包裹，例如$(this)。


4、jquery怎麼移除標簽onclick屬性?


獲得a標簽的onclick屬性:$("a").attr("onclick")


刪除onclick屬性：$("a").removeAttr("onclick")


設置onclick屬性：$("a").attr("onclick","test();")


5、jquery中addClass、removeClass、toggleClass的使用。


$(selector).addClass(class)：為每個匹配的元素添加指定的類名


$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值;


$(selector).toggleClass(class)：如果存在(不存在)就刪除(添加)一個類


$(selector).removeAttr(class);刪除class這個屬性;


6、JQuery有幾種選擇器?


(1)、基本選擇器：#id，class,element,*;


(2)、層次選擇器：parent>child，prev+next，prev~siblings


(3)、基本過濾器選擇器：:first，:last，:not，:even，:odd，:eq，:gt，:lt


(4)、內容過濾器選擇器：:contains，:empty，:has，:parent


(5)、可見性過濾器選擇器：:hidden，:visible


(6)、屬性過濾器選擇器：[attribute]，[attribute=value]，[attribute!=value]
，[attribute^=value]，[attribute$=value]，[attribute*=value]


(7)、子元素過濾器選擇器：:nth-child，:first-child，:last-child，:only-child


(8)、表單選擇器：:input，:text，:password，:radio，:checkbox，:submit等;


(9)、表單過濾器選擇器：:enabled，:disabled，:checked，:selected


7、jQuery中的Delegate()函數有什麼作用?


delegate()會在以下兩個情況下使用到：


1)、如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用delegate()了，代碼如下：


$("ul").delegate("li","click",function(){$(this).hide();});


2)、當元素在當前頁面中不可用時，可以使用delegate()


8、$(document).ready()方法和window.onload有什麼區別?


(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全載入到瀏覽器後才執行的。


(2)、$(document).ready()方法可以在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。


9、如何用jQuery禁用瀏覽器的前進後退按鈕?


實現代碼如下：



$(document).ready(function(){

window.history.forward(1);

//ORwindow.history.forward(-1);

});



10、jquery中$.get()提交和$.post()提交有區別嗎?


相同點：都是非同步請求的方式來獲取服務端的數據;


異同點：


1、請求方式不同：$.get()方法使用GET方法來進行非同步請求的。$.post()方法使用POST方法來進行非同步請求的。


2、參數傳遞方式不同：get請求會將參數跟在URL後進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web伺服器的，這種傳遞是對用戶不可見的。


3、數據傳輸大小不同：get方式傳輸的數據大小不能超過2KB而POST要大的多


4、安全問題：GET方式請求的數據會被瀏覽器緩存起來，因此有安全問題。


11、寫出一個簡單的$.ajax()的請求方式?

$.ajax({

url:'http://www..com',

type:'POST',

data:data,

cache:true,

headers:{},

beforeSend：function(){},

success:function(){},

error:function(){},

complete:function(){}

});

ja

以上就是小編今天為大家分享的關於2019Web前端面試題及答案匯總-a
Jquery篇的文章，希望本篇文章中的面試題能夠對正准備參加Web前端面試的小夥伴們有所幫助。想要了解更多Web前端方面的知識記得關注北大青鳥Web前端培訓官網。最後祝願小夥伴們面試成功成為一名優秀的Web前端工程師。

『柒』 web前端面試十大總結，不了解一下嗎

在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！

一：字體高亮函數


題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：數組去重


題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。


(本題來源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify題目：


請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母都多出一個空格的間隔："ScriptOJ".spacify()//=>
"ScriptO
J"(本題來源：#/interview-questions)答案：String.prototype.spacify
=function(){


returnthis.split('').join('')


}


五：safeGet


題目：有時候我們需要訪問一個對象較深的層次，但是如果這個對象某個屬性不存在的話就會報錯，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


data.a.b.c//=>scriptoj


data.a.b.c.d//=>報錯，代碼停止執行


console.log('ScriptOJ')//=>不會被執行


請你完成一個safeGet函數，可以安全的獲取無限多層次的數據，一旦數據不存在不會報錯，會返回undefined，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


safeGet(data,'a.b.c')//=>scriptoj


safeGet(data,'a.b.c.d')//=>返回undefined


safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined


console.log('ScriptOJ')//=>列印ScriptOJ


答案：


constsafeGet=(o,path)=>{


try{


returnpath.split('.').rece((o,k)=>o[k],o)


}catch(e){


returnvoid666


}


}


六：判斷兩個矩形是否重疊


題目：用一個對象的數據來表示一個矩形的位置和大小：


{


x:100,


y:100,


width:150,


height:250


}


它表示一個寬為150高為250的矩形在頁面上的(100,100)的位置。


請你完成一個函數isOverlap可以接受兩個矩形作為參數，判斷這兩個矩形在頁面上是否重疊。例如：


constrect1={x:100,y:100,width:100,height:100}


constrect2={x:150,y:150,width:100,height:100}


isOverlap(rect1,rect2)//=>true


答案：


//原理：#/find-two-rectangles-overlap/


constisOverlap=(rect1,rect2)=>{


constl1={x:rect1.x,y:rect1.y}


constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}


constl2={x:rect2.x,y:rect2.y}


constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}


if(


l1.x>r2.x||


l2.x>r1.x||


l1.y>r2.y||


l2.y>r1.y


)returnfalse


returntrue


}


七：按下標插入


題目：現在有一個數組存放字元串數據：


['item1','item2','item3','item4','item5']


有另外一個數組存放一組對象：


[


{content:'section1',index:0},


{content:'section2',index:2}


]


它每個對象表示的是會往原來的數組的index坐標插入content數據(index不會重復)：


01234


item1itme2item3item4item5


^^


||


section1section2


最後結果是：['section1','item1','item2','section2','item3','item4',
'item5']


請你完成injectSections函數，可以達到上述的功能：


injectSections(


['item1','item2','item3','item4','item5'],


[


{content:'section1',index:0},


{content:'section2',index:2}


]


)//=>['section1','item1','item2','section2','item3','item4',
'item5']


答案：


constinjectSections=(items,sections)=>{


/*需要插入坐標對應數據存放到map裡面*/


constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))


/*新建一個數組，然後往裡面push原來數組的數據*/


returnitems.rece((ret,item,index)=>{


/*push的時候先檢查map裡面有沒有，有的話先pushmap裡面的數據*/


if(sectionsMap.has(index))ret.push(sectionsMap.get(index))


/*再push原來的數據*/


ret.push(item)


returnret


},[])


}


八：數組拍平(二)


題目：編寫一個JavaScriptgenerator函數，接受一個僅包含數字的多維數組
，返回一個迭代器，可以遍歷得到它拍平以後的結果。例如：


constnumbers=flatten2([1,[[2],3,4],5])


numbers.next().value//=>1


numbers.next().value//=>2


numbers.next().value//=>3


numbers.next().value//=>4


numbers.next().value//=>5


答案：


function*flatten2(arr){


for(leti=0;i

constitem=arr[i]


/*yield*的使用可以大大簡化程序編寫*/


Array.isArray(item)?yield*flatten2(item):yielditem;


}


}


/*用flatten2來完成flatten也是很方便的*/


//constflatten=(arr)=>[...flatten2(arr)]


九：判斷兩個Set是否相同


題目：完成isSameSet函數，它接受了兩個Set對象作為參數，請你返回true/false來表明這兩個set
的內容是否完全一致，例如：


consta={}


constb=1


constc='ScriptOJ'


constset1=newSet([a,b,c])


constset2=newSet([a,c,b])


isSameSet(set1,set2)//=>true


答案：


//codefrom#/js-example.html


/*這道題不能簡單地使用sort，使用sort並不靠譜。因為Set裡面的內容可能有很多種類


*字元串、對象、數字，不同類型之間是不可對比的，所以排序結果並不會一致


*


*最好的方式是按照數學上集合相等的定義：


*A=B當且僅當A是B的子集並且B是A的子集。


*


*這種判斷方式還可以用在對象、map等其他數據類型的判斷當中。


*/


constisSameSet=(s1,s2)=>{


/*獲取一個集合所有的值，判斷另外一個集合是否全部包含該這些值*/


constisSame=(a,b)=>{


constvalues=[...a]


for(letvalofvalues){


/*及時跳出循環，可以降低演算法復雜度*/


if(!b.has(val))returnfalse


}


returntrue


}


/*a包含b，b包含a，那麼兩個集合相同*/


returnisSame(s1,s2)&&isSame(s2,s1)


}


/*By陳小俊*/


//constisSameSet=(set1,set2)=>


//[...set1].every((o)=>set2.has(o))&&


//[...set2].every((o)=>set1.has(o))


十：記憶化斐波那契函數(Memoization)


題目：斐波那契數列指的是類似於以下的數列：


1,1,2,3,5,8,13,....


也就是，第n個數由數列的前兩個相加而來：f(n)=f(n-1)+f(n-2)


請你完成fibonacci函數，接受n作為參數，可以獲取數列中第n個數，例如：


fibonacci(1)//=>1


fibonacci(2)//=>1


fibonacci(3)//=>2


...


測試程序會從按順序依次獲取斐波那契數列中的數，請注意程序不要超時，也不要添加額外的全局變數。


本題來源：《JavaScript語言精髓》


答案：


constfibonacci=((memo=[0,1])=>{


constfib=(n)=>{


letresult=memo[n]


if(typeofresult!=="number"){


result=fib(n-1)+fib(n-2)


memo[n]=result


}


returnresult


}


returnfib


})()
最後就是反應能力，臨場出現意外什麼的了，這就看你自己了，萬一自己一不留神說錯話了，大神給你指出來，請記得謝謝一定要謙虛！在這里小編也希望每一位web培訓班畢業的學員都能順利找到稱心的工作！


免責聲明：內容和圖片源自網路，版權歸原作者所有，如有侵犯您的原創版權請告知，我們將盡快刪除相關內容
在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！

一：字體高亮函數


題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：數組去重


題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。


(本題來源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify題目：


請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母

『捌』 web前端經典面試題

為大家帶來一些web前端的面試題，希望可以幫助到大家啊。


1.css3有哪些新特性?


選擇器、圓角、動畫、多重背景、背景的寬度高度flex布局響應式布局邊框陰影文本陰影


2.響應式布局怎麼理解的，響應式布局是通過什麼實現?


根據不同的屏幕載入不同的css樣式


1).移動端適配


2).一套代碼適配pc端移動端多個


3.js創建對象有哪幾種方式?


1).自面量


2).newObject


3).構造函數


4.es6有哪些新特性?


1).letconst


2).模板字元串


3).方法的簡寫屬性的簡寫


4).三點運算符


5).解構賦值


6).箭頭函數


7).setmap


8).class類


9).模塊化


5.箭頭函數和普通的方法有什麼區別?


1).箭頭函數省略了function


2).箭頭函數裡面的this指向上下文(可以改變this指向)


6.gulp可以干什麼


gulp自動化構建工具。


壓縮代碼合並代碼壓縮圖片自動處理前綴創建web服務處理sass


7.清除浮動有哪些方法。


1).浮動元素的父元素overflow:hiddenoverflow:auto


2).浮動元素的最後面加一個空div給他clear:both


3).after偽類清除浮動


.clearfix:after{


content:"";


dislpay:block;


height:0px;


clear:both;


}


4)、給父元素設置高度。


8.行內元素塊元素的區別?


1)塊元素默認獨佔一行，行內元素默認情況不獨佔一行，行內元素的的寬度就是內容的寬度


2)默認情況塊元素可以設置寬度高度默認情況行內元素不可以設置寬度高度


3)默認可以margin上下左右，行內默認只能margin左右不能上下。


9.網站載入速度優化?


1).圖片不失真盡量小


2).多個背景圖片合並


3).代碼壓縮代碼合並


4).js寫到頁面最底部


5).懶載入


6).不要有冗餘代碼


7).伺服器帶寬款一些


8).伺服器固態硬碟


9).開啟緩存


10.以前寫代碼什麼情況會成出現亂碼怎麼解決?


解決亂碼文件保存的編碼和設置的編碼必須保持一致


11.以前如何測試調試移動端頁面


1).首先在瀏覽器自帶的調試工具模擬器裡面調試


2).真機的內置瀏覽器調試


3).真機上面的UC裡面調試


4).真機上的微信裡面調試。

『玖』 WEB前端面試題

第二章 面試題基礎篇

2.1 HTML面試題

面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

面試題：頁面導入樣式時，使用link和@import有什麼區別？

面試題：title與h1的區別、b與strong的區別、i與em的區別？

面試題：img標簽的title和alt有什麼區別？

面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？

2.2 CSS面試題

面試題：css背景紋路

面試題：介紹一下CSS的盒子模型

面試題：CSS選擇符有哪些？哪些屬性可以繼承？

面試題：CSS優先順序演算法如何計算？

面試題：用CSS畫一個三角形

面試題：一個盒子不給寬度和高度如何水平垂直居中？

面試題：display有哪些值？說明他們的作用。

面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？

面試題：清除浮動有哪些方式？

面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。

面試題：什麼是CSS reset？

面試題：css sprite是什麼,有什麼優缺點

面試題：display: none;與visibility: hidden;的區別

面試題：position有哪些值?有什麼作用? 【特別多公司問】

面試題：line-height和height有什麼區別？

面試題：opacity 和 rgba區別

2.3 JavaScript基礎面試題

面試題：延遲載入JS有哪些方式？

面試題：JS數據類型有哪些？

面試題：null和undefined的區別

面試題：JS數據類型考題

面試題：==和===有什麼不同

面試題：JS微任務和宏任務

面試題：JS作用域考題

面試題：JS對象考題

面試題：JS作用域+this指向+原型 考題

面試題：JS判斷變數是不是數組，你能寫出哪些方法？

面試題：slice是幹嘛的、splice是否會改變原數組

面試題：JS數組去重

面試題：找出多維數組最大值

面試題：給字元串新增方法實現功能

面試題：找出字元串出現最多次數的字元以及次數

2.4 真正移動端 —— H5/C3面試題

面試題：什麼是語義化標簽

面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。

面試題：如何關閉iOS鍵盤首字母自動大寫

面試題：怎麼讓Chrome支持小於12px 的文字？

面試題：rem和em有什麼樣區別

面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

面試題：webkit表單輸入框placeholder的顏色值能改變嗎？

面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

面試題：禁止ios和android用戶選中文字

面試題：自適應 [淘寶無線適配]

面試題：響應式

第三章 面試題進階篇

3.1 JavaScript進階面試題

面試題：new操作符具體做了什麼

面試題：閉包 【必須會】

面試題：原型鏈 【必須會】

面試題： JS繼承有哪些方式

面試題：說一下call、apply、bind區別

面試題：sort背後原理是什麼？

面試題：深拷貝和淺拷貝

面試題：localstorage、sessionstorage、cookie的區別

3.2 ES6面試題

面試題：var、let、const區別

面試題：作用域考題

面試題：將下列對象進行合並

面試題：箭頭函數和普通函數有什麼區別？

面試題：Promise有幾種狀態

面試題：find和filter的區別 【大廠】

面試題：some和every的區別 【大廠】

3.3 webpack面試題

面試題：webpack插件

3.4 Git面試題

面試題：git常用命令

面試題：解決沖突

面試題：GitFlow

第四章 面試題框架篇

4.1 區分初中高級的 —— Vue面試題

面試題：Vue2.x 生命周期有哪些？

1.系統自帶八個

2.當一旦進入到某個組件會執行哪些生命周期

3.$el和$data在哪個階段有

4.如果使用keep-alive會多倆個生命周期

5.如果加入keep-alive第一次進入組件會執行哪些生命周期

6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期

面試題：談談你對keep-alive的了解

面試題：v-if和v-show區別

面試題：v-if和v-for優先順序 2.x

面試題：ref是什麼？

面試題：nextTick是什麼？

面試題：Vue中如何做樣式穿透

面試題：scoped原理

面試題：Vuex是單向數據流還是雙向數據流？

面試題：講一下MVVM

面試題：雙向綁定原理

面試題：什麼是虛擬DOM

面試題：key是干什麼？

面試題：diff演算法

面試題：Vue組件傳值

面試題：props和data優先順序誰高？

面試題：computed、methods、watch有什麼區別？

面試題：Vuex

面試題：Vue路由

面試題：Vue項目打包後出現空白頁

4.2 微信小程序面試題

面試題：如何自定義頭部？

面試題：如何自定義底部？

4.3 uni-app面試題

面試題：生命周期

面試題：條件編譯

第五章 面試題性能優化篇

『拾』 Web前端面試之css高頻面試題

今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。


1.什麼是BFC機制


BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。


·___シ⑻跫(以下任意一條)


§_loat的值不為none


§_verflow的值不為visible


§_isplay的值為table-cell、tabble-caption和inline-block之一


§_osition的值不為static或則releative中的任何一個


在IE下,Layout,可通過zoom:1_シ


·___FC布局與普通文檔流布局區別:


BFC布局規則:


1._浮動的元素會被父級計算高度(父級元素觸發了BFC)


2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)


3._margin不會傳遞給父級(父級觸發BFC)


4._屬於同一個BFC的兩個相鄰元素上下margin會重疊


5._普通文檔流布局:浮動的元素是不會被父級計算高度


6._非浮動元素會覆蓋浮動元素的位置


7._margin會傳遞給父級元素


8._兩個相鄰元素上下的margin會重疊


·___⒅械撓τ


§_柚_argin重疊


§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)


§_允視α嚼覆季


§_梢宰柚乖乇桓《馗哺


2.CSS3中新增的選擇器以及屬性


這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章


·___糶匝≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素


E[att$="val"]
屬性att的值以"val"結尾的元素


E[att*="val"]
屬性att的值包含"val"字元串的元素


·___峁刮崩嘌≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素


E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1


E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1


E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素


E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素


E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)


E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)


E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)


E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)


E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)


E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素


·___ss3新增屬性


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3


text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3


border-colors
為邊框設置多種顏色
FF3+


boder-image
圖片邊框
FF3.5,Safari4,Chrome3


text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10


word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3


border-radius
圓角邊框
FF3+,Safari4,Chrome3


opacity
不透明度
all


box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3


outline
外邊框
FF3+,safari4,chrome3,opera10


background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10


background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+


background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3


rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10


3.居中布局


·___驕又


1._行內元素:_ext-align:center


2._塊級元素:_argin:0auto


3._絕對定位和移動:_bsolute+transform


4._絕對定位和負邊距:_bsolute+margin


5._flex布局:_lex+
justify-content:center


·___怪本又


1._子元素為單行文本:_ine-height:height


2._absolute+transform


3._flex+align-items:center


4._table:_isplay:table-cell;vertical-align:
middle


5._利用position和top和負margin


·___醬怪本又_HAPE*MERGEFORMAT


1.已知元素寬高:絕對定位+margin:auto:


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


2.已知元素寬高:_遠ㄎ+負margin


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


3.absolute+transform


_div{
__width:200px;
__height:200px;
__background:
green;

__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}


4.flex+justify-content
+align-items


.box{
_height:600px;

_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_


4.清除浮動有哪些方法,各有什麼優缺點


·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如