【前端】CSS知识梳理

news2025/2/21 16:15:12

31cda2dfc7574f91a6890a9d66208b82.png

基础:标签选择器、类选择器、id选择器和通配符选择器

8240d41fd7fd4ffbaa2795046bb163ce.png

font:font-style(normal) font-weight(400) font-size(16px) /line-height(0) font-family(宋体) 

复合: 后代选择器( )、子选择器(>)、并集选择器(,)、伪类选择器(:)、连接伪类(a:)、:focus

e0b00f8b08974394b1bb8576cfa4cb24.png

 块元素(独占一行)、行内元素(内联元素)、行块元素(<img/><input/><td>)

->diaplay转换 block、incline、incline-block

0147aee1e18747b1a5264ec6981303e6.pngd5f7b88706884b75be6e22975dc4166d.png

继承性属性:text-,font-,line-这些元素开头的可以继承,以及color属性

f91c3002c3c34aaa905bba357c871856.png aed1bec390814bd38e2513c58ca78f24.png

8ee5a85f80e04fca811fbd02a16b1b9d.png

盒子模型 :边框、外边距、内边距、和实际内容

0fe41289769c4201b3786848259e9580.png

b422f030b92e4d5486e984358d26b85b.png ffce01e70b194e8ebdcb47584560e62d.png

 居中:块元素(margin:0 auto;[需设置width])

行内或行内块:给父元素添加text-align:center

cbecce20cc1c481b8a675a15709ad375.png

 border-radius:5747bae86eca4e9f8146b5dd42ff0c22.png    正方形->⚪:50%

 border-shadow:不占空间,不会影响布局

text-shadow

b858677be41d437997a9e4d41d2254b6.png

 浮动(多个块元素横向排列找浮动,纵向排列找标准流)

e568a94e29184229a64655380a1a743c.png

6481f6f5c3334c15863f6c0e23cf20ea.png

af385e87f6bc4ec6a155ffa00dfe81e3.png

4e5f49390c694b928d4326f353380863.png

清楚浮动方法

1.额外标签发(隔墙法)【W3C推荐】

a4f97664976e40a8acfac677793135b7.png

da0ba98136044242a72afc66de863445.png

2.父级添加overflow属性

7cd6a96d48934b9baf689eee3ab0a3b7.png

3.父级添加after伪类

820b629b7d0f4509967514a5eb76f2a2.png

4.父级添加双伪元素

31df6ad53a9241529566410315b85957.png

489271d179e2443294cff60b1a764bf1.png定位 

272038be9aaf46bfba45ab3a5704c1c5.png

5a2f404994754ee9b626d63a5078ea1d.png

 2f18b0b89a3748a2b77e00118a56d2d8.png

e6e5123c111a414293d6d0b0dc2ca6e7.png

1577915eeb3340ccb1167a3285f34967.png

f25e1aa369bf4895a724713b1aa9cefd.png

bb7c9826c6414249afdbfb934925eec0.png

d5d123be4c844bb6b01f1cb83c9d5f0c.png

e93a453e4a54457d881578432d714fda.png

display:none不再占有位置、visibility:hidden继续占有原来位置  verflow 

de0c4add080c4343aa38af55bbbc6a92.png

5f41166d5eff4b2ea7818525a80655ff.png

精灵图sprite

b7024d1f3e9f4333803e9354d0c2c20d.png

 CSS三角形

248b746d9a3347d4a458ecb89296addd.png

14b2d46e997c4e818994392b618612ff.png

f52d7869e42d40349ae8fa396eba2251.png 9b8640b143fc420f87a93bb81920a05a.png

869146bfb0eb4cd09240bc5d582f1bcb.png

溢出文...显示

19b553d8403d43429bdd7bd0bd59d432.png

6273ff91803d44148ca7001b58b50438.png

HTML5新特性

  • 语义化标签,有利于SEO
  •  多媒体、音视频数据
  • input类型、属性扩展

CSS3新特性

  • 属性选择器,权重与类、伪类选择器一样  E[att=""]
  • 结构伪类选择器 E:first-child  E:child()《——DOM树

           nth-child(n) 2n偶数 2n+1奇数

c2a45d3afd1a4707b3b420c445fb6c96.png

88c00bfc7cc24afc82a6d0b3385f2e37.png

  • 伪元素选择器::before  权重为1

d1f454ba1820474d9ba79be32c44d5f3.png

