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

css基础记录

news 2025/12/17 19:48:18

基础

选择器

复合选择器

后代选择器
div p {};

类似如上,找到div中所有的后代,注意是所有的后代

子代选择器 >
div > a
只选择div的儿子中有a的

并集选择器

用逗号,分隔
p,div,span,h1 {
…
}
一般一行写一个

CSS元素显示模式

分为块元素,行内元素

块元素

在这里插入图片描述
特点

  1. 独占一行
  2. 高度,宽度,外边距,内边距都可以控制
  3. 宽度默认是容器(父容器宽度)的100%
  4. 是一个容器及盒子,里边可以放块级元素,行内元素

行内元素

在这里插入图片描述
特点

  1. 相邻元素在一行上,一行可以显示多个
  2. 高宽设置无效
  3. 默认宽度就是本身内容宽度
  4. 只能容纳文本 or 其他行内元素

注意

  1. 连接里边不能再放连接
  2. a元素可以放块级元素

行内块元素

在这里插入图片描述特点

  1. 和相邻行内元素在一行上
  2. 默认宽度是它本身宽度
  3. 高度,行高,外边距,内边距都能控制

元素显示模式切换

转为块: display: block
转为行内: display: inline
转为行内块: display: inline-block

背景

颜色

background-color
默认是transparent

图片

background-image: none | url
默认是none

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y
repeat: 纵向和横向平铺(默认)
no-repeat: 不平铺
repeat-x: 横向平铺
repeat-y: 纵向平铺

三大特性

层叠性

样式冲突,以最上边的为准

继承性

继承父标签的某些样式,例如文本颜色和字号,行高
和文字相关的一般都继承

优先级

同一个选择器,执行层叠性
不同选择器,根据选择器权重执行
在这里插入图片描述
类选择器 > 元素选择器,id选择器 > 类选择器

权重的叠加

如果是复合选择器,权重叠加
在这里插入图片描述

盒子模型

在这里插入图片描述
最里边是内容
内容和边框之间是padding
盒子和盒子之间是margin

border

边框会增加盒子的实际大小,有两种方法解决

  1. 测量盒子的时候,不量边框
  2. 测量时包含了边框,需要width和height减去边框宽度

padding

如果盒子已经有了宽度和高度,再指定内边框会撑大盒子

如果没有指定,不会撑大盒子

margin

块级盒子水平居中对齐
必须满足两个条件

  1. 盒子必须指定宽度
  2. 盒子的左右边距都设置为auto
.header {width: 100px, margin: 0 auto;}

常用写法
在这里插入图片描述

行内元素和行内块元素水平居中
在行内块元素 + 行内元素的外部的父类的块级元素写上水平居中
并且加上 text-align: center即可

嵌套块元素垂直外边框塌陷
在这里插入图片描述
父元素和子元素都有上外边距,此时父元素就会塌陷为较大的外边距值

解决方法:

  1. 给父元素定义边框
  2. 给父元素定义上内边距
  3. 给父元素添加overflow:hidden
    还是第三个好用一些

清除内外边距

网页元素大多都有内外边距,而且不同浏览器默认的也是不一致,因此我们必须清除内外边距

* {padding: 0;margin: 0;
}

浮动

三种方式

标准流,也就是默认的
浮动
定位

浮动

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

浮动的值
float: none | left | right

特性

  1. 浮动会脱标
  2. 浮动的元素顶部对齐,且在一行显示(没有缝隙)
  3. 浮动具有行内块特性(宽度看内容)

脱标就是没有原来的位置了,相当于漂浮在天空上

清除浮动

有时候父类不好给高度,想要子元素撑起这个高度,但是实际上是不行的,不设置高度的话,后边的标准流会受影响
如下代码

