前端八股文(CSS篇)

目录

1.px和em的区别

2.介绍下BFC及其应用

3.介绍下粘性布局(sticky)

4.清除浮动的方法

5.如何用css或js实现多行文本溢出省略效果,考虑兼容

6.如何触发重排和重绘?

7.重绘与重排的区别?

 8.说说两种盒模型以及区别

9. 讲一下png8、png16、png32的区别,并简单讲讲 png 的压缩原理

10.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景


1.px和em的区别

px全称pixel像素,是相对于屏幕分辨率而言的,它是一个绝对单位,但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的,这点表现的是绝对性。但是在不同的设备之间,每个设备像素所代表的的物理长度是可以变化的,这点表现的是相对性。

em是一个相对长度单位,具体大小需要相对于父元素计算,比如父元素的字体大小为80px,那么子元素1em就表示大小和父元素一样为80ox,0.5em就表示字体大小是父元素的一半为40px


2.介绍下BFC及其应用

所谓BFC,指的是一个独立的布局环境,BFC内部的元素布局与外部互不影响。

触发BFC的方式有很多,常见的有:

  • 设置浮动
  • overflow设置为auto,scroll,hidden
  • position设置为absolute,fixed

常见的BFC应用有:

  • 解决浮动元素令父元素高度坍塌的问题
  • 解决非浮动元素被浮动元素覆盖问题
  • 解决外边距垂直方向重合的问题

3.介绍下粘性布局(sticky)

position中sticky值是css3新增的,设置sticky值后,在屏幕范围时该元素的位置并不受定位影响(设置top,left等属性是无效的),当该元素的位置将要偏移范围时,定位又会变成fixed,根据设置的left,top等属性成固定位置的效果

sticky属性值有以下几个特点:

  • 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置
  • 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
  • 元素固定的相对偏移是相对离他最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量

4.清除浮动的方法

  • clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式:{clear:both;height:0;overflow:hidden;}
  • 给浮动元素父级设置高度
  • 父级同时浮动(需要给父级同级元素添加浮动)
  • 父级设置为inline-block,其margin:0 auto居中方法失效
  • 给父级添加overflow:hidden清除浮动方法
  • 万能清除法: ::after伪元素清浮动

5.如何用css或js实现多行文本溢出省略效果,考虑兼容

单行:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行:

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;//行数
overflow:hidden;

兼容:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

JS实现方式:

  • 使用split+正则表达式将单词与单个文字切割出来存入words
  • 加上“....”
  • 判断scrollHeight与clientHeight,超出的话就从words中pop一个出来

6.如何触发重排和重绘?

任何改变用来构建渲染树的信息都会导致一次重排或重绘:

  • 添加,删除,更新DOM节点
  • 通过display:none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility:hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表,调整样式属性
  • 用户行为,例如调整窗口大小,改变字号,或者滚动。

7.重绘与重排的区别?

重排:部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成

布局,重新排列元素

重绘:由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新,表现为某些元素的外观被改变

单单改变元素的外观,肯定 不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分

重绘不一定出现重排,重排必然会出现重绘


 8.说说两种盒模型以及区别

盒模型也称为框模型,就是从盒子顶部俯视所得的一张平面图,用于描述元素所占用的空间。他有两种盒模型,W3C模型和IE模型

理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用css给某个元素定义高或宽时,IE盒模型中内容的宽或高将会包含内边距和边框,而W3C盒模型并不会。


9. 讲一下png8、png16、png32的区别,并简单讲讲 png 的压缩原理

