当前位置: 首页 > news >正文

前端优化-css

1.css盒子模型

标准盒子模型,IE盒子模型

标准盒子模型:margin-border-padding-content

IE盒子模型:margin-content(border-padding-content)

如何转换:

box - sizing: border - box; // IE盒子模型
box - sizing: content - box;// 标准盒子模型

2.line-height 和 height 区别

line-height 每一行文字的高,文字换行,整个盒子会增大

height :盒子高度固定

3.CSS选择符 哪些属性可以继承

通配(*)、id选择器(#)、类选择器(.)、标签选择器(div、p、h1...)、相邻选择器( + )、后代选择器( 空格 )子元素选择器(>) 属性选择器(a[abc])

ul li + li{// 排除第一个li的样式
}
// vue 
<div v-data-abc></div>
div[v - data - abc]{}

可以继承

文字系列:font-size color line-height...

不可继承的:border padding margin

4.css优先级算法

!important > 内联样式 > id > class > 标签 > *

css 权重计算

内联:权重1000 ID:权重0100 类选择器:0010 标签&伪元素;0001 通配:权重 0000

5.用css画一个三角形

用border画

div{width: 0;height: 0;border - left: 100px solid transparent;border - right: 100px solid #ccc;border - top: 100px solid transparent;border - bottom: 100px solid transparent;
}

6.盒子不给宽高,垂直居中

// 方法一
.container{display: flex;align - items: ClientRequest;justify - content: center;
}
// 方法二
.container{position: relative;
}
.main{position: absolute;left: 50 %;right: 50 %;transform: translate(-50 %, -50 %);
}

7.display有哪些值

none(隐藏)/block(转化成块元素) inline(内联元素)/inline-block(行内块元素)

8.BFC规范(块级格式化上下文)

BFC就是页面上一个独立容器,容器里面子元素不会影响到外面元素

原则:如果一个元素具有BFC,内部元素不管怎么设置都不会影响到外面元素

如何触发:float不是none,overflow不是visible,display为inline-block/table-cell position的值为absolute,fixed

9.清除浮动方式

a.触发BFC

b.创建一个div,clear:both,

c.

ul.after{content: '';display: block;clear: both;
}

10.网页中应该用奇数还是偶数字体?为什么?

偶数,方便开发;表现更好看

11.position有哪些定位,根据什么定位的

static:没有定位

fixed: 固定定位,相当于浏览器窗口定位

relative:1、相当于自身定位,2.不脱离文档流 3.如果有left,right,top,bottom -> left\top

absolute:1、相当于父级定位,2.脱离文档流 ,相对于第一个有relative的元素 3.如果有left,right,top,bottom ->left\right\top\bottom

12.双飞翼

先加载中间块(写前面)

.container > div{float: left;
}
.l{margin - left: -100 %;width: 200px;
}
.r{margin - left: -200px;width: 200px;}
.c{padding - left: 200px;
}
<div class="container"><div class="c"></div><div class="l"></div><div class="r"></div>
</div>

13.什么是css reset

reset.css是css文件,重置css样式

Normalize.css 跨浏览器,重置css样式库

14.display:none 与 visibility:hidden 的区别 (隐藏元素)

display:none 不占位置 产生回流和重绘,要比另一个多产生一次回流

visibility:hidden 占据位置 产生重绘

重绘和回流

产生回流一定会造成重绘,但是 重绘不一定造成回流

产生回流的情况:改变元素的位置,显示隐藏元素

产生重绘的情况:样式改变 换皮肤

加载dom / cssom -> render -> 布局 -> 绘制 -> 合并

15.opacity 和 rgba 区别

共同:实现透明效果

opacity 0-1之间,继承父元素的属性值,一起都透明了

rgba: 红,绿,蓝,取值正整数或者百分数,透明度 0-1之间,后代元素不会继承不透明属性

相关文章:

前端优化-css

1.css盒子模型 标准盒子模型&#xff0c;IE盒子模型 标准盒子模型&#xff1a;margin-border-padding-content IE盒子模型&#xff1a;margin-content(border-padding-content) 如何转换&#xff1a; box - sizing: border - box; // IE盒子模型 box - sizing: content - …...

第三方ipad笔哪个牌子好用?ipad触控笔推荐平价

至于选择苹果原装的电容笔&#xff0c;还是平替的电容笔&#xff0c;要看个人的需求而定&#xff0c;比如画图用的&#xff0c;可以用Apple Pencil&#xff1b;比如学习记笔记用的&#xff0c;可以用平替电容笔&#xff0c;目前的平替电容笔无论是品质还是性能&#xff0c;都非…...

windows10+detectron2完美安装教程

文章目录 前言下载detectron2安装Visual Studio 2019修改代码 前言 需要下载detectron2的github项目&#xff0c;安装vs2019 (强烈建议这个版本&#xff0c;其他的版本需要做更多地操作才能成功安装)&#xff0c;默认其他环境没问题。 下载detectron2 链接&#xff1a;https…...

串口与wifi模块

经过以下学习&#xff0c;我们掌握&#xff1a; AT指令与wifi模块的测试方法&#xff1a;通过CH340直接测试&#xff0c;研究各种AT指令下wifi模块的响应信息形式。编程&#xff0c;使用串口中断接收wifi模块对AT指令的响应信息以及透传数据&#xff0c;通过判断提高指令执行的…...

上财黄烨:金融科技人才的吸引与培养

“金融科技企业在吸引人才前&#xff0c;应先完善人才培养机制&#xff0c;建立员工画像&#xff0c;有针对性地培训提高成员综合素质。” ——上海金融智能工程技术研究中心上海财经大学金融科技研究院秘书长&院长助理黄烨老师 01.何为数字人才&#xff1f; 目前大多数研…...

利用MQ事务消息实现分布式事务

MQ事务消息使用场景 消息队列中的“事务”&#xff0c;主要解决的是消息生产者和消息消费者的数据一致性问题。 拿我们熟悉的电商来举个例子。一般来说&#xff0c;用户在电商 APP 上购物时&#xff0c;先把商品加到购物车里&#xff0c;然后几件商品一起下单&#xff0c;最后…...

C++面向对象设计:深入理解多态与抽象类实现技巧

面向对象的多态 一、概念二、实现1. 静态多态1.1 函数重载1.2 运算符重载 2. 动态多态2.1 虚函数2.2 纯虚函数 三、虚函数1. 定义2. 实现3. 注意 四、纯虚函数1. 定义2. 作用 五、虚析构函数1. 定义2. 作用 六、 抽象类七、实现多态的注意事项1. 基类虚函数必须使用 virtual 关…...

长三角生物医药产业加速跑,飞桨螺旋桨为创新药企、医药技术伙伴装上AI大模型引擎...

生物医药是国家“十四五”规划中明确的战略性新兴产业之一。长三角地区是中国生物医药产业的排头兵&#xff0c;也是《“十四五”生物经济发展规划》的“生物经济先导区”之一。据《上海市生物医药产业投资指南》显示&#xff0c;2022 年上海市生物医药产业在 I 类国产创新药数…...

orin Ubuntu 20.04 配置 Realsense-ROS

librealsense安装 sudo apt-get install libudev-dev pkg-config libgtk-3-dev sudo apt-get install libusb-1.0-0-dev pkg-config sudo apt-get install libglfw3-dev sudo apt-get install libssl-dev sudo apt-get install ros-noetic-ddynamic-reconfigure二进制安装libr…...

MyBatis基础知识点总结

MyBatis了解 MyBatis 是什么&#xff1f; MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架 MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集 MyBatis 可以使用简单的XML或注解用于配置和原始映射&#xff0c;将接口和Java的 POJO&#x…...

校园企业车辆维修报修管理系统设计与开发

本研究课题重点主要包括了下面几大模块&#xff1a;在本基于.net平台的车辆系统中分为管理员和用户2个模块&#xff0c;主要功能包括管理员信息管理&#xff0c;车辆信息管理&#xff0c;驾驶员信息管理&#xff0c;事故信息管理&#xff0c;维修信息管理&#xff0c;维修点管理…...

【企业信息化】第1集 免费开源ERP: Odoo 16 CRM客户关系管理系统

文章目录 前言一、概览二、使用功能1.加快销售速度2.销售线索3.机会4.客户5.高效沟通6.报告7.集成 三、总结 前言 世界排名第一的免费开源ERP: Odoo 16 CRM客户关系管理系统。真正以客户为中心的CRM。 一、概览 获得准确预测 使用可操作数据&#xff0c;以做出更好的决定。 获…...

Flink创建Hudi的Sink动态表

工厂类 HoodieTableFactory 提供的创建动态表接口 createDynamicTableSource 和 createDynamicTableSink&#xff0c;对应的源码文件为&#xff1a;https://github.com/apache/hudi/blob/master/hudi-flink-datasource/hudi-flink/src/main/java/org/apache/hudi/table/HoodieT…...

人脸识别技术的安全性及其应用探讨

随着科技的不断发展&#xff0c;人脸识别技术已经成为了一个热门话题。人脸识别系统的出现&#xff0c;给人们的生活带来了极大的便利&#xff0c;同时也为一些犯罪分子提供了方便。因此&#xff0c;人脸识别技术的安全性和可靠性一直备受关注。 一、人脸识别技术的原理 人脸识…...

老域名查询工具- 在线域名批量查询工具

域名批量查询工具 域名批量查询工具是一种帮助用户快速查询多个域名信息的工具&#xff0c;通常能够自动扫描一组域名的WHOIS信息、DNS、IP地址、服务器等各种信息&#xff0c;并提供快速的结果反馈。 以下是域名批量查询工具主要的优点&#xff1a; 提高工作效率&#xff1a…...

JimuReport - 积木报表(一款免费Web报表工具)

一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报表设计。…...

01-数据操作+数据预处理

1.n维数组&#xff0c;也称为张量&#xff08;tensor&#xff09;&#xff1a;tensor和ndarray没有本质区别。tensor是有数学上的严格定义&#xff0c;ndarray是计算机描述的&#xff1b;张量表示一个由数值组成的数组&#xff0c;这个数组可能有多个维度&#xff1b; 无论使用…...

macOS本地python环境/vscode/导入python包/设置python解释器

查看macbook本地是否有python环境 输入python或者python3&#xff0c;退出python环境使用exit()&#xff0c;别忘了括号 没有的话去官网安装https://www.python.org/ 2. 安装vscode 官网https://code.visualstudio.com/ 3. 安装插件 点击左边的“插件”按钮&#xff0c;安装…...

【转存】Go语言设计模式

导语| 设计模式是针对软件设计中常见问题的工具箱&#xff0c;其中的工具就是各种经过实践验证的解决方案。即使你从未遇到过这些问题&#xff0c;了解模式仍然非常有用&#xff0c;因为它能指导你如何使用面向对象的设计原则来解决各种问题&#xff0c;提高开发效率&#xff0…...

第十一章 升级与定制

第十一章 升级与定制 一、 RPM 包安装操作 RPM&#xff08;Redhat Packet Manager&#xff09;。 ①安装 rpm –i rpm 文件名 &#xff08;注&#xff1a;⑴常见用法&#xff1a;-ivh 参数显示安装过程和 hash 符#&#xff1b; ⑵覆盖安装&#xff1a;使用- -force 选项。…...

《基于S7-1200PLC的全自动洗衣机控制系统设计》 一、设计任务书 1.任务描述

《基于S7-1200PLC的全自动洗衣机控制系统设计》 一、设计任务书 1.任务描述&#xff1a;洗衣机的进水和排水分别由进水电磁阀和排水电磁阀来执行 进水时&#xff0c;通过电控系统时进水阀打开&#xff0c;将水由外桶排到机外 洗涤正转、反转由洗涤电动机驱动波盘正、反转来实现…...

5分钟搞定Windows风扇智能控制:告别噪音烦恼,打造极致静音电脑系统

5分钟搞定Windows风扇智能控制&#xff1a;告别噪音烦恼&#xff0c;打造极致静音电脑系统 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode…...

如何高效使用FFmpegGUI:面向新手的完整视频处理工具指南

如何高效使用FFmpegGUI&#xff1a;面向新手的完整视频处理工具指南 【免费下载链接】ffmpegGUI ffmpeg GUI 项目地址: https://gitcode.com/gh_mirrors/ff/ffmpegGUI FFmpegGUI是一款让零基础用户也能轻松掌握专业视频处理的跨平台图形界面工具。这款基于Electron和Rea…...

CODESYS组件开发进阶:如何通过修改.m4文件调用SysFile等系统函数(附实例代码)

CODESYS组件开发进阶&#xff1a;深入解析.m4文件配置与系统函数调用实战 在工业自动化领域&#xff0c;CODESYS作为主流的PLC开发平台&#xff0c;其组件化开发能力为工程师提供了极大的灵活性。但当你需要突破基础功能限制&#xff0c;实现文件操作、系统管理等高级功能时&am…...

GitLab Runner配置总出错?手把手教你调试config.toml文件

GitLab Runner配置总出错&#xff1f;手把手教你调试config.toml文件 当你第一次打开GitLab Runner的config.toml文件时&#xff0c;可能会被里面密密麻麻的参数搞得一头雾水。这个看似简单的配置文件&#xff0c;实际上藏着许多让中高级用户都容易踩坑的细节。今天我们就来彻底…...

别再死记硬背了!用一张图+代码示例,彻底搞懂蓝牙BLE配对的6种SMP流程

蓝牙BLE安全配对实战图解&#xff1a;6种SMP流程与核心算法拆解 每次看到蓝牙协议栈里那些晦涩的安全管理协议&#xff08;SMP&#xff09;文档就头疼&#xff1f;别担心&#xff0c;今天我们用工程师的思维来重新解构这个"安全黑匣子"。扔掉那些让人昏昏欲睡的文字…...

【HTTP】HTTP协议核心体系:请求方法与状态码全结构化解析(附《思维导图》)

文章目录HTTP协议核心体系&#xff1a;请求方法与状态码全结构化解析一、核心基础概念1.1 HTTP方法的两大核心属性&#xff08;规范级定义&#xff09;1.2 HTTP状态码分类规则二、HTTP请求方法2.1 标准核心方法&#xff08;RFC 7231 定义&#xff09;2.1.1 只读类方法&#xff…...

08-Spring 数据访问 - JDBC 详解

08. Spring 数据访问 - JDBC 详解 8.1 Spring JDBC 概述 Spring JDBC 是 Spring Framework 提供的数据访问抽象层,简化了 JDBC 的使用,消除了样板代码,同时保留了 JDBC 的完整控制能力。 8.1.1 传统 JDBC 的问题 // 传统 JDBC 代码 - 大量样板代码 public List<User&…...

Maven Shade Plugin实战:解决Spring Boot胖JAR打包中的5个常见坑

Maven Shade Plugin实战&#xff1a;解决Spring Boot胖JAR打包中的5个常见坑 Spring Boot开发者们对"胖JAR"&#xff08;fat JAR&#xff09;应该都不陌生——这种将所有依赖打包进单个可执行文件的方式&#xff0c;极大简化了部署流程。但当你真正使用Maven Shade P…...

一个防止GPT“降智”的简单方法

GPT客户端容易“降智”&#xff1f;教你一个简单解决办法 正文 最近一直感觉 GPT 手机客户端有点“降智”&#xff0c;回答质量不太稳定。 后来我拿同一账号做了对比&#xff0c;发现用手机浏览器登录网页版时&#xff0c;整体会正常不少&#xff0c;所以来给大家分享一下。 我…...