2.CSS面试题

亮哥666
187 阅读17分钟

1.px 和 em 的区别

首先，在 CSS 中，单位分为两大类，绝对长度单位和相对长度单位。 绝对长度单位像cm，px。

px 即 pixel 像素，是相对于屏幕分辨率而言的，是一个绝对单位，但是具有一定的相对性。因为在同一设备上每个设备像素所代表的物理长度是固定不变的（绝对性），但在不同设备间每个设备像素所代表的物理长度是可以变化的（相对性）。

em 是相对长度单位，具体的大小要相对于父元素来计算，例如父元素的字体大小为 40px，那么子元素 0.5em 就代表字体大小是父元素的0.5倍， 20px，但是这个仅仅font-size是这个属性，如果子元素设置 width:0.5em,那代表宽度是自身的字体的0.5倍，即 0.5 *20 = 10px.

还有一个常用的单位是rem，rem 是全部的长度都相对于根元素html的字体大小，通常做法是给 html 元素设置一个字体大小，然后其他元素的长度单位就为 rem。 所以当用 rem 做响应式时，直接在媒体中改变 html 的 font-size，此时用 rem 作为单位的元素的大小都会相应改变，很方便。

vw,vh vw,就是根据窗口的宽度，分成100份，100vw表示满宽，50vw就表示一半宽，vw始终表示窗口的宽度，vh则为窗口的高度。

在桌面端，指的是浏览器的可视区域

移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素 对于定位元素来说，主要是指的他是相对谁定位的，谁就算是他的父元素。 对于普通定位元素就是我们理解的父元素 对于position: absolute;的元素是相对于已定位的父元素 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

2.居中方式总结

居中分为水平居中和垂直居中

常规流

  • 对于常规流块盒子来说，水平居中，是定宽，然后设置margin:0 auto，垂直居中要用通用的flex去解决。
  • 常规流行盒（行块盒水平居中：直接设置行盒（行块盒）父元素text-align:center，在垂直方向，如果是单行文本（行内元素），可以设置line-height = 整个区域的高度(要居中那一块的)。 行块盒或块盒内多行文本的垂直居中，可以给父元素做如下设置
display: table-cell; 
vertical-align: middle;

浮动元素

浮动元素，目前的做法是去调整margin left margin riht 去调整，浮动元素没有垂直居中的问题

定位元素

  1. 对于块盒，行块盒子设置宽高，对于行内元素不需要设置宽高，然后再设top,bottom,left,right四个方向的值为0，margin：auto实现水平和垂直居中

  2. 使用定位+ transform，

       top:50%;
   left:50%;
   transform: translate(-50%,-50%);

通用技术方案

  1. 使用flex布局，justify-content 实现水平居中，align-items实现垂直居中
  2. grid 布局实现水平，垂直居中，父元素设置
 display: grid;
 align-items:center;
 justify-content: center;

3.说说你对盒子模型的理解

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

  • 标准盒模型的width和height属性的范围只包含了content，
  • IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

  • box-sizing: content-box表示标准盒模型（默认值）
  • box-sizing: border-box表示IE盒模型（怪异盒模型）

4.CSS选择器有哪些？

常见的CSS选择器包括以下几种：

  1. 元素选择器（Element Selector）：根据元素的标签名匹配元素，例如 p、h1、div 等。
  2. ID选择器（ID Selector）：根据元素的id属性值匹配元素，id值是唯一的，每个元素只能有一个id，例如 #header。
  3. 类选择器（Class Selector）：根据元素的class属性值匹配元素，class值可以重复使用，一个元素可以有多个class，例如 .nav、.box。
  4. 属性选择器（Attribute Selector）：根据元素的属性值匹配元素，例如 [type="text"]、[href^="https://"] 等。
  5. 伪类选择器（Pseudo-class Selector）：根据元素的状态匹配元素，例如 :hover、:active、:first-child 等。
  6. 伪元素选择器（Pseudo-element Selector）：用来匹配元素的某些部分，例如 ::before、::after。
  7. 后代选择器（Descendant Selector）：选择某个元素下的所有后代元素，例如 #header p。
  8. 子元素选择器（Child Selector）：选择某个元素下的直接子元素，例如 ul > li。
  9. 相邻兄弟选择器（Adjacent Sibling Selector）：选择某个元素后面的相邻兄弟元素，例如 h1 + p。
  10. 通用选择器（Universal Selector）：匹配所有元素，例如 *。

5.CSS选择器优先级

image.png

注意事项：

  • !important声明的样式的优先级最高；
  • 如果优先级相同，则最后出现的样式生效；
  • 继承得到的样式的优先级最低；
  • 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
  • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

