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属性的空元素
在浮动元素后使用一个空元素如