前端面试题总结（part 2）:CSS部分

最新推荐文章于 2022-05-26 23:57:32 发布

材女的进击

最新推荐文章于 2022-05-26 23:57:32 发布

阅读量479

点赞数 1

分类专栏：前端前端面试 CSS

前端同时被 3 个专栏收录

75 篇文章 2 订阅

订阅专栏

前端面试

35 篇文章 1 订阅

订阅专栏

CSS

20 篇文章 0 订阅

订阅专栏

转自：https://github.com/qiu-deqing/FE-interview

1. CSS选择器有哪些？

*通用选择器：选择所有元素
#X id选择器
.X 类选择器
X Y后代选择器：选择满足X选择器的后代节点中满足Y选择器的元素
X 元素选择器：选择所有标签为X的元素
:link :visited :focus :hover :active 链接状态：选择特定状态的链接元素，顺序LoVe HAte （L-V-H-A）,
X+Y直接兄弟选择器：在X之后第一个兄弟节点中选择满足Y选择器的元素
X>Y子选择器：选择X的子元素中满足Y选择器的元素
X~Y 兄弟：选择X之后所有兄弟节点中满足Y选择器的元素
[attr] : 选择所有设置了attr属性的元素
[attr=value]:选择属性值为value的元素
[attr~=value]：选择属性值为空白符分隔，其中一个的值为value的元素
[attr|=value]：选择属性值为value或者value-开头的元素
[attr^=value]：选择属性值以value开头的元素
[atrr$=value]：选择属性值以value结尾的元素
[attr=value]*：选择属性值中包含value的元素
[:checked]：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
X:after , X::after : after伪元素，选择元素虚拟子元素（元素的最后一个子元素）CSS3中::表示伪元素兼容性:after为IE8+，::after为IE9+
:hover ：鼠标移入状态的元素
:not(selector):选择不符合selector的元素
::first-letter:伪元素，选择块元素第一行的第一个字母
::first-line：伪元素，选择块元素的第一行
:nth-child(an+b)：伪类，选择前面有an + b - 1个兄弟节点的元素，其中n >= 0，兼容性IE9+
:nth-last-child(an + b)：伪类，选择后面有an + b - 1个兄弟节点的元素其中n >= 0，兼容性IE9+
X:nth-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择前面有an + b - 1个相同标签兄弟节点的元素。兼容性IE9+
X:nth-last-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择后面有an+b-1个相同标签兄弟节点的元素。兼容性IE9+
X:first-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+
X:last-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性IE9+
X:only-child：伪类，选择满足X选择器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+
X:only-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+
X:first-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素是此此类型元素的第一个兄弟。选中它。兼容性IE9+

2. css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案

优点：

减少http请求的次数，极大提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可

缺点：

图片合并麻烦
维护比较麻烦，修改一个图片可能需要重新布局整个图片样式

使用场景：

对于一些不需要多变动的小图片，表情，标志等等都可以使用
一般应用于小图片，太大的图片不利于合并，且定位比较麻烦，一次加载的时间过长。

`3.display：none`与 visibility`:hidden;`的区别

联系：都能让元素不可见

区别：

1.display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden 不会让元素从渲染树中消失，渲染树元素继续占据空间，只是不可见

2.displa:none 是非继承属性，子孙节点消失是由于元素从渲染树中消失，通过修改子孙节点的属性无法显示；visibility：hidden是继承属性，子孙节点消失是继承了hidden，通过修改visibility：visible可以让子孙节点显示

3. 修改常规流中元素的display通常会造成文档重排，修改visibility属性只会造成本元素的重绘

4.读屏器不会读取display：none的元素内容，会读取visibility：hidden的元素内容

4. css hack 原理及常用的hack

概念：CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

原理：利用不同浏览器对css的支持和解析结果不同编写针对特定浏览器的样式。常见的hack有

