前端八股文(二)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. 元素选择器、伪元素选择器（如 div、p::before）：优先级为 0,0,0,1。

  5. 通配符 * 和关系符（如后代选择器 、子选择器 > 、兄弟选择器 + ）：优先级为 0,0,0,0。

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

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

可继承

  • font-weight

  • color

  • font-size

  • line-height

  • cursor等

不可继承

  • margin、padding、border

  • display

  • background

  • overflow

  • width、height

  • 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:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

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

12.flex属性理解

容器属性：

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

  • flex-direction：设置主轴方向（如 row、column、row-reverse、column-reverse）。

  • flex-wrap：控制子项换行（如 nowrap、wrap、wrap-reverse）。

  • justify-content：设置主轴上的对齐方式（如 flex-start、flex-end、center、space-between、space-around）。

  • align-items：设置交叉轴上的对齐方式（如 flex-start、flex-end、center、baseline、stretch）。

  • align-content：用于多行的对齐方式（如 flex-start、flex-end、center、space-between、space-around、stretch）。

子项属性：

  • flex-grow：定义子项的放大比例（默认为 0，表示不放大）。

  • flex-shrink：定义子项的缩小比例（默认为 1，表示可以缩小）。

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

  • flex：简写属性，结合了 flex-grow、flex-shrink 和 flex-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值为：hidden、auto、`scroll

  • display值为：inline-block、flex、table-cell、table-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，一经查实，立即删除！

相关文章

MySQL日期时间函数大全

MySQL日期时间函数大全

DAYOFWEEK(date) 　返回日期date是星期几(1星期天,2星期一,……7星期六,ODBC标准) mysql> select DAYOFWEEK(1998-02-03); 　　-> 3 WEEKDAY(date) 　返回日期date是星期几(0星期一,1星期二,……6 星期天)。 mysql> select WEEKDAY(1997-10-04 22:23:00); 　　-> 5…
阅读更多...
Redis 权限控制（ACL）｜ACL 命令详解、ACL 持久化

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开发微信机器人教程说明

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

微信时代，越来越多的业务/服务沟通已直接在微信上完成，但在沟通效率及员工管理方面却存在如下问题： 1、现有的微信功能，已无法满足与客户沟通时的高效率要求 2、当员工掌管的微信号若干或更多时，迫切需要有个汇总工具…
阅读更多...
Java项目实战II基于Spring Boot的智慧生活商城系统的设计与实现（开发文档+数据库+源码）

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

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

计算机视觉的研究方向和相应算法

计算机视觉是一个广泛的领域，涵盖了多种研究方向和算法。以下是对计算机视觉研究方向及其相关算法的详细介绍： 研究方向图像识别与分类：研究如何让计算机识别并分类图像中的对象，如车辆、人脸、动物等。 目标检测与跟踪&#xff1…
阅读更多...
c++中cin的错误输入锁

c++中cin的错误输入锁

如果你定义了一个int型，那么当cin输入表达式的值是就会检测输入的是不是数字。如果程序发现用户输入了错误内容时，程序就会锁住cin，所以你就需要重置cin。我们可以利用这一特点来解决下面这道题 口算练习题 题目描述 王老师正在教简单算术运…
阅读更多...
如何使用Langchain集成Kimi AI（Moonshot AI）

如何使用Langchain集成Kimi AI（Moonshot AI）

如何使用Langchain集成Kimi（Moonshot AI） 一、获取API密钥1. 注册账号2. 获取密钥 二、环境配置三、上手四、整合一下五、检验一下成果六、官方网站 一、获取API密钥 1. 注册账号 毕竟只有注册过帐号才能拿到key~ Moonshot 登陆 2. 获取密钥 用户中心…
阅读更多...
前端开发模板Pear Admin Layui

前端开发模板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练习-三层架构以及常见配置 …
阅读更多...
【ETL：概念、流程与应用】

【ETL：概念、流程与应用】

ETL：概念、流程与应用 目录 什么是ETLETL的工作流程 2.1 数据抽取（Extract）2.2 数据转换（Transform）2.3 数据加载（Load）ETL的应用场景常见的ETL工具ETL的挑战与解决方法ETL与ELT的区别总结1. 什么是ETL ETL 是数据处理的流程，表示“抽取（Extract
阅读更多...
翰鲸学术辅导：研究生学术之路的助力

翰鲸学术辅导：研究生学术之路的助力

近期又到了研究生开题之际，研二的学生们都深受论文困扰。不少学弟学妹在微信上询问我关于学术辅导机构是否值得报名的问题。在此，通过本期文章为大家科普学术辅导机构相关情况，并对我曾报名的翰鲸学术辅导进行简单测评，希望广大学…
阅读更多...
计算机网络之HTTP协议

计算机网络之HTTP协议

一、HTTP协议基本概念 HTTP（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，减少网络传输量。HTTP协议不仅保证计算机正确快速地传输超文本文档&#…
阅读更多...
vue使用方法创建组件

vue使用方法创建组件

vue 中 创建 组件 使用 方法创建组件 vue2 中 import vueComponent from xxxx function createFn(){const creator Vue.extend(vueComponent);const instance new creator();document.appendChild(instance.$el); }vue3 中 import { createApp } from "vue"; im…
阅读更多...
关于SwitchCase中变量定义及使用变量的一些注意事项参数传递参数时不能实现多态动态绑定的问题c++语法

关于SwitchCase中变量定义及使用变量的一些注意事项参数传递参数时不能实现多态动态绑定的问题c++语法

关于SwitchCase中变量定义及使用变量的一些注意事项参数传递参数时不能实现多态动态绑定的问题c语法 说明(废话)问题解决方案问题1 case中不能定义变量多态函数动态传绑定的问题 总结 说明(废话) 用了这么多年的c，有些语法上的问题真的让人很难办，有的问…
阅读更多...
MySQL中的行转列和列转行操作

MySQL中的行转列和列转行操作

MySQL是一款常用的关系型数据库，广泛应用于各种类型的应用程序和数据存储需求。在MySQL中，我们经常需要对表格进行行转列或列转行的操作，以满足不同的分析或报表需求。本文将详细介绍MySQL中的行转列和列转行操作，并提供相应的SQL…
阅读更多...
新世联科技：NG2-A-7在DAC空气捕集提取CO2的应用

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

一、DAC空气捕集提取CO2的介绍 直接空气碳捕获（Direct Air Capture，简称DAC）是一种直接从大气中提取二氧化碳的技术。 二、DAC空气捕集提取CO2的前景 从大气中提取的这种二氧化碳可以作为循环经济的一部分以各种不同方式使用。未来&#xf…
阅读更多...
面试题分享11月5日

面试题分享11月5日

1、JWT 数据结构 头部（Header）、负载（Payload）、签名（signature） 头部（Header）、负载（Payload）都是明文的，根据 base64URL 进行转化&#xff0c…
阅读更多...
uni-app 封装图表功能

uni-app 封装图表功能

文章目录 需求分析1. 秋云 uchars2. Echarts 需求 在 uni-app 中使用图表功能，两种推荐的图表工具 分析 在 Dcloud市场 搜索Echarts关键词，会出现几款图表工具，通过大家的下载量，可以看到秋云这个库是比较受欢迎的，其…
阅读更多...
详细解读个性化定制大杀器IP-Adapter代码

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

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

PHP JSON 教程

PHP JSON 教程 PHP 是一种广泛使用的开源服务器端脚本语言，而 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。PHP 提供了多种函数和库来处理 JSON 数据，使得在 PHP 应用程序中解析和生成 JSON 数据变得非常容易。本教程将详细介绍 PHP 中 JSON 的使用方法…
阅读更多...
最新文章

Copyright @ 2022~2023