前端八股文(二)CSS 持续更新中。。。

1.css3新增

  1. 新增属性选择器、伪类选择器

  2. 新增text-shadow、box-shadow、border-radius

  3. 新增transform、transition、动画@keyframes、animation

  4. 新增flex、grid布局,媒体查询@media

  5. 新增box-sizing:border-box怪异盒模型 content-box标准盒模型

2.说一说盒模型

  • 标准盒模型:box-sizing:content-box

content宽高不包括padding和border,实际宽高=content宽高+padding+border

  • 怪异盒模型:box-sizing:border-box

content宽高包含padding和border

3.css选择器和优先级

  1. 行内样式 style:优先级为 1,0,0,0

  2. ID 选择器 #id:优先级为 0,1,0,0

  3. 类选择器、属性选择器、伪类选择器(如 .class[type="text"]:hover):优先级为 0,0,1,0

  4. 元素选择器、伪元素选择器(如 divp::before):优先级为 0,0,0,1

  5. 通配符 * 和关系符(如后代选择器 、子选择器 > 、兄弟选择器 + ):优先级为 0,0,0,0

  6. !important 优先级最高,用于覆盖无 !important 的规则。

4.CSS可继承属性和不可继承属性

可继承

  • font-weight

  • color

  • font-size

  • line-height

  • cursor

不可继承

  • marginpaddingborder

  • display

  • background

  • overflow

  • widthheight

  • position

5.dislpay的属性和作用

属性作用
block块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block行内块级元素,默认宽度为内容宽度,可以设置宽高,同行显示
table块级表格
flexflex容器布局
none隐藏元素
inherit从父类继承display属性

6.隐藏元素的方式

  1. display: none

    元素完全从文档流中移除,不占据空间。

    不能触发事件。因为元素被彻底隐藏,点击、悬停等事件都不会生效。

  2. visibility: hidden`

    元素隐藏但仍保留在文档流中,占据空间。

    不能触发事件。虽然元素还在文档流中,但 visibility: hidden 会阻止鼠标事件的触发。

  3. opacity: 0

    元素的透明度设置为 0,完全透明。

    能触发事件。opacity: 0 只是改变了元素的透明度,元素仍然在页面上,占据空间,且可以接收鼠标事件。

  4. z-index: 负值

    通过设置负 z-index,可以将元素放到其他元素的下方。

    视情况而定。如果有其他元素遮盖住它,则不能触发事件;如果没有遮盖,它仍可以触发事件。

  5. position: absolute(将元素定位到可视区域以外)

    描述:将元素设置为绝对定位并移出视窗。

    是否能触发事件:不能触发。元素位于可视区域之外,无法被用户看到或与之交互,因此不会触发事件。

7.单行、多行文本溢出(不太熟,没问过

单行

 css 代码解读复制代码overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 溢出用省略号显示whtie-space: nowrap; //规定段落中的文本不进行换行

多行

 CSS 代码解读复制代码overflow:hiddentext-overflow: ellipsis;     // 溢出用省略号显示display:-webkit-box;         // 作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列-webkit-line-clamp:3;        // 显示的行数

8.less和sass的区别?

less和sass都是css预处理器

区别:

编译环境不同:sass是在服务端进行处理的,主要有dart-sass、node-sass;less是通过引入less.js对.less文件进行编译处理的,可以在开发时生成css文件直接打包到生产包内

变量作用域不同:sass的变量是全局作用域、less的变量像是函数作用域

变量定义符不一样:sass是$、less是@

sass可以使用条件语句(if、else、for等)、函数,less不可以

9.link和@import的区别

link:

  • 通常放在html文件的head中使用

  • 用来加载css文件、icon文件等(通过定义rel属性:stylesheet、icon等

  • 并行加载资源(使用rel:preload会预加载

@import:

  • 在css文件顶部声明

  • 将样式表引入当前的样式表

  • 串行加载,在页面加载完毕后被加载

10.常用css单位有哪些

  1. px,像素

  2. 百分比%

  3. rem:相对于根元素的font-size

  4. em:相对于父元素的font-size

  5. vw、vh:视图窗口(viewport)占比

11.水平垂直居中

  • 利用绝对定位,先将元素的左上角通过top:50%left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

 .parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
  • 利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况:

 .parent {position: relative;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
  • 使用**flex布局**,通过align-items:centerjustify-content:center设置容器的垂直和水平方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题,该方法在移动端用的较多:

 .parent {display: flex;justify-content:center;align-items:center;}

12.flex属性理解

容器属性

  • display: flex;:定义一个弹性容器。

  • flex-direction:设置主轴方向(如 rowcolumnrow-reversecolumn-reverse)。

  • flex-wrap:控制子项换行(如 nowrapwrapwrap-reverse)。

  • justify-content:设置主轴上的对齐方式(如 flex-startflex-endcenterspace-betweenspace-around)。

  • align-items:设置交叉轴上的对齐方式(如 flex-startflex-endcenterbaselinestretch)。

  • align-content:用于多行的对齐方式(如 flex-startflex-endcenterspace-betweenspace-aroundstretch)。

子项属性

  • flex-grow:定义子项的放大比例(默认为 0,表示不放大)。

  • flex-shrink:定义子项的缩小比例(默认为 1,表示可以缩小)。

  • flex-basis:定义子项在主轴上的初始大小(可以是具体值或 auto)。

  • flex:简写属性,结合了 flex-growflex-shrinkflex-basis,默认: flex: 0 1 auto;

  • align-self:允许单个子项覆盖 align-items 的对齐设置。

flex:1表示:flex:1 1 auto,即flex-grow:1,flex-shrink:1,flex-basis:auto

13.对BFC的理解?如何创建一个BFC

bfc:块级格式化上下文,在BFC布局里面的元素不受外面元素影响。

创建BFC条件

  • 设置浮动:float有值 且不为空

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

  • overfilow值为:hiddenauto、`scroll

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

