css面试题
文章平均质量分 90
巨人的小脚丫
这个作者很懒,什么都没留下…
展开
-
(每日一题)面试官:让Chrome支持小于12px 的文字方式有哪些?区别
Zoom非标属性,有兼容问题,缩放会改变了元素占据的空间大小,触发重排大部分现代浏览器支持,并且对英文、数字、中文也能够生效,缩放不会改变了元素占据的空间大小,页面布局不会发生变化对谷歌浏览器有版本要求,在27之后,就取消了该属性的支持,并且只对英文、数字生效。原创 2022-10-10 08:04:33 · 81 阅读 · 0 评论 -
(每日一题)面试官:CSS如何画一个三角形?原理是什么?
在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢?实现过程似乎也并不困难,通过边框就可完成。原创 2022-10-09 13:38:53 · 137 阅读 · 0 评论 -
(每日一题)面试官:如何使用css完成视差滚动效果?
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。,让背景相对于视口固定。及时一个元素有滚动机制,背景也不会随着元素的内容而滚动。当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果。作用是设置背景图像是否固定或者随着页面的其余部分滚动。我们可以把网页解刨成:背景层、内容层、悬浮层。也就是说,背景一开始就已经被固定在初始的位置。/* 视差元素的父级需要3D视角 */同样,让我们先来看一下两个概念。完成滚动视觉差就需要将。原创 2022-10-08 10:02:49 · 211 阅读 · 0 评论 -
(每日一题)面试官:如何实现单行/多行文本溢出的省略样式?
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号单行文本溢出多行文本溢出。原创 2022-10-07 16:32:54 · 171 阅读 · 0 评论 -
(每日一题)面试官:如果要做优化,CSS提高性能的方法有哪些?
每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的作为页面渲染和内容展现的重要环节,css影响着用户对整个网站的第一体验因此,在整个产品研发过程中,css性能优化同样需要贯穿全程css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑,同时还要注意css代码的加载顺序。原创 2022-10-06 07:15:18 · 79 阅读 · 0 评论 -
(每日一题)面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。原创 2022-10-05 07:04:08 · 207 阅读 · 0 评论 -
(每日一题)面试官:怎么理解回流跟重绘?什么场景下会触发?
现在我们要把这朵从左边移到了右边,那我们要先确定好右边的具体位置,画好形状(回流),再画上它原有的颜色(重绘)几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性,然后再将计算的结果绘制出来。在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局发生改变。),却并未影响其几何属性时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式,这里就仅仅触发了重绘。当你获取布局信息的操作的时候,会强制队列刷新,包括前面讲到的。原创 2022-10-04 07:06:16 · 137 阅读 · 0 评论 -
(每日一题)面试官:css3动画有哪些?
animation属性描述属性值指定动画完成一个周期所需要时间,单位秒(s)或毫秒(ms),默认是 0指定动画计时函数,即动画的速度曲线,默认是 “ease”指定动画延迟时间,即动画何时开始,默认是 0指定动画播放的次数,默认是 1animation-direction 指定动画播放的方向默认是 normal指定动画填充模式。默认是 none指定动画播放状态,正在运行或暂停。默认是 running指定 @keyframes 动画的名称CSS。原创 2022-10-03 12:24:28 · 131 阅读 · 0 评论 -
(每日一题)面试官:CSS3新增了哪些新特性?
即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观。动画这个平常用的也很多,主要是做一个预设的动画。和一些页面交互的动画效果,结果和过渡应该一样,让页面不会那么生硬。:转换元素的位置(围绕那个点进行转换),默认值为`(x,y,z):(50%,50%,0)通常情况,背景都是覆盖整个元素的,利用这个属性可以设定背景颜色或图片的覆盖范围。当我们设置背景图片时,图片是会以左上角对齐,但是是以。属性允许你旋转,缩放,倾斜或平移给定元素。原创 2022-10-02 14:50:45 · 312 阅读 · 0 评论 -
(每日一题)面试官:介绍一下grid网格布局
是一个强大的布局,如一些常见的 CSS 布局,如居中,两列布局,三列布局等等是很容易实现的,在以前的文章中,也有使用。布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列。表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素。有时候,一些项目的指定位置,在现有网格的外部,就会产生显示网格和隐式网格。元素就是网格的项目,由于网格元素只能是容器的顶层子元素,所以。划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。原创 2022-10-01 09:57:56 · 192 阅读 · 0 评论 -
(每日一题)面试官:说说flexbox(弹性盒布局模型),以及适用场景?
定义了项目的缩小比例(容器宽度原创 2022-09-30 08:44:40 · 241 阅读 · 0 评论 -
(每日一题)面试官:如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?
基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器。两栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在。在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器。可以说是最好的方案了,代码少,使用简单。原创 2022-09-29 07:08:26 · 251 阅读 · 0 评论 -
(每日一题)面试官:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?
内联元素居中布局块级元素居中布局。原创 2022-09-28 07:07:57 · 97 阅读 · 0 评论 -
(每日一题)面试官:谈谈你对BFC的理解?
目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响到外部的元素。原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到。实际就是页面一个独立的容器,里面的子元素不影响外面的元素。为80的话,两个P之间的距离还是100,以最大的为准。前面讲到,每个元素的左外边距与包含块的左边界相接触。在计算高度时,浮动元素也会参与,所以我们可以触发。重叠(塌陷),以最大的为准,如果第一个P的。,则内部浮动元素计算高度时候也会计算。因此会根据包含块的宽度,和。的左边依然会与包含块的左边相接触。原创 2022-09-27 08:47:59 · 95 阅读 · 0 评论 -
(每日一题)面试官:css中,有哪些方式可以隐藏页面元素?区别?
在平常的样式排版中,我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种,它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法。原创 2022-09-26 08:55:08 · 72 阅读 · 0 评论 -
(每日一题)面试官:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
CSS像素(css pixel, px): 适用于web编程,在 CSS 中以 px 为后缀,是一个长度单位在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位px是一个相对单位,相对的是设备像素(device pixel)一般情况,页面缩放比为1,1个CSS像素等于1个设备独立像素CSS在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(比如调整屏幕的分辨率)在不同的设备之间,每1个 CSS 像素所代表的设备像素是可以变化的(比如两个不同型号的手机)原创 2022-09-25 10:25:58 · 125 阅读 · 0 评论 -
(每日一题)面试官:说说em/px/rem/vh/vw区别?
传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面,适应多种不同分辨率的终端,包括移动设备等px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值rem:相对单位,可理解为root em。原创 2022-09-24 08:30:37 · 159 阅读 · 0 评论 -
(每日一题)面试官:说说你对盒子模型的理解?
经过上面的优先级计算规则,我们知道内联样式的优先级最高,如果外部样式需要覆盖内联样式,就需要使用。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性。内联 > ID选择器 > 类选择器 > 标签选择器。选择器所选择的元素,叫做“选择器的对象”CSS选择器是CSS规则的第一部分。套用上面的算法,依次求出。原创 2022-09-23 06:47:40 · 138 阅读 · 0 评论 -
(每日一题)面试官:说说你对盒子模型的理解?
当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box),即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成。,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的。,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域。这时候,就可以发现盒子的所占据的宽度为200px。标准盒子模型,是浏览器默认的盒子模型。所以上面问题中,设置。原创 2022-09-21 22:46:44 · 170 阅读 · 1 评论