6dda81c780f74bff90445b8639e3a170.png

 CSS过渡transition

7d2787d1f5c9421894053e86a41268f2.png

转换

translate(x,y)  translate(50%,50%) 相对于本身元素的  rotate scale 

 动画

 

流式布局 flex布局

通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 

flex-direction设置主轴的方向

justify-content设置主轴上的子元素的排列方式

flex-wrap:wrap   换行,flex布局默认不换行

align-items

flex布局子项常见属性 

flex属性

align-self属性

order属性

 rem布局

媒体查询

 

less

响应式布局

bootstrap

 

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

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

相关文章

JAVA 插入 JSON 对象到 PostgreSQL

博主主页:【南鸢1.0】 本文专栏&#xff1a;JAVA 目录 ​编辑 简介 所用&#xff1a; 1、 确保 PostgreSQL 数据库支持 JSON&#xff1a; 2、添加 PostgreSQL JDBC 驱动 3、安装和运行 PostgreSQL 4、建立数据库的连接 简介 在现代软件开发中&#xff0c;由于 JSON 数据…

都快2025年了,来看看哪个编程语言才是时下热门吧

早上好啊&#xff0c;大佬们&#xff0c;今天咱们不讲知识&#xff0c;今天我们来看看时下热门的编程语言都是哪些&#xff0c;大佬们又都是在学哪些语言呢。 最近一些朋友和我在讨论哪个编程语言是现在 最好用 最厉害 的编程语言。 有人说&#xff0c;Python简单好用&#xf…

GraphQL 与 Elasticsearch 相遇:使用 Hasura DDN 构建可扩展、支持 AI 的应用程序

作者&#xff1a;来自 Elastic Praveen Durairaju GraphQL 提供了一种高效且灵活的数据查询方式。本博客将解释 Hasura DDN 如何与 Elasticsearch 配合使用&#xff0c;以实现高性能和元数据驱动的数据访问。 此示例的代码和设置可在此 GitHub 存储库 - elasticsearch-subgraph…

.bixi勒索病毒来袭:如何防止文件加密与数据丢失?

导言 在网络威胁剧烈的今天&#xff0c;勒索病毒已成为企业和个人面临的重大安全挑战&#xff0c;其中虫洞勒索病毒习得高强度的加密手段和急剧传播的特性引起关注。一旦感染&#xff0c;就会加密关键数据并索要赎金&#xff0c;导致数据无法访问并带来巨大的财务损失。更为严…

Mac 配置SourceTree集成云效

1、背景 工作使用的是自己的笔记本&#xff0c;一个是比较卡&#xff0c;在一个是敏感信息比较多还是使用公司的电脑&#xff0c;但是系统是Mac就很麻烦&#xff0c;在网上找了帖子记录一下 2、配置 打开终端 ssh-keygen -t rsa #一直回车就行 cd .ssh cat id_rsa.pub #查…

如何选择适合自己的 Python IDE

集成开发环境&#xff08;IDE&#xff09;是指提供广泛软件开发能力的软件应用程序。IDE 通常包括源代码编辑器、构建自动化工具和调试器。大多数现代 IDE 都配备了智能代码补全功能。在本文中&#xff0c;你将发现目前市场上最好的 Python IDE。 什么是 IDE&#xff1f; IDE…

Javase——正则表达式

