完整详细CSS 面试知识点总结.docx
- 文档编号:16784630
- 上传时间:2023-07-17
- 格式:DOCX
- 页数:81
- 大小:113.34KB
完整详细CSS 面试知识点总结.docx
《完整详细CSS 面试知识点总结.docx》由会员分享,可在线阅读,更多相关《完整详细CSS 面试知识点总结.docx(81页珍藏版)》请在冰点文库上搜索。
完整详细CSS面试知识点总结
CSS面试知识点总结
∙1.介绍一下标准的CSS的盒子模型?
低版本IE的盒子模型有什么不同的?
∙2.CSS选择符有哪些?
∙3.:
:
before和:
after中双冒号和单冒号有什么区别?
解释一下这2个伪元素的作用。
∙4.伪类与伪元素的区别
∙5.CSS中哪些属性可以继承?
∙6.CSS优先级算法如何计算?
∙7.关于伪类LVHA的解释?
∙8.CSS3新增伪类有那些?
∙9.如何居中div?
∙10.display有哪些值?
说明他们的作用。
∙11.position的值relative和absolute定位原点是?
∙12.CSS3有哪些新特性?
(根据项目回答)
∙13.请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
∙14.用纯CSS创建一个三角形的原理是什么?
∙15.一个满屏品字布局如何设计?
∙16.CSS多列等高如何实现?
∙17.经常遇到的浏览器的兼容性有哪些?
原因,解决方法是什么,常用hack的技巧?
∙18.li与li之间有看不见的空白间隔是什么原因引起的?
有什么解决办法?
∙19.为什么要初始化CSS样式?
∙20.什么是包含块,对于包含块的理解?
∙21.CSS里的visibility属性有个collapse属性值是干嘛用的?
在不同浏览器下以后什么区别?
∙22.width:
auto和width:
100\x的区别
∙23.绝对定位元素与非绝对定位元素的百分比计算的区别
∙24.简单介绍使用图片base64编码的优点和缺点。
∙25.'display'、'position'和'float'的相互关系?
∙26.margin重叠问题的理解。
∙27.对BFC规范(块级格式化上下文:
blockformattingcontext)的理解?
∙28.IFC是什么?
∙29.请解释一下为什么需要清除浮动?
清除浮动的方式
∙30.使用clear属性清除浮动的原理?
∙31.zoom:
1的清除浮动原理?
∙32.移动端的布局用过媒体查询吗?
∙33.使用CSS预处理器吗?
喜欢哪个?
∙34.CSS优化、提高性能的方法有哪些?
∙35.浏览器是怎样解析CSS选择器的?
∙36.在网页中应该使用奇数还是偶数的字体?
为什么呢?
∙37.margin和padding分别适合什么场景使用?
∙38.抽离样式模块怎么写,说出思路,有无实践经验?
[阿里航旅的面试题]
∙39.简单说一下css3的all属性。
∙40.为什么不建议使用统配符初始化css样式。
∙41.absolute的containingblock(包含块)计算方式跟正常流有什么不同?
∙42.对于hasLayout的理解?
∙43.元素竖向的百分比设定是相对于容器的高度吗?
∙44.全屏滚动的原理是什么?
用到了CSS的哪些属性?
(待深入实践)
∙45.什么是响应式设计?
响应式设计的基本原理是什么?
如何兼容低版本的IE?
(待深入了解)
∙46.视差滚动效果,如何给每页做不同的动画?
(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?
)
∙47.如何修改chrome记住密码后自动填充表单的黄色背景?
∙48.怎么让Chrome支持小于12px的文字?
∙49.让页面里的字体变清晰,变细用CSS怎么做?
∙50.font-style属性中italic和oblique的区别?
∙51.设备像素、css像素、设备独立像素、dpr、ppi之间的区别?
∙52.layoutviewport、visualviewport和idealviewport的区别?
∙53.position:
fixed;在android下无效怎么处理?
∙54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?
(阿里)
∙55.如何让去除inline-block元素间间距?
∙56.overflow:
scroll时不能平滑滚动的问题怎么处理?
∙57.有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
∙58.png、jpg、gif这些图片格式解释一下,分别什么时候用。
有没有了解过webp?
∙59.浏览器如何判断是否支持webp格式图片
∙60.什么是Cookie隔离?
(或者说:
请求资源的时候不要让它带cookie怎么做)
∙61.style标签写在body后与body前有什么区别?
∙62.什么是CSS预处理器/后处理器?
∙63.阐述一下CSSSprites
∙64.使用rem布局的优缺点?
∙65.几种常见的CSS布局
∙66.画一条0.5px的线
∙67.transition和animation的区别
∙68.什么是首选最小宽度?
∙69.为什么height:
100\x会无效?
∙70.min-width/max-width和min-height/max-height属性间的覆盖规则?
∙71.内联盒模型基本概念
∙72.什么是幽灵空白节点?
∙73.什么是替换元素?
∙74.替换元素的计算规则?
∙75.content与替换元素的关系?
∙76.margin:
auto的填充规则?
∙77.margin无效的情形
∙78.border的特殊性?
∙79.什么是基线和x-height?
∙80.line-height的特殊性?
∙81.vertical-align的特殊性?
∙82.overflow的特殊性?
∙83.无依赖绝对定位是什么?
∙84.absolute与overflow的关系?
∙85.clip裁剪是什么?
∙86.relative的特殊性?
∙87.什么是层叠上下文?
∙88.什么是层叠水平?
∙89.元素的层叠顺序?
∙90.层叠准则?
∙91.font-weight的特殊性?
∙92.text-indent的特殊性?
∙93.letter-spacing与字符间距?
∙94.word-spacing与单词间距?
∙95.white-space与换行和空格的控制?
∙96.隐藏元素的background-image到底加不加载?
∙97.如何实现单行/多行文本溢出的省略(...)?
∙98.常见的元素隐藏方式?
∙99.css实现上下固定中间自适应布局?
∙100.css两栏布局的实现?
∙101.css三栏布局的实现?
∙102.实现一个宽高自适应的正方形
∙103.实现一个三角形
∙104.一个自适应矩形,水平垂直居中,且宽高比为2:
1
1.介绍一下标准的CSS的盒子模型?
低版本IE的盒子模型有什么不同的?
相关知识点:
(1)有两种盒子模型:
IE盒模型(border-box)、W3C标准盒模型(content-box)
(2)盒模型:
分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分
IE盒模型和W3C标准盒模型的区别:
(1)W3C标准盒模型:
属性width,height只包含内容content,不包含border和padding
(2)IE盒模型:
属性width,height包含content、border和padding,指的是content
+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;
如果将box-sizing设为border-box则用的是IE盒模型。
如果在ie6,7,8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。
若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。
回答:
盒模型都是由四个部分组成的,分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。
标准盒模型的width和height属性的
范围只包含了content,而IE盒模型的width和height属性的范围包含了border、padding和content。
一般来说,我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
详细的资料可以参考:
《CSS盒模型详解》
2.CSS选择符有哪些?
(1)id选择器(#myid)
(2)类选择器(.myclassname)
(3)标签选择器(div,h1,p)
(4)后代选择器(h1p)
(5)相邻后代选择器(子)选择器(ul>li)
(6)兄弟选择器(li~a)
(7)相邻兄弟选择器(li+a)
(8)属性选择器(a[rel="external"])
(9)伪类选择器(a:
hover,li:
nth-child)
(10)伪元素选择器(:
:
before、:
:
after)
(11)通配符选择器(*)
3.:
:
before和:
after中双冒号和单冒号有什么区别?
解释一下这2个伪元素的作用。
相关知识点:
单冒号(:
)用于CSS3伪类,双冒号(:
:
)用于CSS3伪元素。
(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。
不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:
first-line、:
first-letter、:
before、:
after等,
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前,使用:
:
before,否者,使用:
:
after;
在代码顺序上,:
:
after生成的内容也比:
:
before生成的内容靠后。
如果按堆栈视角,:
:
after生成的内容会在:
:
before生成的内容之上。
回答:
在css3中使用单冒号来表示伪类,用双冒号来表示伪元素。
但是为了兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号
来表示伪元素。
伪类一般匹配的是元素的一些特殊状态,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。
4.伪类与伪元素的区别
css引入伪类和伪元素概念是为了格式化文档树以外的信息。
也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句
话中的第一个字母,或者是列表中的第一个元素。
伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
比如说,当用户悬停在指定的
元素时,我们可以通过:
hover来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。
它们允许我们为元素的某些部分设置样式。
比如说,我们可以通过:
:
be
fore来在一个元素前增加一些文本,并为这些文本添加样式。
虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
有时你会发现伪元素使用了两个冒号(:
:
)而不是一个冒号(:
)。
这是CSS3的一部分,并尝试区分伪类和伪元素。
大多数浏览
器都支持这两个值。
按照规则应该使用(:
:
)而不是(:
),从而区分伪类和伪元素。
但是,由于在旧版本的W3C规范并未对此进行
特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
详细资料可以参考:
《总结伪类与伪元素》
5.CSS中哪些属性可以继承?
相关资料:
每个CSS属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的。
这决定了当你没有为元素的属性指定值时该如何计算
值。
当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。
只有文档根元素取该属性的概述中给定的初始值(这里的意思应
该是在该属性本身的定义中的默认值)。
当元素的一个非继承属性(在Mozillacode里有时称之为resetproperty)没有指定值时,则取属性的初始值initialv
alue(该值在该属性的概述里被指定)。
有继承性的属性:
(1)字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
(2)文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color
(3)表格布局属性
caption-sideborder-collapseempty-cells
(4)列表属性
list-style-type、list-style-image、list-style-position、list-style
(5)光标属性
cursor
(6)元素可见性
visibility
(7)还有一些不常用的;speak,page,设置嵌套引用的引号类型quotes等属性
注意:
当一个属性不是继承属性时,可以使用inherit关键字指定一个属性应从父元素继承它的值,inherit关键字用于显式地
指定继承性,可用于任何继承性/非继承性属性。
回答:
每一个属性在定义中都给出了这个属性是否具有继承性,一个具有继承性的属性会在没有指定值的时候,会使用父元素的同属性的值
来作为自己的值。
一般具有继承性的属性有,字体相关的属性,font-size和font-weight等。
文本相关的属性,color和text-align等。
表格的一些布局属性、列表属性如list-style等。
还有光标属性cursor、元素可见性visibility。
当一个属性不是继承属性的时候,我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。
详细的资料可以参考:
《继承属性》 《CSS有哪些属性可以继承?
》
6.CSS优先级算法如何计算?
相关知识点:
CSS的优先级是根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级,如下:
(1)标签内选择符x,0,0,0
(2)ID选择符0,x,0,0
(3)class选择符/属性选择符/伪类选择符0,0,x,0
(4)元素和伪元素选择符0,0,0,x
计算方法:
(1)每个等级的初始值为0
(2)每个等级的叠加为选择器出现的次数相加
(3)不可进位,比如0,99,99,99
(4)依次表示为:
0,0,0,0
(5)每个等级计数之间没关联
(6)等级判断从左向右,如果某一位数值相同,则判断下一位数值
(7)如果两个优先级相同,则最后出现的优先级高,!
important也适用
(8)通配符选择器的特殊性值为:
0,0,0,0
(9)继承样式优先级最低,通配符样式优先级高于继承样式
(10)!
important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。
计算实例:
(1)#demoa{color:
orange;}/*特殊性值:
0,1,0,1*/
(2)div#demoa{color:
red;}/*特殊性值:
0,1,0,2*/
注意:
(1)样式应用时,css会先查看规则的权重(!
important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性。
(2)特殊性值越大的声明优先级越高。
(3)相同特殊性值的声明,根据样式引入的顺序,后声明的规则优先级高(距离元素出现最近的)
(4)部分浏览器由于字节溢出问题出现的进位表现不做考虑
回答:
判断优先级时,首先我们会判断一条属性声明是否有权重,也就是是否在声明后面加上了!
important。
一条声明如果加上了权重,
那么它的优先级就是最高的,前提是它之后不再出现相同权重的声明。
如果权重相同,我们则需要去比较匹配规则的特殊性。
一条匹配规则一般由多个选择器组成,一条规则的特殊性由组成它的选择器的特殊性累加而成。
选择器的特殊性可以分为四个等级,
第一个等级是行内样式,为1000,第二个等级是id选择器,为0100,第三个等级是类选择器、伪类选择器和属性选择器,为0010,
第四个等级是元素选择器和伪元素选择器,为0001。
规则中每出现一个选择器,就将它的特殊性进行叠加,这个叠加只限于对应的等
级的叠加,不会产生进位。
选择器特殊性值的比较是从左向右排序的,也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。
如果两个规则的特殊性值相等的时候,那么就会根据它们引
入的顺序,后出现的规则的优先级最高。
对于组合声明的特殊性值计算可以参考:
《CSS优先级计算及应用》 《CSS优先级计算规则》 《有趣:
256个class选择器可以干掉1个id选择器》
7.关于伪类LVHA的解释?
a标签有四种状态:
链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:
link、:
visited、:
hover、:
active;
当链接未访问过时:
(1)当鼠标滑过a链接时,满足:
link和:
hover两种状态,要改变a标签的颜色,就必须将:
hover伪类在:
link伪
类后面声明;
(2)当鼠标点击激活a链接时,同时满足:
link、:
hover、:
active三种状态,要显示a标签激活时的样式(:
active),
必须将:
active声明放到:
link和:
hover之后。
因此得出LVHA这个顺序。
当链接访问过时,情况基本同上,只不过需要将:
link换成:
visited。
这个顺序能不能变?
可以,但也只有:
link和:
visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,
也就不存在覆盖的问题。
8.CSS3新增伪类有那些?
(1)elem:
nth-child(n)选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数
值,也可以接受函数。
(2)elem:
nth-last-child(n)作用同上,不过是从后开始查找。
(3)elem:
last-child选中最后一个子元素。
(4)elem:
only-child如果elem是父元素下唯一的子元素,则选中之。
(5)elem:
nth-of-type(n)选中父元素下第n个elem类型元素,n可以接受具体的数值,也可以接受函数。
(6)elem:
first-of-type选中父元素下第一个elem类型元素。
(7)elem:
last-of-type选中父元素下最后一个elem类型元素。
(8)elem:
only-of-type如果父元素下的子元素只有一个elem类型元素,则选中该元素。
(9)elem:
empty选中不包含子元素和内容的elem类型元素。
(10)elem:
target选择当前活动的elem元素。
(11):
not(elem)选择非elem元素的每个元素。
(12):
enabled控制表单控件的禁用状态。
(13):
disabled控制表单控件的禁用状态。
(14):
checked单选框或复选框被选中。
详细的资料可以参考:
《CSS3新特性总结(伪类)》 《浅谈CSS伪类和伪元素及CSS3新增伪类》
9.如何居中div?
-水平居中:
给div设置一个宽度,然后添加margin:
0auto属性
div{
width:
200px;
margin:
0auto;
}
-水平居中,利用text-align:
center实现
.container{
background:
rgba(0,0,0,0.5);
text-align:
center;
font-size:
0;
}
.box{
display:
inline-block;
width:
500px;
height:
400px;
background-color:
pink;
}
-让绝对定位的div居中
div{
position:
absolute;
width:
300px;
height:
300px;
margin:
auto;
top:
0;
left:
0;
bottom:
0;
right:
0;
background-color:
pink;/*方便看效果*/
}
-水平垂直居中一
/*确定容器的宽高宽500高300的层设置层的外边距div{*/position:
absolute;/*绝对定位*/width:
500px;height:
300px;top:
50%;left:
50%;margin:
-150px00-250px;/*外边距为自身宽高的一半*/background-color:
pink;/*方便看效果*/
}
-水平垂直居中二
/*未知容器的宽高,利用`transform`属性*/div{
position:
absolute;/*相对定位或绝对定位均可*/
width:
500px;
height:
300px;
top:
50%;
left:
50%;
transform:
translate(-50%,-50%);
background-color:
pink;/*方便看效果*/
}
-水平垂直居中三
/*利用flex布局实际使用时应考虑兼容性*/
.container{
display:
flex;
align-items:
center;/*垂直居中*/
justify-content:
center;/*水平居中*/
}
.containerdiv{
width:
100px;
height:
100px;
background-color:
pink;/*方便看效果*/
}
-水平垂直居中四
/*利用text-align:
center和vertical-align:
middle属性*/
.container{
position:
fixed;
top:
0;
right:
0;
bottom:
0;
left:
0;
background:
rgba(0,0,0,0.5);
text-align:
center;
font-size:
0;
white-space:
nowrap;
overflow:
auto;
}
.container:
:
after{
content:
"";
display:
inline-block;
height:
100%;
vertical-align:
middle;
}
.box{
display:
inline-block;
width:
500px;
height:
400px;
background-color:
pink;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完整详细CSS 面试知识点总结 完整 详细 CSS 面试 知识点 总结