属性hack : 不同浏览器解析bug或方法。比如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_ ”，而firefox两个都不能认识。
选择器hack:不同浏览器对选择器的支持不一样。比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释：适用于【IE5,IE9】

不推荐使用css hack解决兼容问题

CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此，在设计之初，写CSS hack需要遵循以下三条原则：

有效：能够通过 Web 标准的验证
只针对太古老的/不再开发的/已被抛弃的浏览器，而不是目前的主流浏览器
代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。

5. specified value，computed value，used value计算方法

specified value: 计算方法如下：

如果样式表设置了一个值，使用这个值
如果没有设置值，这个属性是继承属性，从父元素继承
如果没设置，并且不是继承属性，使用css规范指定的初始值

computed value: 以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承
used value：属性计算后的最终值，对于大多数属性可以通过window.getComputedStyle获得，尺寸值单位为像素。以下属性依赖于布局，

background-position

bottom, left, right, top

height, width

margin-bottom, margin-left, margin-right, margin-top

min-height, min-width

padding-bottom, padding-left, padding-right, padding-top

text-indent

6.link 和@import的区别

link是HTML方式，@import是css方式
link最大程度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link的支持早于@import
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link由于@import

7.`display: block;`和`display: inline;`的区别

block元素特点：

处于常规流中时，若width没有设置，会自动填满父容器
可以应用margin、padding
在没有设置高度的情况下会扩展高度以包含常规流中的子元素
处于常规流中时布局的时候在前后元素位置的中间（独占一个水平空间）
忽略vertical-align

inline元素特点：

水平方向上根据direction依次布局
不会在元素前后进行换行
受white-space控制
margin、padding在竖直方向上无效，水平方向上有效
width、height属性对不可替换行内元素无效，宽度由元素内容决定
不可替换元素的行框高由line-height确定，替换行内元素的行框高由height，margin，padding，border决定
浮动或绝对定位时会转换为block
vertical-align属性生效

8. CSS元素替换元素和不可替换元素的分类

替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；

又例如：根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

不可替换元素