正则表达式的相关使用 public static void main(String[] args) {//校验QQ号 System.out.println("3602222222".matches("[1-9][0-9]{4,}"));// 校验18位身份证号 System.out.println("11050220240830901X".matches("^([0-9]){7,18}…

如何在 Ubuntu 上安装和配置 GitLab

简介 GitLab是一个开源应用程序&#xff0c;主要用于托管 Git 仓库&#xff0c;并提供与开发相关的附加功能&#xff08;如问题跟踪&#xff09;。GitLab 可由用户自己的基础架构托管&#xff0c;可灵活部署为开发团队的内部存储库、与用户对接的公共方式或供稿者托管自己项目…

Windows部署rabbitmq

本次安装环境&#xff1a; 系统&#xff1a;Windows 11 软件建议版本&#xff1a; erlang OPT 26.0.2rabbitmq 3.12.4 一、下载 1.1 下载erlang 官网下载地址&#xff1a; 1.2 下载rabbitmq 官网下载地址&#xff1a; 建议使用解压版&#xff0c;安装版可能会在安装软件…

vue2和vue3在html中引用组件component方式不一样

我的vue版本是&#xff1a;20.17.0 一、在HTML中&#xff0c;引用组件格式区别。 vue2引用组件可以是file.vue格式&#xff0c;需要导入&#xff1a;<script src"https://unpkg.com/http-vue-loader"></script>才可以识别vue格式。 vue3引用组件格式是…

uniapp下载文件的方案,包括H5,App方案解决办法

1. 在uniapp需要下载文件&#xff0c;但是显示情况是不能下载。所以只能使用该办法来进行下载。 2. 这有一个注意点是&#xff1a;如果你做的是H5的方案&#xff0c;那么我已经替你踩好坑了&#xff0c;UC浏览器是不支持blob类型的下载&#xff0c;以及创建a标签的方案来进行下…

【ubuntu】双系统无grub引导菜单中没有windows引导项

无GRUB选择系统界面 修改一下配置即可 # 1. 更新下工具 sudo apt update sudo apt install vim# 2. 修改引导设置 sudo vim /etc/default/grub按i编辑&#xff0c; 编辑好ESC推出到控制模式&#xff0c;shift: 输入wq 回车保存 修改GRUB_TIMEOUT_STYLE改为菜单模式 # 3. 修改…

六 在WEB中应用MyBatis(使用MVC架构模式)

六、在WEB中应用MyBatis&#xff08;使用MVC架构模式&#xff09; 实现功能&#xff1a; 银行账户转账 使用技术&#xff1a; HTML Servlet MyBatis WEB应用的名称&#xff1a; bank 6.1 需求描述 6.2 数据库表的设计和准备数据 6.3 实现步骤 第一步&#xff1a;环境…

Rust 力扣 - 73. 矩阵置零

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们使用两个变量记录矩阵初始状态的第一行与第一列是否存在0 然后我们遍历矩阵&#xff08;跳过第一行与第一列&#xff09;&#xff0c;如果矩阵中元素为0则将该元素映射到矩阵第一行与矩阵第一列的位置置为0…

ExpandingCard扩展卡片

文章目录 演示效果分析思路核心代码总结 源码 演示效果 分析思路 使用flex布局&#xff0c;每个卡片的宽度都由flex进行灵活调整交互可以增加和删除active&#xff0c;来实现宽度扩增和恢复还需要使用transition进行动画过渡&#xff0c;使得平滑切换 核心代码 首先创建一个…

QT找不到ffmpeg链接库解决方法

error: undefined reference to avformat_network_init() 一个神奇的报错&#xff0c;查了很久&#xff0c;检查步骤&#xff1a; 1、检查了 pro工程文件 2、链接库的真实性和正确性 在main.cpp中调用没有报错&#xff0c;在其它cpp文件中调用就报错。 破案了&#xff0c;…

【Python单元测试】pytest框架单元测试常用用例

【Python单元测试】pytest框架单元测试 配置 命令行操作 测试报告 覆盖率 常用用例 本文重点介绍使用的Mock写法&#xff0c; pytest的基本用法&#xff0c;非本文重点。 pytest 相较于unittest, 写法更加简便。对测试用例直接assert是否符合预期即可 # 定义mock对象, 测试…

OmniGen: Unified Image Generation(代码的复现)

文章目录 论文简介模型的部署需要下载的预训练权重 模型的生成效果图像编辑的效果风格迁移的效果 总结 论文简介 OmniGen的github项目地址 OmniGen: Unified Image Generation。OmniGen 在各种图像生成任务中都表现出了卓越的性能&#xff0c;并可能大大超过现有扩散模型的极…

景联文科技医疗数据处理平台:强化医疗数据标注与管理,推动医疗数字化新篇章

随着医疗科技快速进步与广泛应用&#xff0c;医疗信息的规模正在迅速扩张&#xff0c;如何有效管理这些医疗数据成为了关键议题。 医疗数据不仅包括传统的纸质病历&#xff0c;还有电子病历、实验室检测结果、医学影像等多样化的数字信息。为确保这些数据能为临床决策、科研分析…

在线学习新体验:SpringBoot精品试题库系统

1 绪论 1.1 研究背景 现在大家正处于互联网加的时代&#xff0c;这个时代它就是一个信息内容无比丰富&#xff0c;信息处理与管理变得越加高效的网络化的时代&#xff0c;这个时代让大家的生活不仅变得更加地便利化&#xff0c;也让时间变得更加地宝贵化&#xff0c;因为每天的…