6.CSS3 有哪些新特性？

  1. 边框和背景：CSS3 增加了更多的边框和背景样式，包括圆角边框（border-radius）、阴影（box-shadow）、渐变背景（background-image）、多重背景（background-image）等。
  2. 文字和字体：CSS3 支持更多的字体和文字效果，包括自定义字体（@font-face）、文本阴影（text-shadow）、文本渐变（background-clip）等。
  3. 选择器：CSS3 引入了更多的选择器，例如通用选择器（*）、属性选择器（[attr]）、子元素选择器（>）、相邻兄弟选择器（+）等，增强了 CSS 的选择能力。
  4. 盒模型：CSS3 引入了更多的盒模型特性，例如盒阴影（box-shadow）、盒模糊（filter: blur()）等，可以更加灵活地控制元素的样式。
  5. 变形和动画：CSS3 支持更多的变形和动画效果，例如旋转（transform:rotate()）、缩放（transform:scale()）、位移（transform:translate()）、动画（@keyframes）等，可以为页面增加更多的交互和动态效果。
  6. 媒体查询：CSS3 引入了媒体查询（@media），可以根据设备的不同特性（如屏幕尺寸、分辨率等）为不同的设备提供不同的样式。
  7. 弹性盒子布局：CSS3 引入了弹性盒子布局（Flexbox），可以更加方便地实现响应式布局和自适应布局。

7. 谈谈你对BFC的理解？

块级格式化上下文 全称Block Formatting Context，简称BFC 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。 a. 独立的渲染区域 b.规定的是常规流盒子的布局

什么情况会创建BFC?

1.根元素 意味着，<html>元素创建的BFC区域，覆盖了网页中所有的元素，根元素是创建BFC的元素。

2.浮动和绝对定位元素（当然也包括固定定位，固定定位是绝对定位的一种特殊情况而已）

3.overflow不等于visible的块盒，为 auto、scroll、hidden

应用是：

  • 如果盒子处于同一个BFC里面，会有高度坍塌，外间距合并的问题，浮动的时候盒子坍塌的问题，解决办法就是在他们中间产生一个新的BFC,这样就可以解决上面的问题。

  • 还有一个可以用于实现两栏布局，三栏布局

8. 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

浮动和BFC来实现

因为常规流不会避开浮动元素，所以下面需要设置中间为BFC,避开浮动元素，实现两栏，三栏布局。

实现两栏布局方法：这个实现两栏布局的原理是 左边一个div，这个div让他左浮动，浮动后，如果右边再放一个div，div的布局的边框盒子会忽略这个盒子，内容会从左边div的盒子右边开始布局。如果此时你设置了边框盒子为BFC，通过设置overflow: hidden;来设置右边盒子为BFC，因为BFC的边框盒不会和浮动元素重叠，这样右边就会从左边盒子的右侧开始。 注：不论右侧div是否设置了浮动，右侧div的内容都不会从左侧浮动盒子的内容重叠。 链接：juejin.cn/post/728711…

三栏布局的原理和两栏布局的原理差不多，三栏布局需要的是在搞两个左右两个浮动，中间的的不浮动。中间的同样需要BFC布局，BFC布局还是和原来的一样，通过设置overflow: hidden;来设置。

Flex布局来实现

9. 伪元素和伪类？

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如

a:hover {color: #FF00FF}
p:first-child {color: red}

10.说说flexbox（弹性盒布局模型）,好处，以及适用场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

image.png

image.png

好处

  1. 简单易用：相比其他传统的布局方式，Flex布局更为简单，易于理解和使用，可以通过少量的CSS代码就能实现复杂的布局效果。
  2. 适应性强：Flex布局非常适合响应式设计，可以实现页面在不同尺寸的屏幕上自适应，避免了在不同设备上出现布局混乱的问题。
  3. 省去float和clear：Flex布局可以轻松地实现水平和垂直居中，省去了使用float和clear等传统布局方式的繁琐操作。
  4. 支持多种方向：Flex布局支持多种方向，包括水平方向、垂直方向和混合方向，可以非常方便地实现各种布局效果。
  5. 支持对齐和分布：Flex布局支持对齐和分布，包括项目对齐、内容对齐、空间分布等，可以轻松实现各种各样的布局方案。 总之，CSS Flex布局是一种非常强大、灵活和易于使用的布局方式，可以提高开发效率，减少代码量，同时还能够实现响应式设计和自适应布局等功能，非常适合现代Web开发

应用场景

在以前的文章中，我们能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成，这里就不再展开代码的演示

包括现在在移动端、小程序这边的开发，都建议使用flex进行布局

image.png

11.请你简述css的属性计算过程？

1.确定声明值：参考样式表中没有冲突的声明，作为 CSS 属性值

2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定 CSS 属性值

3.使用继承：对仍然没有值的属性，若可以继承则继承父元素的值

4.使用默认值：对仍然没有值得属性，全部使用默认属性值

视频链接

 <style>
    div {
        color: red;
    }
 </style>
 
  <div>
        <a href="">
            举个例子
        </a>
        <p>
            p元素
        </p>
    </div>

最终结论 a元素是浏览器默认的蓝色，而p元素是用的父元素的红色。

12.隐藏元素的方式有哪些？

  • display:none 设置元素的display为none是最常用的隐藏元素的方法 元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
  • visibility:hidden 从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
  • opacity:0
  • 设置height、width模型属性为0
  • position:absolute，然后移除视野
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

13.CSS如何画一个三角形？原理是什么？

一个向下的箭头

<style>
    .arrow {
        width: 0;
        height: 0;
        border-top: 200px solid red;
        border-left: 200px solid transparent;
        border-right: 200px solid transparent;
    }
</style>

<body>
    <div class="arrow">

    </div>
</body>

14.如何设置一个 0.5px高的线？

  • scale 方法
.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%;
}
  • boxshadow 设置竖直方向0.5px的阴影
 height: 1px;
 box-shadow: 0 0.5px 0 red;