(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

9.PNG,GIF,JPG的区别及如何选

参考资料：选择正确的图片格式 GIF:

8位像素，256色
无损压缩
支持简单动画
支持boolean透明
适合简单动画

JPEG：

颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合照片

PNG：

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
适合图标、背景、按钮

10. CSS有哪些继承属性

11.容器包含若干浮动元素时如何清理(包含)浮动

容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理推荐的清理浮动方法

12. 什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器会使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成压面闪烁。

解决方法：把样式表放在文档的head中

13. 如何创建块级格式化上下文(block formatting context),BFC有什么用

通俗概念：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC任然属于文档中的普通流。

创建规则：

根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block，table-cell，table-caption，flex.inline-flex之一额元素
overflow不是visible的元素

作用：

可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的margin折叠

14. display,float,position的关系

如果display是none，则position和float都不起作用，这种情况元素不产生框
否则，若position为absolute或fixed，框是绝对定位的，float的计算值为none，display根据下面表格调整
否则，若float不是none，框是浮动的，display根据下表格调整
否则，若元素是根元素，display根据下表格调整
其他情况下display的值为指定值

总而言之：绝对定位、浮动、根元素都需要调整display

display转换规则

15. 外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素、inline-block元素、绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-top和margin-bottom相邻时也会折叠

16. 如何确定一个元素的包含块(containing block)

根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin；对于paged media，它的尺寸等于page area。初始包含块的direction属性与根元素相同。
position为relative或者static的元素，它的包含块由最近的块级（display为block,list-item, table）祖先元素的内容框组成
如果元素position为fixed。对于连续媒体，它的包含块为viewport；对于paged media，包含块为page area
如果元素position为absolute，它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生，规则如下：
如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
其他情况下包含块由祖先节点的padding edge组成

如果找不到定位的祖先元素，包含块为初始包含块

17. stacking context,布局规则

z轴上的默认层叠顺序如下（从下到上）：

根元素的边界和背景
常规流中的元素按照html中顺序
浮动块
positioned元素按照html中出现顺序

如何创建stacking context：

根元素
z-index不为auto的定位元素
a flex item with a z-index value other than 'auto'
opacity小于1的元素
在移动端webkit和chrome22+，z-index为auto，position: fixed也将创建新的stacking context

18. 如何水平居中一个元素

如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left或者right）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为50%，3）偏移方向外边距设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为0,3）设置左右外边距都为auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>

如何竖直居中一个元素

参考资料：6 Methods For Vertical Centering With CSS。盘点8种CSS实现垂直居中

需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height：

<p class="text">center text</p>

<style>
.text {
    line-height: 200px;
}
</style>

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
（3）区别： IE的content部分把 border 和 padding计算了进去;

CSS优先级算法如何计算？

* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;

优先级为:
   同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
   !important > id > class > tag
   important 比内联优先级高

CSS3新增伪类有那些？

   举例：
   p:first-of-type   选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
   p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type   选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
   p:only-child       选择属于其父元素的唯一子元素的每个 <p> 元素。
   p:nth-child(2)   选择属于其父元素的第二个子元素的每个 <p> 元素。

   ::after           在元素之前添加内容,也可以用来做清除浮动。
   ::before           在元素之后添加内容
:enabled
   :disabled        控制表单控件的禁用状态。
   :checked 单选框或复选框被选中。

display有哪些值？说明他们的作用。

   block    块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none     元素不显示，并从文档流中移除。
inline     行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item    象块类型元素一样显示，并添加样式列表标记。
table    此元素会作为块级表格来显示。
inherit    规定应该从父元素继承 display 属性的值。

position的值relative和absolute定位原点是？

absolute
   生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
   生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
   生成相对定位的元素，相对于其正常位置进行定位。
static
   默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
   规定从父元素继承 position 属性的值。

CSS3有哪些新特性？

新增各种CSS选择器   （: not(.input)：所有 class 不是“input”的节点）
圆角       （border-radius:8px）
多列布局   （multi-column layout）
阴影和反射   （Shadow\Reflect）
文字特效       （text-shadow、）
文字渲染       （Text-decoration）
线性渐变       （gradient）
旋转          （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。

具体：http://www.w3cplus.com/css3/flexbox-basics.html

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。

淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { 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里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

对于普通元素的visibility：collapse；会将元素完全隐藏不占据页面空间和display：none表现相同。
若目标元素是table，visibility：collapse将table隐藏，但是会占据页面布局空间，仅在Firefox下起作用，IF会显示元素，Chrome会将元素隐藏但是会占据空间

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

如果元素display：none，则元素不会被渲染，position，float不起作用
如果元素的position：absolute或position：fixed，则float不起作用
如果float属性不是none，元素会脱离文档流，根据float的属性显示
有浮动，绝对定位，inline-block 属性的元素，margin不会和垂直方向上的其他元素margin折叠

请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

1、父级div定义height；
2、父级div 也一起浮动；
3、常规的使用一个class；
   .clearfix::before, .clearfix::after {
   content: " ";
   display: table;
   }
   .clearfix::after {
   clear: both;
   }
   .clearfix {
   *zoom: 1;
   }

4、SASS编译的时候，浮动元素的父级div定义伪类:after
   &::after,&::before{
   content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
   }

解析原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距，使元素之间互不相干
padding是用来隔开元素和内容之间的间隔

设置元素浮动后，该元素的display值是多少？

自动变成display：block

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

材女的进击

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题总结（part 2）:CSS部分

转自：https://github.com/qiu-deqing/FE-interview1. CSS选择器有哪些？*通用选择器：选择所有元素 #X id选择器 .X 类选择器 X Y后代选择器：选择满足X选择器的后代节点中满足Y选择器的元素 X 元素选择器：选择所有标签为X的元素 :link :visited :focus :hover :active ...
复制链接

扫一扫