查看原文
其他

【面试题】这26道CSS面试题是最近面试中出现最频繁的

林三心不学挖掘机 前端之神 2023-02-25

模拟面试、简历指导可私信找我,最低的价格收获最高的指导~

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。

CSS

1、选择器权重

  • 最高权重
  • 内联样式:1000
  • id选择器:100
  • 类选择器:10
  • 属性选择器:10
  • 伪类选择器:10
  • 标签选择器:1
  • 伪元素选择器:1
  • 相邻兄弟选择器:0
  • 子选择器:0
  • 后代选择器:0
  • 通配符选择器:0

2、可继承和不可继承样式

不可继承

  • display
  • width、height、margin、padding、border
  • background、background-color
  • position、top、right、left、bottom

可继承

  • font-size、font-weight、font-family
  • line-height、text-align、color
  • visibility
  • cursor

block和inline的区别?

  • block:独占一行,可设置宽高、margin、padding
  • inline:不独占一行,不可设置宽高,可设置水平margin、padding但不能设置垂直方向margin、padding

3、隐藏元素的方式

  • display:none 直接消失
  • visibility:hidden 不可见,但占着位置
  • opacity:0 透明不可见,但占着位置
  • position:absolute 绝对定位并移出可见范围
  • z-index:-999 将层级设置在底部,让他不可见

4、link和@import区别

  • link可以加载css、rss;@import只能加载css
  • link在页面载入时同时加载;@import在页面载入后再加载
  • link无兼容问题;@import是新语法,低版本浏览器不兼容
  • link标签可被js操作dom去除;@import不行

5、transition和animation的区别

  • transition:过度样式,需要被动触发
  • animation:动画样式,不需要被动触发,可以自动触发,可结合@keyframe进行多个关键帧的动画

6、伪元素和伪类

  • 伪元素:顾名思义,假的元素,只会显示其内容,但是并不会在dom树中找到他
p::before {content:"林三心";}
p::after {content:"林三心";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
  • 伪类:将一些效果加到节点上,例如鼠标点击,悬浮等
a:hover {color: #FF00FF}
p:first-child {color: red}

7、盒模型

  • 标准盒模型:width、height的计算范围只包含content
  • IE盒模型:width、height的计算范围包含content、padding、border

通过box-sizing进行设置

  • box-sizing: content-box标准盒模型(默认)
  • box-sizing: border-boxIE盒模型(怪异盒模型)

8、CSS3新样式

  • :not(.cc):新增的选择器,标识所有class不是“cc”的节点
  • border-radius:边框圆角
  • box-shadow:阴影
  • text-shadow:文字阴影
  • text-decoration:文字样式渲染
  • gradient:线性渐变
  • transform:可设置变形、放大缩小、旋转、定位
  • flex:flex布局

9、CSS提升性能方式

  • 1、css代码压缩
  • 2、link代替@import
  • 3、避免多层选择器
  • 4、动画CPU加速

10、为何使用less、sass

他们是css预处理器,使用他们的变量、继承、运算、函数等功能,大大提高样式编写效率,大多数打包工具最后都会将他们解析为原始css样式代码

11、postCss是啥

后置css,将解析后的css样式代码进行处理,提高其在各个浏览器的兼容性,常用做法是为每个浏览器样式添加特有前缀

12、单行、多行溢出省略号

  • 单行
overflowhidden
text-overflowellipsis;
white-spacenowrap;
  • 多行
overflowhidden;
text-overflowellipsis;
display-webkit-box;
-webkit-box-orientvertical;
-webkit-line-clamp: 3;

13、自适应布局方式

  • 媒体查询@media:通过监听不同的窗口宽度,展示不同的效果
  • rem:监听不同窗口宽度,为根节点设置对应font-size,并进而使所有使用到rem的样式得到变化(rem的“r”就是“root”)

14、CSS工程化

  • CSS实现模块化
  • CSS预处理器
  • CSS的postCSS
  • CSS代码压缩

15、CSS常见单位

  • px:固定像素,无自适应
  • em:根据父元素的font-size决定大小
  • rem:根据根元素的font-size决定大小

16、flex:1代表什么?

flex: 1 1 auto

分别是flex-grow、flex-shrink、flex-basis

17、两栏布局

两栏布局指的是,左边固定右边自适应

  • float浮动
.outer {
  height100px;
}
.left {
  float: left;
  width200px;
  background: tomato;
}
.right {
  margin-left200px;
  width: auto;
  background: gold;
}
  • flex布局
.outer {
  display: flex;
  height100px;
}
.left {
  width200px;
  background: tomato;
}
.right {
  flex1;
  background: gold;
}

18、三栏布局

三栏布局指的是左右固定,中间自适应

直接用flex布局

.outer {
  display: flex;
  height100px;
}

.left {
  width100px;
  background: tomato;
}

.right {
  width100px;
  background: gold;
}

.center {
  flex1;
  background: lightgreen;
}

19、双飞翼(圣杯)布局

直接用flex布局

.outer {
  display: flex;
  height100px;
}

.left {
  width100px;
  background: tomato;
}

.right {
  width100px;
  background: gold;
}

.center {
  flex1;
  background: lightgreen;
}

20、水平垂直居中实现?

  • 绝对定位+transform
.parent {   
    position: relative;

.child {    
    position: absolute;    
    left50%
    top50%;    
    transformtranslate(-50%,-50%);
}
  • flex布局
.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

21、清除浮动方式

  • 给父元素定义高度:不建议,会导致其他布局问题
  • 末尾空div并设置clear:both不建议,增加无用dom节点
  • 父元素设置overflow:hidden不建议,会导致部分内容被隐藏
  • 使用伪元素after+clear:both强烈推荐

22、对于BFC的理解?

BFC(块级格式上下文),你可以理解为一个有自己的布局规则的容器,其内部的布局不受外部影响

创建BFC的条件

  • 根元素:body
  • 元素设置浮动:float
  • 元素设置绝对定位:position为absolute、fixed
  • display为:inline-block、table-cell、table-caption、flex等
  • overflow为:hidden、auto、scroll

BFC容器特点

  • 垂直方向上,自上而下排列
  • BFC中两个相邻容器的margin会重叠
  • 计算BFC高度时,会把浮动元素也计算(清除浮动方式之一)
  • BFC容器不会和浮动容器发生重叠
  • BFC容器内部元素不会影响外部元素
  • 每个元素左margin与容器的左border相接触

23、实现一个三角形?

宽度设置0,四个border中,透明掉三个,剩一个显示,就是三角形了

div {
    width0;
    height0;
    border100px solid transparent;
    border-bottom-color: red;
}

24、实现扇形

跟三角形差不多,只不过多设置一个border-radius

div{
    border100px solid transparent;
    width0;
    heigt0;
    border-radius100px;
    border-top-color: red;
}

25、如何显示小于12px的文字?

使用transform: scale()进行缩小

span {
      font-size12px;
      -webkit-transformscale(0.8);
      display: block;
    }

26、为什么css选择器是自右往左解析?

链接:https://blog.csdn.net/jinboker/article/details/52126021

结语

我是林三心,一个热心的前端菜鸟程序员。如果你上进,喜欢前端,想学习前端,那咱们可以交朋友,一起摸鱼哈哈,摸鱼群,关注我,拉你进群,有5000多名前端小伙伴在等着一起学习哦 -->

模拟面试、简历指导可私信找我,价格超级实惠~

image.png


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存