BFC作用

  • 解决margin重叠问题:由于BFC是一个独立的区域,内部元素和外部元素互不影响,将两个元素变为BFC,就解决了margin重叠问题

  • 创建自适应两栏布局:可以用来创建自适应两栏布局,左边宽高固定,右边宽度自适应。

  • 解决高度塌陷问题:在子元素设置浮动后,父元素会发生高度的塌陷,也就是父元素的高度为0解决这个问题,只需要将父元素变成一个BFC。

14.position 常用属性 默认值是什么

  • static 默认值,没有定位,元素正常在文档流中显示

  • relative 相对定位,相对于原来的位置进行定位,占有原来的体积

  • absolute 绝对定位,相对于有定位的父元素、祖先元素进行定位。

  • fixed 绝对定位,相对于浏览器窗口

  • sticky 粘性定位,基于用户滚动位置

15.画一个三角形

通过设置不同方向边框来实现

 CSS 代码解读复制代码div {width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid transparent;border-left: 50px solid transparent;}

16.画一条0.5px的线

transform: scale(0.5,0.5);缩放高度为1px的元素0.5倍

17.重绘、重排?如何避免

重排:修改样式导致需要对布局进行重新计算

当一个元素的位置、尺寸等发生改变的时候,浏览器需要重新计算该元素的几何属性并且摆放到正确的位置的过程叫做重排。一般像页面初次渲染、带有动画的元素、添加或删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发重排。重排也叫回流。

重绘:修改样式,布局不会改变

重绘是指浏览器在不改变布局的情况下,更新页面上的元素的外观,例如改变颜色、背景、边框等。重绘不涉及改变元素的位置或大小,仅仅是重新绘制元素的外观。相对于重排,重绘是一项较为轻量的操作。

重拍一定重绘,重绘不一定重排

频繁重排会大大影响前端性能

如何避免重排?

  1. 不进行单一的样式修改,而是将多个样式写在一个类里

  2. 多使用transform、opacity来代替动画,这两个属性只会引起重绘

  3. 将多个dom操作写在文档片段(documentFragement)里,批量更新dom

  4. 少使用table布局,多使用flex、grid布局

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

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

相关文章

Redis 权限控制(ACL)|ACL 命令详解、ACL 持久化

官网文档地址:https://redis.io/docs/latest/operate/oss_and_stack/management/security/acl/ 使用版本:Redis7.4.1 什么是 ACL? ACL(Access Control List),权限控制列表,是 Redis 提供的一种…

淘宝反爬虫机制的主要手段有哪些?

淘宝的反爬虫机制主要有以下手段: 一、用户身份识别与验证: User-Agent 识别:通过检测 HTTP 请求头中的 User-Agent 字段来判断请求是否来自合法的浏览器。正常用户使用不同浏览器访问时,User-Agent 会有所不同,而爬虫…

2024最新gewe开发微信机器人教程说明

微信时代,越来越多的业务/服务沟通已直接在微信上完成,但在沟通效率及员工管理方面却存在如下问题: 1、现有的微信功能,已无法满足与客户沟通时的高效率要求 2、当员工掌管的微信号若干或更多时,迫切需要有个汇总工具…

Java项目实战II基于Spring Boot的智慧生活商城系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着科技的飞速发展,人们的…

如何使用Langchain集成Kimi AI(Moonshot AI)

如何使用Langchain集成Kimi(Moonshot AI) 一、获取API密钥1. 注册账号2. 获取密钥 二、环境配置三、上手四、整合一下五、检验一下成果六、官方网站 一、获取API密钥 1. 注册账号 毕竟只有注册过帐号才能拿到key~ Moonshot 登陆 2. 获取密钥 用户中心…

前端开发模板Pear Admin Layui

目录 基本资料学习笔记04-Pear-Admin-Layui模板运行05-Pear-Admin-Layui-GIT方式代...06-Pear-Admin与Vue对比 & 07-Pear-Admin与Vue对比补充09-Pear-Admin-CRUD练习-数据库表创建12-Pear-Admin-CRUD练习-引入其它依赖 & 13-Pear-Admin-CRUD练习-三层架构以及常见配置 …

新世联科技:NG2-A-7在DAC空气捕集提取CO2的应用

