html5css3面试题及答案,前端面试题及答案-CSS篇.docx

《html5css3面试题及答案,前端面试题及答案-CSS篇.docx》由会员分享，可在线阅读，更多相关《html5css3面试题及答案,前端面试题及答案-CSS篇.docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、htm15css3面试题及答案，前端面试题及答案-CSS篇这篇文章并不是最全的前端面试题c殳有最全，只有更全)，只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记,方 便后面有面试需要的小伙伴们借鉴后续内容会不定时更新有错误之处希望大家不吝指出。1、CSS3的新特性实现圆角(border-radius)P月影(box-shadow)文字加特效(text-shadow)线性渐变(gradient)旋转(transform)媒体查询，多栏布局具体2、CSS中 link 和import 的区别link属于HTML标签，而import是CSS提供的；页面被加载的时，link会同时被加载

2、而import引用的CSS会等到页面被加载完再加载；import只在IE5以上才能识别，而link是HTML标签无兼容问题；link方式的样式的权重高于import的权重.3、介绍一下CSS的盒子模型通过css3新增的属性box-sizing: content-box | border-box分别设置盒模型为标准模型(content-box)和正模型(border-box)详细介绍两种盒模型：标准W3c盒模型、正盒模型。区别比照：(注意蓝色背景区域大小)标准盒模型元素宽度width=content=100px - I度计算相同IE模型元素宽度width = content + 2 x padd

3、ing + 2 x border = 70px + 2 x lOpx + 2 x 5px = lOOpx 4、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？选择符d 选择器(# myid)2 .类选择器(.myclassname).标签选择器(div, hlz p)3 .相邻选择器(hl + p).子选择器(ul li)4 .后代选择器(li a).通配符选择器(* )8.属性选择器(arel = external)9.伪类选择器(a: hover, li:nth-child)继承1 .可继承的样式：font-size font-family color,

4、 text-indent;.不可继承的样式:border padding margin width height;新增伪类p:first-of-type选择属于其父元素的首个元素。p:last-of-type选择属于其父元素的最后元素。p:only-of-type选择属于其父元素唯一的兀素。p:only-child选择属于其父元素的唯一子元素的每个兀素。p:nth-child(2)选择属于其父元素的第二个子元素的每个元素。:enabled disabled控制表单控件的禁用状态。:checked单项选择框或复选框被选中。优先级算法规那么:优先级就近原那么同权重情况下样式定义最近者为准；limp

5、ortant id class tagimportant比内联优先级高，但内联比id要高5、为什么要清除浮动？如何清除？引起的问题：Q)父元素的高度无法被撑开影响与父元素同级的元素(2)与浮动元素同级的非浮动元素会跟随其后(3)假设非第一个元素浮动那么该元素之前的元素也需要浮动否那么会影响页面显示的结构解决方法：1、利用clear清除浮动.son clear: left | right | both | auto)2、在父元素后面额外添加标签 3、父元素上使用after伪类 #parent:after content:clear: both;height: 0;display: block;)

6、4、利用overflow清除浮动#parent overflow: auto;display: inline-block;)6、实现垂直居中的几种方法margin: auto.parent width:400px; height:400px;position: relative;.son position: absoulte;left: 0;right: 0;top: 0;bottom: 0;margin: auto;)margin-left、margin-top负值法(需知道子 元素width、height).parent width:400px; height:400px;position

7、: relative;.son position: absolute;width: lOOpx;height: 160px;left: 50%;top: 50%;/margin-top: translateY(-50%);/margin-left: translateX(-50%);margin-top: -80px;margin-left: -50px;)flex.parent display: flex;align-items: center;justify-content: center;)table-cell(未脱离文档流).parent display: table-cell;vertical-align: middle;text-align: center;