PNG图片主要有三个类型,分别为 PNG 8/ PNG 24 / PNG 32。

  • PNG 8:PNG 8中的8,其实指的是8bits,相当于用2^8(2的8次方)大小来存储一张图片的颜色种类,2^8等于256,也就是说PNG 8能存储256种颜色,一张图片如果颜色种类很少,将它设置成PNG 8得图片类型是非常适合的。
  • PNG 24:PNG 24中的24,相当于3乘以8 等于 24,就是用三个8bits分别去表示 R(红)、G(绿)、B(蓝)。R(0-255),G(0-255),B(0-255),可以表达256乘以256乘以256=16777216种颜色的图片,这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。
  • PNG 32:PNG 32中的32,相当于PNG 24 加上 8bits的透明颜色通道,就相当于R(红)、G(绿)、B(蓝)、A(透明)。R(0255),G(0255),B(0255),A(0255)。比PNG 24多了一个A(透明),也就是说PNG 32能表示跟PNG 24一样多的色彩,并且还支持256种透明的颜色,能表示更加丰富的图片颜色类型。

PNG图片的压缩,分两个阶段:

  • 预解析(Prediction):这个阶段就是对png图片进行一个预处理,处理后让它更方便后续的压缩。
  • 压缩(Compression):执行Deflate压缩,该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

10.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

  • display: none (不占空间,不能点击)(场景,显示出原来这里不存在的结构)
  • visibility: hidden(占据空间,不能点击)(场景:显示不会导致页面结构发生变动,不会撑开)
  • opacity: 0(占据空间,可以点击)(场景:可以跟transition搭配)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务(7)

目录 31.Ribbon和Feign调用服务的区别? 32.什么是SpringCloud Bus? 33.什么是SpringCloud Config? 34.分布式配置中心有哪些框架? 35.分布式配置中心的作用? 31.Ribbon和Feign调用服务的区别? 调用方式同&am…

MyBatis中#{}和${}的用法

一、例子 1、#{}将传入的数据当作一个字符串,会对传入的数据加上一个双引号。 比如: select * from student where student_name #{studentName}如果传入的值为zhangsan,那么经过Mybatis解析完成之后的语句是: select * from…

一次内核block层Multi queue报错IO QID timeout, reset controller案例分析

最近内核block层调试IO性能(磁盘nvme,IO调度算法bfq,内核版本centos 8.3,4.18.0-240),启动fio压测一段时间后,就发现fio莫名其妙会卡死了。一看内核日志,有如下异常打印 nvme nvme1: I/O 61 QID 5 timeout…