<!DOCTYPE html>
<html><head><style>.parent {background-color: aqua;.son1 {width: 100px;height: 100px;background-color: red;float: left;}.son2 {width: 100px;height: 100px;background-color: blue;float: left;}}.otherbox {background-color: darkcyan;height: 100px;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div>        <div class="otherbox">otherbox</div></body>
</html>

在这里插入图片描述

额外标签法
在容器尾部加入额外的盒子,必须是块级盒子

<div style="clear:both"></div>

在这里插入图片描述

overflow:
给父元素添加overflow: hidden | auto | scroll
缺点是溢出的内容无法显示

:after伪元素法
不用单独写标签,在元素上加入css代码就可以,属于是升级版额外标签法

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {/* IE6,7专有 */zoom: 1;
}

给父盒子加上类.clearfix ,一般都叫这个名字

双伪元素
优点是更简单一些

        .clearfix::before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {/* IE6,7专有 */zoom: 1;}

属性书写顺序

在这里插入图片描述

定位

static

相当于标准流,没什么用

relative

相对于自己原来的位置进行移动,且不脱标

absolute

相当于父元素来移动
父元素必须有定位
如果父节点没定位,爷爷节点有定位,相对于爷爷节点,一级一级往上找,如果都没有,那就是相当于根元素

已经脱标

一般是子绝父相

fixed

相对于可视窗口进行移动
已脱标

sticky

sticky 在没达到条件之前是relative,达到条件之后是fixed
所以,sticky必须搭配偏移量,不然就看作是relative

层级顺序

标准流 < 浮动 < 定位

定位之间:
相对,绝对,固定默认层级相同
html中写到下面的会覆盖上面的

想改变就改变z-index,越大越上面

绝对定位水平 + 垂直居中

实现方式很简单

这里以水平居中为例
left: 50% margin-left: 盒子的一半宽度

特殊特性

  1. 行内元素加上绝对定位 or fixed,可以直接设置宽高
  2. 块级元素加上绝对定位 or fixed,不给宽高,默认大小是内容的大小
  3. 脱标的盒子不会触发外边距塌陷
  4. 浮动定位脱标,不会压住后边的标准流的文字,绝对定位 and fixed会压住标准流的所有东西
  5. 浮动定位最初是为了做文字环绕效果,所以才不会压住文字

装饰

overflow

visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条

隐藏

visibility：hidden
display：none

前者,隐藏但是占位置
后者不占位置

边框合并

要实现细线边框
border-collapse：collapse；

相关文章：

css基础记录

基础 选择器 复合选择器 后代选择器 div p {}; 类似如上,找到div中所有的后代,注意是所有的后代 子代选择器 > div > a 只选择div的儿子中有a的 并集选择器 用逗号,分隔 p,div,span,h1 { … } 一般一行写一个 CSS元素显示模式 分为块元素,行内元素 块元素 特点…...

编程日记 2024/12/11 23:52:33

Python后端 -- 万字长文全面解析Django框架

自从2005年诞生以来&#xff0c;Django因其“开发速度快、安全性高”的特点迅速成为许多开发者的首选。无论是小型的个人项目&#xff0c;还是大型的企业应用&#xff0c;Django都能游刃有余地满足需求。我们将从Django的基础知识带你全面掌握Django&#xff0c;从基础知识到高…...

编程日记 2024/12/11 23:50:31

el-thee懒加载删除某条数据 ，el-thee懒加载重置，el-thee刷新某个节点

一、懒加载的tree已经全部展开&#xff0c;外部点击删除的时候不需要重新展开点击获取下一层数据 <template> <el-treeref"tree":data"treeData":props"defaultProps"render-after-expandhighlight-currentlazy:expand-on-click-node&q…...

编程日记 2024/12/11 23:47:29

【PyQt5教程 四】Qt Designer 样式表（styleSheet）实现基本小部件的自定义动态效果和资源浏览器背景添加方法

目录 一、成果演示&#xff1a; 二、样式表的使用方法: &#xff08;1&#xff09;样式表语法和属性&#xff1a; &#xff08;2&#xff09;样式表代码示例&#xff1a; &#xff08;3&#xff09;伪类和状态&#xff1a; &#xff08;4&#xff09;复合选择器&#xff…...

编程日记 2024/12/11 23:43:24

【git】--- 通过 git 和 gitolite 管理单仓库的 SDK

在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。【git】--- 通过 git 和 gitolite 管理单仓库的 SDK 开发环境一、安装配置 gitolite二…...

编程日记 2024/12/11 23:41:21

计算机网络之NAT、代理服务、内网穿透、内网打洞

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 计算机网络之NAT、代理服务、内网穿透、内网打洞 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论…...

编程日记 2024/12/11 23:39:19

2024-金盾信安杯线上赛 WP

Misc 大赛宗旨 记事本打开&#xff0c;一眼零宽隐写 B 神工具一把梭&#xff0c;得到一串 base 编码 base64 解码得到 flag flag 值&#xff1a;flag{5d5555fa-1303-4b43-8eef-d6ea7c64c361} esab 根据题目 esab 可以发现这正是 base 的逆向&#xff0c;所以可以先逆向一下…...

编程日记 2024/12/11 23:38:18

MySQL 基础架构

MySQL的基础架构主要由三大核心部分构成&#xff0c;以下是详细的解析&#xff1a; 一、连接层 连接层是客户端与MySQL数据库之间的桥梁&#xff0c;主要负责通信和身份验证&#xff0c;确保数据交换的安全与稳定。具体来说&#xff0c;它负责以下任务&#xff1a; 建立连接…...

编程日记 2024/12/11 23:37:16

汽车升级到底应不应该设置“可取消“功能

最近&#xff0c;汽车OTA&#xff08;Over-the-Air&#xff09;升级频频成为车主讨论的热点。有些车主反映&#xff0c;一些升级增加了实用功能&#xff0c;而另一些却让体验变得复杂甚至带来不便。于是&#xff0c;大家不禁发问&#xff1a;汽车升级功能究竟应不应该允许“可取…...

编程日记 2024/12/11 23:34:11

【MySQL】mysql中的事务

目录 1、背景2、事务的特性3、事务之间的几种错误【1】脏读【2】不可重复读【3】幻读 4、事务中的隔离级别5、总结 1、背景 事务是存储引擎层面实现的&#xff0c;有的引擎支持事务&#xff0c;有的引擎不支持事务&#xff0c;我们常用的引擎InnoDB就支持事务&#xff0c;本文…...

编程日记 2024/12/11 23:30:02

大语言模型（LLM）与智能机器人的应用分析

系列文章目录 前言 近年来，大型语言模型（LLM）的集成彻底改变了机器人领域，使机器人能够以人类熟练程度进行交流、理解和推理。本文探讨了 LLM 对机器人的多方面影响，并针对在不同领域利用这些模型的关键挑战和机遇进行了研究。通过将 LLM 应用程序分类并分析核心机器人元素…...

编程日记 2024/12/11 23:29:01

Inno Setup 学习笔记（一）

前言 最近想把自己写的Windows端的软件打包成安装程序exe&#xff0c;又觉得自带的界面太丑了&#xff0c;想自己完全做一个新的页面 网上找到的只有基础教程&#xff0c;记录一下进阶学习过程 生命周期 按照Vue的说法叫生命周期&#xff0c;Inno Setup中叫 Pascal 脚本: 事…...

编程日记 2024/12/11 23:23:56

从阿里云EDM到美团云：典型微服务治理平台的实战经验分享

目录 一. 阿里云 EDM&#xff08;Enterprise Distributed Application Service&#xff09; 二. 腾讯云 TSF&#xff08;Tencent Service Framework&#xff09; 三. 华为云 FusionStage 四. 京东云 JDC&#xff08;JD Cloud Microservice Platform&#xff09; 五. 百度智…...

编程日记 2024/12/11 23:19:51

【接口自动化测试】一文从3000字从0到1详解接口测试用例设计

接口自动化测试是软件测试中的一种重要手段&#xff0c;它能有效提高测试效率和测试覆盖率。在进行接口自动化测试之前&#xff0c;首先需要进行接口测试用例的设计。本文将从0到1详细且规范的介绍接口测试用例设计的过程&#xff0c;帮助读者快速掌握这一技能。 一、了解接口…...

编程日记 2024/12/11 23:11:43

反向代理-缓存篇

文章目录 强缓存一、Expires（http1.0 规范）二、cache-control（http1.1 出现的 header 信息）Cache-Control 的常用选项Cache-Control 常用选项的选择三、弊端协商缓存一、ETag二、If-None-Match三、Last-modified四、If-Modified-Since浏览器的三种刷新方式静态资源部署策略…...

编程日记 2024/12/11 23:05:38

【伪代码】数据结构-期末复习 线性表

目录 例1 矩阵相乘 线性表 2.1 线性表的类型定义 例2-1 求并集 LALA∪LB 例2-2 有序表归并 2. 2 线性表的顺序表示和实现 1&#xff0e;构造空表 2&#xff0e;插入 3&#xff0e;删除 4&#xff0e;定位 顺序表的优点&#xff1a; 顺序表的缺点&#xff1a; 例…...

编程日记 2024/12/11 23:01:32

JavaWeb学习、过滤器、ajax异步请求、json、jquery-api文档

一、过滤器&#xff1a; 按照过滤规则筛选出想要的资源。 为什么使用过滤器&#xff1f; 1. 很多地方都需要判断是否登录。如果我们在每个资源出进行判断&#xff0c;非常麻烦。我们可以使用过滤器在访问这些资源前进行判断。 &#xff08;这样就不用在主界面&#xff0c;修改…...

编程日记 2024/12/11 23:00:31

深入探索 JVM：原理、机制与实战

一、JVM 概述 JVM&#xff08;Java Virtual Machine&#xff09;是 Java 程序运行的核心组件&#xff0c;它提供了一个独立于硬件和操作系统的执行环境&#xff0c;使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成&#xff1a; 类装载器&#xf…...

编程日记 2024/12/11 22:54:23

JavaWeb学习(3)（Servlet详细、Servlet的三种实现方式(面试)、Servlet的生命周期、传统web.xml配置Servlet(了解)）

目录 一、Servlet详细。 &#xff08;1&#xff09;基本介绍。 &#xff08;2&#xff09;基本作用。 1、接收客户端请求数据。 2、处理请求。 3、完成响应结果。 二、Servlet的三种实现方式。 &#xff08;1&#xff09;实现javax.servlet.Servlet接口。 1、基本介绍。 2、代码…...

编程日记 2024/12/11 22:53:22

支付宝租赁小程序助力便捷生活新方式

内容概要 支付宝租赁小程序为现代人带来了许多惊喜&#xff0c;它不仅仅是一个简单的租赁平台&#xff0c;更是生活中不可或缺的好帮手。想象一下&#xff0c;无论你缺少什么&#xff0c;从工具到家居用品&#xff0c;只需轻轻一点&#xff0c;便能轻松找到需要的物品。这个小…...

编程日记 2024/12/11 22:51:20

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/12/15 15:15:10

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/12/6 23:58:46

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/12/13 4:39:40

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/12/17 13:16:15

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/11/18 6:15:28

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2025/12/15 14:26:27

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2025/12/5 16:31:18