前端面试题---CSS篇

陈陈陈先生丶

已于 2022-03-27 15:36:51 修改

阅读量810

点赞数 2

文章标签：前端面试 css

于 2022-03-17 13:46:38 首次发布

本文链接：https://blog.csdn.net/weixin_45815479/article/details/123548328

版权

CSS面试题

面试题：Flex布局

容器的属性

flex-direction

        flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap

        默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-flow

  flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content

  justify-content属性定义了项目在主轴上的对齐方式。

align-items

align-items属性定义项目在交叉轴上如何对齐。

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性:

order
flex-grow
flex-shrink
flex-basis

        浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex
align-self

  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch(拉伸）。

原文出处：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

面试题：介绍一下CSS的盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

box-sizing属性

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】
border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】
inherit：继承父元素的 box-sizing 值。

面试题：CSS选择符有哪些？哪些属性可以继承？

选择器

id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)

可继承的样式

字体、文本、表格、列表、样式、声音等等

不可继承

背景色、边距等

面试题：CSS优先级算法如何计算？

优先级：

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

面试题：用CSS画一个三角形

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */

.box{

position: absolute;

width: 0px;

height: 0px;

content: " ";

border-right: 100px solid transparent;

border-top: 100px solid #ff0;

border-left: 100px solid transparent;

border-bottom: 100px solid transparent;

}

面试题：display有哪些值？说明他们的作用。

none：此元素不显示。
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC:块级格式化环境

        BFC是CSS中一个隐含属性，可以为一个元素开启BFC，解决高度塌陷问题。

        在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，脱离文档流，父元素的高度就会塌陷。

        开启后元素会变成一个独立布局区域,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

开启BFC后特点：

开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素，子元素和父元素的外边距不会重叠
开启BFC的元素可以包含浮动的子元素

常用开启方法：

        将元素设置 overflow不为visible

        还可以设置元素浮动（float不为none）或设置为行内块元素（display：inline-block）但是不推荐。

        position的值为absolute或fixed。

面试题：浮动优缺点以及清除浮动有哪些方式？

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清除浮动的方法（最常用的4种）

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
<div class="parent">

    //添加额外标签并且添加clear属性

    <div style="clear:both"></div>

    //也可以加一个br标签

</div>
2.父级添加overflow属性

通过触发BFC方式，实现清除浮动
.fahter{

width: 400px;

border: 1px solid deeppink;

overflow: hidden;

}
3.使用after伪元素清除浮动
//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

常用偶数号字体,但奇数号字体也没关系,例如知乎正文使用15px字体,豆瓣电影使用13px字体 UI设计师导出的设计稿一般都是偶数号字体偶数字号容易和页面其他标签的其他属性形成比例关系

面试题：有几种定位？分别是根据什么定位的？

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上，相对于元素的正常位置进行定位。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。（不脱离文档流）
绝对定位 absolute：设置为绝对定位的元素框从文档流完全删除，相对于第一个非 static 定位的父级元素进行定位。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
粘性定位 sticky：
粘滞定位和相对定位特点基本一致，不同的是粘滞定位在元素到达特定位置时将其固定。（不脱离文档流）

默认定位 Static：默认值。没有定位，元素出现在正常的流中。 inherit: 规定应该从父元素继承 position 属性的值。（不脱离文档流）

面试题：居中的方式

对于行内元素 : text-align: center;

对于确定宽度的块级元素：

（1）width和margin实现。margin: 0 auto;（水平居中）

（2）绝对定位和margin-left: -width/2, 前提是父元素position: relative

对于宽度未知的块级元素

        (1) 用 position加 translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。(要开启绝对定位）

绝对居中：left: 50%; top: 50%; transform:translate(-50%,-50%);

水平居中：left: 50%; transform:translate(-50%);

(2) 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。父元素要开启相对定位

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

        注意：高度必须定义，建议加 overflow: auto，防止内容溢出。

(3) 弹性布局 flex :父级设置display: flex; 居中代码放在父元素中。

         /*转为flex弹性盒布局*/
        display: flex;
        /*主轴上的对齐方式为居中*/
          justify-content: center;
          /*交叉轴上对齐方式为居中*/
        align-items: center;

面试题：什么是CSS reset？

CSS reset，又叫做 CSS 重写或者 CSS 重置，用于改写HTML标签的默认样式。

面试题：css sprite是什么,有什么优缺点

CSS Sprites是一种网页图片应用处理方式，通常被意译为“CSS图像拼合”（雪碧图），就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
其优点在于：

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

缺点：

图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。

面试题：display: none;与visibility: hidden;的区别

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。