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

css基础记录

news 2026/2/7 23:38:39

基础

选择器

复合选择器

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/2/3 13:01:10