首页 前端知识 CSS面试题整理

CSS面试题整理

2024-10-15 23:10:23 前端知识 前端哥 211 201 我要收藏

overflow: hidden; // 溢出隐藏

text-overflow: ellipsis; // 溢出用省略号显示

white-space: nowrap; // 规定段落中的文本不进行换行

  • 多行文本溢出

overflow: hidden; // 溢出隐藏

text-overflow: ellipsis; // 溢出用省略号显示

display:-webkit-box; // 作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列

-webkit-line-clamp:3; // 显示的行数

8.说一下什么是盒子模型?

  • box-sizeing: content-box:标准盒模型的 width 和 height 属性的范围只包含了 content。

  • box-sizeing: border-box:IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

9.说一下媒体查询/栅格布局?

❌10.margin和padding的使用场景?

11.说一下隐藏元素的方法有哪些?

12.CSS3 中的 transform 有哪些属性?

  • translate 位移

  • rotate 旋转

  • scale 缩放

  • skew 斜切

13…说一下display:none 与 visibility:hidden 的区别?

14.常见的图片格式及使用场景?

二.基础知识(二)


1.✅CSS 优化和提高性能的方法有哪些?

  • 使用link样式分离

  • css 压缩

  • 选择器性能问题,别让css做太多计算

  • 渲染性能问题,减少重绘回流

  • http问题,如使用精灵图

2.📢✅z-index 属性在什么情况下会失效?

  • 父元素 position 为 relative 时,子元素的 z-index 失效。解决:父元素 position 改为 absolute 或 static;

  • 元素没有设置 position 属性为非 static 属性。解决:设置该元素的 position 属性为 relative,absolute 或是 fixed 中的一种;

  • 元素在设置 z-index 的同时还设置了 float 浮动。解决:float 去除,改为 display:inline-block;

3.📢📢✅说一下对 requestAnimationframe 的理解?

  • 请求动画帧

  • MDN 对该方法的描述:

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

用cancelAnimationFrame()来取消执行动画

优势

  • CPU 节能、函数节流、减少DOM操作

4.为什么有时候⽤translate来改变位置⽽不是定位?

5.li和li之前有看不见的空白间隔是什么原因,如何解决?

6.对 CSSSprites 的理解?

7.什么是物理像素,逻辑像素和像素密度,为什么在移动端开发时需要用到@3x, @2x 这种图片?

8.对line-height 的理解及其赋值方式?

9.dispaly:inline-block什么时候会产生间隙?

10.对 CSS 工程化的理解?

三、定位与浮动


1.✅说一下清除浮动有哪些方式?

  • 给父级 div 定义height属性

  • 最后一个浮动元素之后添加一个空的 div 标签,并添加clear:both样式

  • 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

  • 使用 :after 伪元素。由于 IE6-7 不支持 :after,使用 zoom:1

2.✅说一下 clear 属性清除浮动的原理?

  • 官方对 clear 属性解释:“元素盒子的边不能和前面的浮动元素相邻”,对元素设置 clear 属性是为了避免浮动元素对该元素的影响,而不是清除掉浮动。

  • clear 属性只有块级元素才有效的,而::after 等伪元素默认都是内联水平,这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

3.✅📢说一下什么是 margin 重叠问题?如何解决?

4.✅📢说一下对BFC的理解?怎么创建BFC?

  • 根元素:body;

  • 元素设置浮动:float 除 none 以外的值;

  • 元素设置绝对定位:position (absolute、fixed);

  • display 值为:inline-block、table-cell、table-caption、flex 等;

  • overflow 值为:hidden、auto、scroll;

5.✅说一下position 的属性/作用有哪些?

6.✅说一下 sticky 定位怎么使用?是在哪两个定位间切换?

  • 如设置top:0可以粘滞效果,在fixed和relative直接切换

7.absolute 与 fixed 共同点与不同点?

共同点:

  • 改变行内元素的呈现方式,将 display 置为 inline-block

  • 使元素脱离普通文档流,不再占据文档物理空间

  • 覆盖非定位文档元素

8.📢display、float、position 的关系?

  • 总的来说,可以把它看作是一个类似优先级的机制,"position:absolute"和"position:fixed"优先级最高,有它存在的时候,浮动不起作用,'display’的值也需要调整;其次,元素的’float’特性的值不是"none"的时候或者它是根元素的时候,调整’display’的值;最后,非根元素,并且非浮动元素,并且非绝对定位的元素,'display’特性值同设置值。

9.📢说一下元素的层叠顺序?

四.布局问题


1.✅说一下常见的 CSS 布局单位/px、em、rem 的区别及使用场景?

2.✅说一下 Flex 布局/grid布局的区别?

  • Flex一维布局、grid二维布局

3.✅说一下三栏布局怎么实现?

  • 绝对定位,中间绝对定位,两边margin值

  • 浮动,两边固定大小,对应方向浮动,中间设置margin值,且中间一栏放最后

  • 利用flex:1

  • 利用grid-template-rows

  • 圣杯布局:利用浮动和负边距来实现,margin 负值将其移动到上一行

  • 双飞翼布局:双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。本质上来说,也是通过浮动和外边距负值来实现的。

4.✅说一下水平垂直居中有哪些方式?

5.说一下两栏布局怎么实现?

6.怎么根据设计稿进行移动端适配?

7.说一下响应式设计的概念及基本原理?

8.说一下grid布局?

五.场景应用/如何实现


1.✅怎么实现一个三角形/梯形?

2.✅怎么画一条0.5px的线?

transform: scale(0.5,0.5);

3.✅怎么实现一个扇形?

div{

border: 100px solid transparent;

width: 0;

heigt: 0;

border-radius: 100px;

border-top-color: red;

}

4.✅怎么设置小于12px的字体?

  • -webkit-transform:scale(0.5);

  • 使用图片

5.✅如何解决1px的问题?

window.devicePixelRatio = 设备的物理像素 / CSS像素。

  • JSX解决

#container[data-device=“2”] {

border:0.5px solid #333

}

  • 利用tranform:scale(0.5)

6.✅如何判断元素是否到达可视区域?

  • window.innerHeight 是浏览器可视区的高度;

  • document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离;

  • imgs.offsetTop 是元素顶部距离文档顶部的高度(包括滚动条的距离);

  • 内容达到显示区域的:img.offsetTop < window.innerHeight + document.body.scrollTop;

7.怎么实现一个宽高自适应的正方形?

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18964.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!