CSS相关面试题

最新推荐文章于 2024-03-07 10:49:02 发布

鸭鸭:)

最新推荐文章于 2024-03-07 10:49:02 发布

阅读量430

点赞数 1

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

本文链接：https://blog.csdn.net/Vevean2545116309/article/details/120336065

版权

前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

面试题

6 篇文章 0 订阅

订阅专栏

1.什么是css预处理器

css预处理器使用一种专门的编程语言，对web页面进行样式设计，然后再编译成正常的css文件，以供项目使用。
css预处理器为css增加了许多新的特性，如嵌套选择器，变量，函数等。
常用的css预处理器有less,sass,stylus等。

2.css预处理器有哪些优缺点？

css预处理器的优点：
（1）用变量存储多次引用的信息，只需修改一个地方，就能让引用之处都改变
（2）混合能够重用一段样式代码
（3）选择器可嵌套选择器，使选择器之间的关系更加明确
（4）内置丰富的函数，可处理颜色，字符串，数字，选择器等
（5）导入规则可让各部分代码保持独立，模块化管理，各个导入的文件最终被编译成一个CSS文件
css预处理器的缺点：
（1）调试难度增加
（2）带来了一定的学习成本
（3）通过编译生成CSS文件，降低了对CSS文件的可读性

4.能控制元素的盒模型的属性是box-sizing，即规定了box-model的宽度是否包含内边距和边框（和IE盒模型与W3C盒模型相似的原理）
box-sizing有两个常用的属性：
在这里插入图片描述
下面是一个栗子：

4. link标签和import标签的区别

从属关系区别
Link标签属于HTML标签，而@import是css提供的语法规则
加载顺序区别
页面被加载时，link会同时加载；而import引用的css在页面加载完后再加载
兼容性区别
link标签没有兼容性，import标签只有在IE5以上才能识别
权重区别
link的权重高于import的
link引入的样式支持通过js控制dom去改变样式；@import引入的不支持通过js进行dom操作。

6.Flex布局
8.垂直水平居中的方法
在这里插入图片描述

a.margin:auto法
在这里插入图片描述
b.flex布局
c.子绝父相

9.关于js动画和css3动画的差异性

10 说一下块元素和行元素

块元素：元素独占一行，可设置宽高，可包含行内元素和其他元素，常见的块元素有div,ul,ol,p,h1~h6等；
行元素：元素不能独占一行，不能设置宽高，只能包含行内元素和纯文本，常见的行内元素有span,a等

11.多行元素的文本省略号

.txt-cut {
overflow: hidden;
text-overflow: ellipsis;/设置省略号/
display: -webkit-box;/将盒子转化为弹性盒子/
-webkit-line-clamp: 2;/设置显示多少行/
-webkit-box-orient: vertical;/文本显示方式/
}

13.双边距重叠问题（外边距折叠）

可设置BFC

14.position属性比较

Position一共有五个属性：static,relative,absolute,fixed static:默认值，存在于正常流。
relative:相对定位，还存在于正常流中，会根据原先的位置偏移，并且原先的位置还会保留。
absolute:绝对定位，会脱离正常流，并且将元素变为块级元素，设置后，原先的空间会被删除，并且它相对于离他最近的不为static的祖先元素偏移，设置时float不生效。
fixed:固定定位，会脱离正常流，并且将元素变为块级元素，设置后，原先的空间会被删除，它相对于视口偏移，设置时float也不生效。

15.浮动清除

可设置BFC清除浮动（设置pverflow:hidden;设置position:absolute或fixed）；可设置clear:both
让它不要找前面的左右浮动

16.css3新特性 css3边框：border-image,border-radius,box-shadow css3弹性盒 css3背景:background-size,background-origin css3颜色：opacity
css3文本：text-overflow,texte-shadow box-sizing css3多列 column系列
2D变换：transform,transform-origin 过渡transition css动画animation
媒体查询系列media

19.怎么样让一个元素消失，讲讲

display:none;
visibility:hidden;
opacity:0

css动画如何实现

transition和animation

21.如何实现图片在某个容器中居中的？

可以把图片再放到一个div里面 margin：0 auto 子绝父相 flex布局（justify-content;align-items）

22.如何实现元素的垂直居中

align-items+flex布局子绝父相+top:50%; transform: translate(0,-50%);

CSS3中对溢出的处理

text-overflow:clip;ellipsis;string

24.float的元素，display是什么

不论是行内元素还是块级元素，设置float之后它们都会变成块级元素，但表现却更像行内块级元素，在没有明确的宽度时，宽度会随着内容自适应，而不是占据一行。

26.calc函数是什么？有什么作用？

calc()是css的一个函数，只有一个数学表达式参数，可以动态计算长度值，并且在表达式中可以混用不同的单位。但要注意，在运算符前后要留一个空格。

28.display：table和本身的table有什么区别

display:table的css声明能让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，并且不会产生因为使用了table那样的制表标签导致语义化的问题。
用表格table元素布局已经不再提倡，用css将元素变为表格，再布局写出来的文件比用table编写出来的文件小，而且table必须在页面加载完成之后才显示，div是逐行显示。

29.z-index的定位方法

z-index设置元素的堆叠顺序，该属性只在设置了position不为static的元素上才有效，若为正数，离用户越近，若为负数，离用户越远，属性值若为auto，默认，则堆叠顺序与父元素相同。

如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？

可以修改父元素的颜色

31.css3新增的属性有：

css3边框：border-image;border-radius;box-shadow
css3弹性盒
css3背景：background-size;background-origin
css3颜色：opacity
css3文本：text-overflow;text-shadow;
box-sizing
css3多列：column
2D变换：transform;transform-origin;过渡transition
css3动画animation
媒体查询media

line-height和height的区别

行高是两行文字基线之间的距离，height一般指容器的整体高度

设置一个元素的背景颜色，背景颜色会填充哪些区域？

会填充到content,padding,border区域。

知道选择器的优先级吗

!important>id选择器>类选择器、伪类选择器、属性选择器>标签选择器，伪标签选择器>通配符选择器>继承>浏览器默认

用css实现一个硬币旋转的效果

transform:rotateY和animation

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
CSS画正方体，三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .trigon{
           width:0;
           height:0;
           border-bottom:100px solid black;
           border-left:100px solid transparent;
           border-right:100px solid transparent;
           margin-bottom:200px;
       }
       .trapezoid{
           width:40px;
           height:30px; 
           border-left:100px solid transparent;
           border-right:100px solid transparent;
           border-bottom:100px solid orange;
           margin-bottom:30px;
       }
       .sector{
        width:100px;
        height:100px;
        background-color: pink;
        border-radius:300px 0 0 0;
       }
       .arrows{
           width:0;
           height:0;
           border-bottom:100px solid black;
           border-left: 100px solid transparent;
           border-right:100px solid transparent;
           position:relative;
        
       }
       .small{
           width:0;
           height:0;
           border-bottom:80px solid white;
           border-left: 80px solid transparent;
           border-right:80px solid transparent;
           position:absolute;
           margin-top:20px;
           left:50%;
           transform:translate(-50%);
         
       }
    </style>
</head>
<body>
    <div class="trigon"></div>
    <div class="trapezoid"></div>
    <div class="sector"></div><!--扇形-->
    <div class="arrows">
        <div class="small"></div>
    </div><!--箭头-->
</html>