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

css基础记录

news 2025/7/5 11:53:09

基础

选择器

复合选择器

后代选择器
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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/6/26 0:06:54

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/6/27 2:40:37

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/4 8:56:21

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/4 19:57:17

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/7/4 21:05:36

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/6/26 5:40:36

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/4 13:30:34

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/6/21 11:20:52

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/6/21 8:57:50

C#中用于控制自定义特性（Attribute）

我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中&#xff0c;Attribute&#xff08;特性&#xff09;是一种用于向程序元素&#xff08;如类、方法、属性等&#xff09;添加元数据的机制。Attr…...

编程新知 2025/7/5 6:37:37