CSS面试第一站

xiao666yan

已于 2023-07-03 00:48:41 修改

阅读量140

点赞数

分类专栏：前端面试题文章标签： css 面试

于 2023-07-01 22:07:17 首次发布

本文链接：https://blog.csdn.net/qq_51325652/article/details/131491955

版权

前端面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

题目1：块级元素和行内元素的区别

答案及解析：
（1）盒模型：块级元素会生成一个块级盒子，行元素不会，块级元素在水平方向上占领整个可用空间，竖直方向上按照内容高度自动调整，行内元素只会包裹文字或者其他行内元素
（2）布局:块级元素通常是页面布局的基础，因为它可以设置高度，宽度，位置等属性，但行内元素更适合包裹文本或其他行内元素，不能设置高度宽度等布局属性
（3）默认样式：如块级元素的display默认为block,行内元素默认为inline,块级元素的margin和padding默认值不为0，但行内元素默认只为0

题目2：说说对CSS预编语言的理解和它们之间的区别

答案及解析：
预编语言时基于CSS的扩展语言，可以更加方便高效的编写CSS代码，其主要作用是为CSS提供继承，变量，混合，嵌套，函数等功能以及更加易于维护和组织的代码结构
常见的CSS预编语言有Sass,Stylus,Less等，区别如下：
（1）语法不同，Stylus用了更加简洁灵活的缩进语法，另两个更贴近CSS语法
（2）变量定义方式不同，Sass用"$“定义变量，Less用”@"符号，Stylus直接使用变量名即可
（3）操作符和函数库不同,Sass和Less使用常见的操作符和函数库如运算符，颜色处理，字符多处理等，但stylus的函数库更强大，支持更多的特性和性能
（4）编译方式不同，stylus可以直接在浏览器中解析和执行，可以动态调整布局和样式，Sass和Less需要通过编译器进行编译，将预编译的代码转换为标准的CSS代码

题目3：：before和::after中双冒号和单冒号有什么区别，作用？

答案及解析：
在css中伪类用:表示，在CSS3中修订伪元素用::表示，以此区分伪类和伪元素

单冒号（:）用于CSS3的伪类
双冒号（::）用于CSS3的伪元素
::before和::after的作用分别是在元素内容前后加上指定内容
伪类和伪元素的区别：

伪类和伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创建了新元素
伪类只要不是互斥就能叠加使用
伪元素在选择器只能出现一次并且是末尾
伪类与伪元素的优先级分别与类，标签优先级相同

题目4： z-index属性在什么情况下会失效？

答案及解析：
z-index的值越大就越是在上层，z-index元素的position属性需要是relative,fixed,absolute
z-index在下列情况下会失效：

父元素position为relative时，子元素的z-index会失效 **解决：**父元素position属性改为absolute或者static
元素没有设置position属性为非static的一种
元素在设置z-index的同时还设置了float 解决：float去除，改为：display：inline-block
在手机端IOS 13系统中，-webkit–overflow-scrolling:touch也会使z-index失效解决：将touch换成unset

题目5：CSS选择器有哪些，优先级分别是什么，那些属性可以继承？

答案及解析：

常用选择器：

id选择器（#box）,选择id为box的元素
类选择器（.one）,选择类名为one的所有元素
标签选择器（div）,选择标签为div的所有元素
后代选择器（#box div）,选择id为box元素内部所有div元素
子选择器（.one>one_1）选择父元素为.one的所有one_1元素
相邻同胞选择器（.one+.two）选择紧接在。one之后的.two元素
群组元素（div,p）选择div,p的所有元素

伪类选择器

:link 选择未被访问的链接
:visited选择已被访问的链接
:active 选择活动链接
:hover 鼠标指针悬浮在上面的元素
:focus 选择具有焦点的
:first-child父元素的首个子元素

伪元素选择器

:first-letter 用于选定指定选择器的首字母
:first-line 用于选定指定选择器的首行
:before 选择器在选中的元素内容前面插入内容
:after 选择器在选中的元素内容后面插入内容

属性选择器

[attribute]选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute |= value] 选择attribute以value开头的元素

选择器优先级

内联>id选择器>类选择器>标签选择器

继承属性
在CSS中，继承是指给父元素设置一些属性，后代元素会自动拥有这些属性
在这里插入图片描述

注意：a标签的字体颜色不能被继承
h1—h6的字体大小也不能被继承

无继承的属性
在这里插入图片描述

题目6:单行文本如何实现两端对齐?

答案及解析
text-align:justify 但对最后一行无效
解决方法：
1.新增一行，使其不是最后一行
2.text-align-last该属性定义一段文本中最后一行在被强制换行之前的对齐规则
text-align-last: justify

题目7：使用css实现一个无限循环动画

答案及解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <image class="A" src="js.jpg"></image>
</body>
<style>
     .A {
        animation: donghua 1s linear 0s infinite alternate;
     }
     @keyframes donghua{
        0% {
            transform: scale(1);
        }
        25% {
            transform: scale(0.8);
        }
        50% {
            transform: scale(0.9);
        }
        75% {
            transform: scale(0.8);
        }
        100% {
            transform: scale(1);
        }
     }
</style>
</html>

animation复合属性
animation-name:动画名
animation-delay:动画延迟多长时间开始
animation-timing-function:linear 匀速
animation-duration: 2s播放时间
animation-iteration-count:ininite(一直播放)动画播放次数
animation-direction: alternate //动画在1,3，5…奇数次正向播放，在偶数次逆向播放

题目8：怎么实现一个宽高自适应的正方形

答案与解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="A">1.这是一个宽高自适应正方形，用vm或者rem实现</div>
    <div class="B">2.这是利用元素的margin/padding百分比是相对于父元素width的性质来实现</div>
    <div class="C">3.利用子元素的margin-top实现</div>
</body>
<style>
     .A {
        background-color: red;
        width: 10%;
        height: 10rem;
     }
     .B {
        width: 20%;
        height: 0;
        padding-top: 20%;
        background-color: orange;
     }
     .C {
        width: 20%;
        overflow: hidden;
        background-color: aqua;
     }
     .C::after {
        content: '';
        display: block;
        margin-top: 100%;
     }
</style>
</html>

题目9：Sass，Less是什么，为什么要使用它们

答案与解析：
它们都是CSS预处理器，是CSS上的一种抽象层，它们是一种特殊的语言/语法汇编成CSS,例如Less是一种动态样式语言，将CSS赋予了动态语言的特性，如变量，函数，继承，运算，Less既可以在客户端运行，也可以在服务端运行（借助Node,js）
使用它们是因为它们结构清晰便于扩展，可以轻松实现多重继承，完美兼备CSS代码，可以方便的应用到老项目之中，Less只是在CSS语法上做了扩展，所以老的CSS代码也可以和Less代码一同编译

题目10：只能实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

overflow: hidden          //溢出隐藏
text-overflow: ellipsis   //溢出用省略号表示
white-space: nowrap.  //段落中的文本不换行

多行文本溢出隐藏

overflow: hidden          //溢出隐藏
text-overflow: ellipsis   //溢出用省略号表示
display: -webkit-box    //作为弹性伸缩盒子模型展示
-webkit-box-orient:vertical    //设置伸缩盒子模型子元素排列方式为从上到下竖直排列
-webkit-line-clamp:3   //显示的行数