一、DAC空气捕集提取CO2的介绍 直接空气碳捕获(Direct Air Capture,简称DAC)是一种直接从大气中提取二氧化碳的技术。 二、DAC空气捕集提取CO2的前景 从大气中提取的这种二氧化碳可以作为循环经济的一部分以各种不同方式使用。未来&#xf…

uni-app 封装图表功能

文章目录 需求分析1. 秋云 uchars2. Echarts 需求 在 uni-app 中使用图表功能,两种推荐的图表工具 分析 在 Dcloud市场 搜索Echarts关键词,会出现几款图表工具,通过大家的下载量,可以看到秋云这个库是比较受欢迎的,其…

详细解读个性化定制大杀器IP-Adapter代码

Diffusion models代码解读:入门与实战 前言:IP-Adapter作为Diffusion Models最成功的技术之一,已经在诸多互联网应用中落地。介绍IP-Adapter原理和应用的博客有很多,但是逐行详细解读代码的博客很少。这篇博客从细节出发&#xff…

数据采集之scrapy框架2

本博文使用自动化爬虫框架完成微信开放社区文档信息的爬取(重点理解 scrapy 框架自动化爬 虫构建过程,能够分析 LinkExtractor 和 Rule 规则的基本用法) 包结构目录如下图所示: 主要代码: ( items.p…

深⼊理解指针(2)

目录 1. const修饰指针及变量 2. 野指针 3. assert断⾔ 4. 指针的传址调⽤ 一 const修饰指针及变量(const是场属性——不能改变的属性) 1 const修饰变量 那怎么证明被const修饰的变量本质还是变量呢? 上面我们绕过n,使…

每日科技资讯:2024年11月06日【龙】农历十月初六 ---文末送书

目录 1.OpenAI因算力瓶颈暂缓GPT-5发布 合作芯片开发寻求突破2.现在,𝕏 允许被你屏蔽的人继续查看你的帖子3.硬刚Intel与AMD!NVIDIA明年推出PC芯片4.苹果停止签署 iOS 18.0.1,不再允许从 18.1 降级5.Nvidia 加入道琼斯指数成份股 …

swoole扩展安装--入门篇

对于php来说,swoole是个强大的补充扩展。这是我第3次写swoole扩展安装,这次基于opencloudos8系统,php使用8.2。 安装swoole扩展首先想到的是用宝塔来安装,毕竟安装方便,还能统一管理。虽然获得swoole版本不是最新的&am…

【大模型开发指南】llamaindex配置deepseek、jina embedding及chromadb实现本地RAG及知识库(win系统、CPU适配)

说一些坑,本来之前准备用milvus,但是发现win搞不了(docker都配好了)。然后转头搞chromadb。这里面还有就是embedding一般都是本地部署,但我电脑是cpu的没法玩,我就选了jina的embedding性能较优(…

pyspark基础准备

1.前言介绍 学习目标:了解什么是Speak、PySpark,了解为什么学习PySpark,了解课程是如何和大数据开发方向进行衔接 使用pyspark库所写出来的代码,既可以在电脑上简单运行,进行数据分析处理,又可以把代码无缝…

数据库基础(4) . 数据库结构

2.基础结构 2.1.结构及名称 数据库 database 表空间 tablespaces(Oracle) 表格 table 字段 column 记录 record 值 value 2.2.数据库 database 在配置文件中指定存放位置 # 设置mysql数据库的数据的存放目录 datadirD:\MySQL\mysql-8.0.16-winx64\data每个数据库对应…

Meme 币生态全景图分析:如何获得超额收益?

近期,BTC 再次突破 7 万美元大关,市场上贪婪指数再次达到 80,而 Meme 币往往是每次牛市冲锋的号角,比如 $GOAT 5 天内价格一度上涨超 1 万倍。通过对当前市场 TOP 25 Meme 币的交易数据分析,我们发现了几个值得关注的市…

数据结构之二叉树——堆 详解(含代码实现)

1.堆 如果有一个关键码的集合 K { , , , … ,},把它的所有元素按完全二叉树的顺序存储方式存储 在一个一维数组中,则称为小堆( 或大堆 ) 。将根节点最大的堆叫做最大堆或大根堆,根节点最小的…

高级 <HarmonyOS主题课>构建华为支付服务的课后习题

五色令人目盲&#xff1b; 五音令人耳聋&#xff1b; 五味令人口爽&#xff1b; 驰骋畋猎&#xff0c;令人心发狂&#xff1b; 难得之货&#xff0c;令人行妨&#xff1b; 是以圣人为腹不为目&#xff0c;故去彼取此。 本篇内容主要来自&#xff1a;<HarmonyOS主题课>构建…

酒店民宿小程序,探索行业数字化管理发展

在数字化发展时代&#xff0c;各行各业都开始向数字化转型发展&#xff0c;酒店民宿作为热门行业也逐渐趋向数字、智能化发展。 对于酒店民宿来说&#xff0c;如何将酒店特色服务优势等更加快速运营推广是重中之重。酒店民宿小程序作为一款集结预约、房源管理、客户订单管理等…