15.position 有哪些值，作用分别是什么?

常见的取值有以下几种：

  1. static 默认值，元素按照正常文档流的方式进行排列，不会受到top、bottom、left、right等属性的影响。
  2. relative 元素相对于其正常位置进行定位，不会影响其他元素的位置。可以通过top、bottom、left、right属性来指定元素的偏移量。
  3. absolute 元素相对于其最近的已定位祖先元素（position值不为static的元素）进行定位，没有已定位祖先元素则相对于文档进行定位。可以通过top、bottom、left、right属性来指定元素的偏移量。
  4. fixed 元素相对于视口进行定位，即无论页面滚动与否，元素始终在同一位置。可以通过top、bottom、left、right属性来指定元素的偏移量。
  5. sticky 元素根据用户的滚动位置进行定位，当元素滚动到某个阈值时，元素将变为fixed定位，例如position: sticky; top: 0;会使元素在离开视口前固定在顶部。

16.让Chrome支持小于12px 的文字方式有哪些？区别？

  • zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
.span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
  • webkit-transform:scale() 使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素
.span1{
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }
  • webkit-text-size-adjust:none 淘汰的属性

17.如何实现单行／多行文本溢出的省略样式？

  • 单行文本
 p{
            line-height: 40px;
            width:400px;
            height:40px;
            border:1px solid red;
            // 下面三行代码是关键
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

多行文本： 如果是移动端，可以使用webkit 相关的api 去处理

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >

如果是pc端，可以使用浮动来处理 视频

<body>
 <style>
       .text-container {
        background-color: lightcyan;
        width: 1000px;
        height: 120px;
        line-height:20px;
        margin: 200px auto;
        overflow: hidden;
    } 
    .text-container::before {
        content: "";
        display: block;
        height: 100px;
        /* background-color: lightgreen; */
    }
    .more {
        float: right;
        /* background-color: #f40; */
        margin-left: -3px;
        line-height:20px ;
    }

    .content {
        word-wrap: break-word;
        margin-top: -100px;
        /* background-color: blue; */
    }
    </style>
    <div class="text-container">
        <div class="more">...</div>
        <div class="content">
            我那时工作刚满20个月，其中2个月，因为部门快要黄了，整天无所事事的。最后6个月，搞 iOS 去了。所以，真正做 Android 的时间也就1年，他说的没错，我确实掌握的不够深入。虽然邮件里直接指出了我的不足，但我觉得更多的还是肯定吧。
            说句不要脸的，我喜欢这种被人欣赏的感觉。类似的事，在我身上发生过挺多次了，只可惜因为自己的原因，没能接住那些泼天的富贵，先挖个坑，未来有时间再填。
            最后约的是3月21日，周五，又去面了两轮，junyu 还是不在，继续回去等消息。周六，发邮件给之前的面试官咨询结果，得知面试通过了，需要等 HR 约 junyu 的时间再聊聊。
            距离我入职下家公司只剩一周了，豌豆荚 HR 迟迟没有动静。我多次发短信催促她，得到的答复都是还在约。印象中最后约的是29号，周六，我从狼厂离职的第2天。
            当天下午，我到的时候，junyu 还在面试中，等了半个多小时，他才完事。简短的自我介绍和项目介绍后，我说自己开发了一款计算器 APP，获得了不错的用户反馈。他一脸鄙夷的眼神问我：
        </div>
    </div>
</body>

18.回流和重排？

19.说说对Css预编语言的理解？有哪些区别?

Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题

需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

Css预处理器便是针对上述问题的解决方案

预处理语言

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

  • 变量（variables）
  • 作用域（scope）
  • 代码混合（ mixins）
  • 嵌套（nested rules）
  • 代码模块化（Modules

20.css 层叠上下文？

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。

创建堆叠上下文的元素

  1. html元素（根元素）
  2. 设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序：

  1. 创建堆叠上下文的元素的背景和边框
  2. 堆叠级别(z-index, stack level)为负值的堆叠上下文
  3. 常规流非定位的块盒
  4. 非定位的浮动盒子
  5. 常规流非定位行盒
  6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
  7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。

avatar
文章
阅读
粉丝