前端八股文(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/594007.shtml

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

相关文章

矩阵运营怎么弄那么多账号?矩阵账号搭建方案分享

在当今数字营销的浪潮中,“矩阵运营”成为了一个热门话题。许多企业和个人面临着如何高效管理大量社交媒体账号的挑战。本文将详细介绍“矩阵账号搭建方案”,并探索如何利用“万媒易发”这一工具,来提升矩阵运营的效率。 一、矩阵运营的核心要…

【MySQL】数据库之主从复制和读写分离

目录 一、什么是读写分离? 二、为甚要读写分离? 三、什么时候需要读写分离? 四、主从复制与读写分离 五、MySQL支持的二进制日志格式 六、主从复制的工作原理 七、MySQL读写分离的原理 八、MySQL读写分离的方式有哪些 九、实验一&am…

Vue中信息订阅与发布和配置代理服务器的使用和原理

信息订阅与发布 全局事件总线和信息订阅与发布一样都是实现任意组件的通信。常用的是全局事件总线 信息订阅与发布借用第三方库pubsub实现任意组件的通信 安装pubsub npm i pubsub-js 下列代码为MyHeader组件订阅了一份信息,MyFooter负责传递信息给MyHeader <template&…

基于Java课堂签到系统

基于Java课堂签到系统 功能需求 1、用户登录&#xff1a;学生需要使用学号或手机号等唯一标识登录系统。 2、签到功能&#xff1a;在课堂开始时&#xff0c;学生可以通过系统进行签到&#xff0c;以证明出席。 3、签出功能&#xff1a;在课堂结束时&#xff0c;学生可以通过…

vite + javascript 创建纯 javascript项目

1、环境搭建&#xff1a;需要安装 node 管理器命令&#xff1a;安装了node的后&#xff0c;可以使用 npm &#xff0c;也可以安装使用 cnpm / pnpm 下载 cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 下载 pnpm npm i -g pnpm pnpm config set r…

条款16:成对使用 new 和 delete 时要采用相同形式

下面程序的行为是未定义的。至少&#xff0c;stringArray指向的100个string对象中有99个不太可能被正确地析构。 被delete的指针指向单个对象还是一个对象数组&#xff1f;内存数组通常包括数组的大小&#xff0c;delete可以知道需要调用多少个析构函数。 使用delete时使用了方…

Crow:run的流程4 准备接收http请求

完成tcp的accept后,下一步需要接收tcp的数据,同时完成http的分析 class Connection { public:void start(){adaptor_.start([this](const asio::error_code& ec) {if (!ec){start_deadline();parser_.clear();do_read();}else{CROW_LOG_ERROR << "Could not …

Java后端开发——Spring实验

文章目录 Java后端开发——Spring实验一、Spring入门1.创建项目&#xff0c;Spring依赖包。2.创建JavaBean&#xff1a;HelloSpring3.编写applicationContext.xml配置文件4.测试&#xff1a;启动Spring&#xff0c;获取Hello示例。 二、Spring基于XML装配实验1.创建JavaBean类&…

CSS 顶部位置翻转动画

<template><div class"container" mouseenter"startAnimation" mouseleave"stopAnimation"><!-- 旋方块 --><div class"box" :class"{ rotate-hor-top: isAnimating }"><!-- 元素内容 --><…

【快速全面掌握 WAMPServer】12.WAMPServer 故障排除经验大总结

网管小贾 / sysadm.cc 众所周知&#xff0c;搞开发需要先搭建相应的编程和调试环境。 对于 PHPer 来说&#xff0c;很多像我一样的新手小白们入门的时候&#xff0c;通常会选择一些集成开发环境包&#xff0c;其中就有 WampServer 。 集成环境包被许多人所诟病&#xff0c;说…

C++ 代码中如何使用互斥锁std::mutex和独占锁std::unique_lock

创建一个C线程需要传入几个参数&#xff1f; 如何理解和使用C线程循环 C 类 函数 变量 进程 线程 C关于锁和互斥量你真的理解了吗&#xff1f; 在这个例子中&#xff0c;我们将创建一个简单的类&#xff0c;该类包含一个共享数据成员和两个方法&#xff0c;这两个方法将通过互…

Node.js本地搭建简单页面小游戏

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

后台管理项目的多数据源方案

引言 在互联网开发公司中&#xff0c;往往伴随着业务的快速迭代&#xff0c;程序员可能没有过多的时间去思考技术扩展的相关问题&#xff0c;长久下来导致技术过于单一。为此最近在学习互联网思维&#xff0c;从相对简单的功能开始做总结&#xff0c;比如非常常见的基础数据的…

第二百四十三回 再分享一个Json工具

文章目录 1. 概念介绍2. 分析与比较2.1 分析问题2.2 比较差异 3. 使用方法4. 内容总结 我们在上一章回中介绍了"分享三个使用TextField的细节"相关的内容&#xff0c;本章回中将再 分享一个Json插件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…

案例087:基于微信小程序的社区养老服务平台设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

python | PYTHON正则表达式

操作符说明实例.表示任何单个字符[]字符集&#xff0c;对单个字符给出取值范围[abc]表示a、b、c&#xff0c;[a-z]表示a到z单个字符[^ ]非字符集&#xff0c;对单个字符给出排除范围[^abc]表示非a或b或c的单个字符*前一个字符0次或无限次扩充abc* 表示ab&#xff0c;abc&#x…

阿里云免费证书SSL三个月的解决方法

阿里云免费SSL证书签发有效期从12个月缩短至3个月&#xff1a;尊敬的用户&#xff0c;根据供应商变更要求&#xff0c;免费证书&#xff08;默认证书&#xff09;的签发有效期将由12个月缩短至3个月。 免费证书&#xff08;升级证书&#xff09;的有效期不会改变。 没错&#…

Linux iptables实现(SNAT)源地址转换

实验要求一&#xff08;实验要求SNAT:内网主机访问外网主机&#xff0c;通过iptables进行源地址转换&#xff0c;允许访问外网的httpd和ping&#xff09; 1、开启防火墙转发功能&#xff08;两个方法二选一即可&#xff09; 方法一&#xff1a; [rootiptabels ~]#echo net.ipv…

Java 17 中的 Switch 表达式模式匹配与记录类型

Switch 表达式模式匹配 在 Java 17 中&#xff0c;switch 表达式得到了增强&#xff0c;引入了模式匹配&#xff0c;使得代码编写更加简洁。以下是一个简单的例子&#xff1a; package com.lfsun.newswitch;import static com.lfsun.newswitch.ShapeExample.ShapeType.CIRCLE…

小秋SLAM入门实战C++所有文章汇总

文章目录 线程和锁用法 线程和锁用法 C中互斥量、锁有什么用&#xff1f; 创建一个C线程需要传入几个参数&#xff1f; 如何理解和使用C线程循环 C 类 函数 变量 进程 线程 C关于锁和互斥量你真的理解了吗 C 代码中如何使用互斥锁std::mutex和独占锁std::unique_lock 如何更好…