springboot(ssm中山社区医疗综合服务平台 医疗管理系统 Java系统

springboot(ssm中山社区医疗综合服务平台 医疗管理系统 Java系统 开发语言:Java 框架:ssm/springboot vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7(或8.0&#x…

使用Pytorch搭建模型

本来是只用Tenorflow的,但是因为TF有些Numpy特性并不支持,比如对数组使用列表进行切片,所以只能转战Pytorch了(pytorch是支持的)。还好Pytorch比较容易上手,几乎完美复制了Numpy的特性(但还有一…

广州市网约车平台:照片上传标准与处理技巧全解析

《广州市网络预约出租汽车综合业务管理平台》是一个旨在规范和提升广州市网约车服务质量的在线管理系统。它整合了司机和车辆信息管理、预约服务、监管监控、服务质量评价以及数据分析等功能,确保网约车服务符合当地法规要求,同时为乘客提供安全、便捷的…

React16源码: Why16, 研究源码的意义, 源码目录核心结构分析

为什么要选择React16 现在React18都早已实践很多,为何回过头来看16版本的代码理由如下 从实际出发,企业内老旧项目多为16版本,理解16的核心能够帮助我们快速解决问题16版本React是完全重写了核心代码, 是一次重大的更新 引入了 fiber 这个概…

浅谈大模型推理成本优化

上回说了,全赞AI的应用里面有用到几十个大模型,我的其他的应用比如渣渣句,熊喵表情都会或多或少的用到一到两个大模型的推理。而众所周知,目前大模型的推理存在两个问题,一个是慢,一个是贵,慢的…

MyBatisPlus之逻辑删除

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 MyBatisPlus之逻辑删除 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、什么是逻辑删…

微服务系列之分布式事务理论

概述 事务是由一组操作构成的可靠的独立的工作单元,事务具备ACID的特性,即原子性、一致性、隔离性和持久性。 分类 大多数情况下,分类是没有意义的一件事。但是分类可以一定程度上,加深理解。 实现 从实现角度来看&#xff0…

轻松删除文件名中的符号,使用替换功能,让管理文件更加得心应手!

在我们的日常生活和工作中,文件管理是一项必不可少的任务。而一个整洁、有序的文件名系统则有助于我们快速找到所需的文件。如果你发现文件名中存在一些不必要的符号,那么这款文件重命名工具将是你的得力助手。它具备强大的替换功能,可以轻松…

数的高次幂运算取余,解决大数溢出问题

目录 解决思路引用基础数学公式公式1证明:公式2证明:公式3证明:公式4,但无法证明大数分解解决思路 当一个幂运算很大,而模为整型数时,通常的做法(先求幂再取模),结果很大可能就是数溢出,无法表示这样的大数,导致运算失败。 可以先试着将数分割成几个部分,然后一个…

在 Unity 中获取 Object 对象的编辑器对象

有这个需求的原因是,在编辑器的 Inspector 逻辑中,写了许多生成逻辑。 现在不想挨个在 Inspector 上都点一遍按钮,所以就需要能获取到它们的编辑器对象。 发现可以借助官方的 UnityEditor.Editor.CreateEditor 方法达到目的,如下…

OpcUaHelper实现西门子OPC Server数据交互

Opc ua客户端类库,基于.net 4.6.1创建,基于官方opc ua基金会跨平台库创建,方便的实现和OPC Server进行数据交互。 FormBrowseServer 在开发客户端之前,需要使用本窗口来进行查看服务器的节点状态,因为在请求服务器的节点数据之前,必须知道节点的名称,而节点的名称可以…

分布式技术之负载均衡技术

文章目录 什么是负载均衡?服务请求的负载均衡方法轮询策略随机策略哈希和一致性哈希策略对比分析 负载均衡是分布式可靠性中非常关键的一个问题或技术,在一定程度上反映了分布式系统对业务处理的能力。比如,早期的电商抢购活动,当…

4.36 构建onnx结构模型-Where

前言 构建onnx方式通常有两种: 1、通过代码转换成onnx结构,比如pytorch —> onnx 2、通过onnx 自定义结点,图,生成onnx结构 本文主要是简单学习和使用两种不同onnx结构, 下面以 Where 结点进行分析 方式 方法一…

记录一下imx6ull linux 5.10.9多点电容触摸屏驱动报错问题解决方法

最近再研究如何将linux 5.10.9移植到imx6ull,用的原子的开发板,在移植电容触摸屏驱动时报错gpio gpiochip0: (209c000.gpio): gpiochip_lock_as_irq: tried to flag a GPIO set as output for IRQ,如下图: 该错误的意思就是尝试将…

数据库系统概论SQL编程题合集(包含期末题、考研初试题以及复试题)

二、现有数据库casemanage中表结构如下图 1)请编写sql语句对年龄进行升序排列 select * from afinfo order by birth;2)请编写sql语句查询对“徐”姓开头的人员名单 select * from afinfo where name like 徐%;3)请编写sql语句修改“陈晓”…

【在大厂做测试外包这一年】

​ 在大厂做测试外包这一年 大厂外包是一种趋势,以后可能会越来越多,最起码测试行业是这样,像我们的测试工作,我所在的项目领导是大厂内部的,组长是OD外包,组员是普通外包。   1、关于办公方式 有两种方…

2024年【茶艺师(初级)】考试技巧及茶艺师(初级)试题及解析

题库来源:安全生产模拟考试一点通公众号小程序 茶艺师(初级)考试技巧是安全生产模拟考试一点通生成的,茶艺师(初级)证模拟考试题库是根据茶艺师(初级)最新版教材汇编出茶艺师&#…