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

CSS之盒子模型

news 2025/7/8 5:36:44

盒子模型

01-选择器

结构伪类选择器

基本使用

作用：根据元素的结构关系查找元素。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 结构伪类选择器 *//* 1.选择第一个li */ul li:first-child {color: pink;}/* 2. 最后一个小li */ul li:last-child {color: green;}/* 3. 选择其中任意一个 */ul li:nth-child(6) {color: red;}</style>
</head><body><!-- ul>li{第$个}*8 --><ul><li>我是第1个小li</li><li>我是第2个小li</li><li>我是第3个小li</li><li>我是第4个小li</li><li>我是第5个小li</li><li>我是第6个小li</li><li>我是第7个小li</li><li>我是第8个小li</li></ul>
</body></html>

在这里插入图片描述

:nth-child(公式)

在这里插入图片描述

提示：公式中的n取值从 0 开始。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 公式 *//* 2n 是偶数个 */ul li:nth-child(2n) {background-color: #eee;}ul li:hover {background-color: #bbb;}/* 2n+1 奇数 *//* ul li:nth-child(2n + 1) {background-color: #eee;} *//* 5n 5的倍数 *//* ul li:nth-child(5n) {background-color: #eee;} *//* -n+5 选择第5个以前的 包含第5个 *//* ul li:nth-child(-n + 5) {background-color: #eee;} *//* n+5 选择第5个以后的 包含第5个 *//* ul li:nth-child(n + 5) {background-color: #eee;} */</style>
</head><body><ul><li>我是第1个小li</li><li>我是第2个小li</li><li>我是第3个小li</li><li>我是第4个小li</li><li>我是第5个小li</li><li>我是第6个小li</li><li>我是第7个小li</li><li>我是第8个小li</li><li>我是第9个小li</li><li>我是第10个小li</li><li>我是第11个小li</li><li>我是第12个小li</li><li>我是第13个小li</li><li>我是第14个小li</li><li>我是第15个小li</li></ul>
</body></html>

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

在这里插入图片描述

div::before {content: "before 伪元素";
}
div::after {content: "after 伪元素";
}

注意点：

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同（权重为1）

02-盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型-组成

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}

在这里插入图片描述

边框线

四个方向

属性名：border

属性值：边框线粗细线条样式颜色（不区分顺序）

在这里插入图片描述

div {border: 5px solid brown;width: 200px;height: 200px;background-color: pink;
}

单方向边框线

属性名：border-方位名词

属性值：边框线粗细线条样式颜色（不区分顺序）

div {border-top: 2px solid red;border-right: 3px dashed green;border-bottom: 4px dotted blue;border-left: 5px solid orange;width: 200px;height: 200px;background-color: pink;
}

内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词

div {/* 四个方向 内边距相同 */padding: 30px;/* 单独设置一个方向内边距 */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;width: 200px;height: 200px;background-color: pink;
}

提示：添加 padding 会撑大盒子。

padding 多值写法

在这里插入图片描述

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

尺寸计算

在这里插入图片描述

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

手动做减法，减掉 border / padding 的尺寸
內减模式：box-sizing: border-box

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

版心居中

在这里插入图片描述

左右 margin 值为 auto（盒子要有宽度才能使用auto）

div {margin: 0 auto;width: 1000px;height: 200px;background-color: pink;
}

行内和行内块元素水平居中对齐，给块级的父元素添加 tac
块级元素水平居中对齐：让盒子的左右外边距设置为 auto 就可以了。 margin: auto;

小米 margin-left: auto; margin-right: auto;
京东/淘宝： margin： 0 auto；(0和auto之间是空格)

<style>.box {width: 200px;height: 200px;border: 2px dotted red;box-sizing: border-box;}.content {width: 100px;height: 100px;background-color: pink;margin: 0 auto;margin-left: auto;margin-right: auto;}
</style><body><div class="box"><div class="content"></div></div>
</body>

水平居中：

在这里插入图片描述

清除默认样式

在这里插入图片描述

清除标签默认的样式，比如：默认的内外边距。

/* 清除默认内外边距 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 清除列表项目符号 */
li {list-style: none;
}

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

在这里插入图片描述

外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

在这里插入图片描述

.one {margin-bottom: 50px;
}
.two {margin-top: 20px;
}

结果俩个div之间距离是50px

结论：取两个 margin 中的较大值生效

外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

.son {margin-top: 50px;width: 100px;height: 100px;background-color: orange;
}

在这里插入图片描述

解决方法：

取消子级margin，父级设置padding
父级设置 overflow: hidden
父级设置 border-top:1px solid transform

行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {/* margin 和 padding 属性，无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;
}

圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

在这里插入图片描述

多值写法

在这里插入图片描述

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

img {width: 200px;height: 200px;border-radius: 100px;border-radius: 50%;
}

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

div {width: 200px;height: 80px;background-color: orange;border-radius: 40px;
}

在这里插入图片描述

盒子阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

div {width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

CSS之盒子模型

盒子模型 01-选择器结构伪类选择器基本使用作用：根据元素的结构关系查找元素。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IE…...

编程日记 2024/2/10 1:56:06

Linux系统安装（CentOS Vmware）

学习环境安装 VMware安装 VMware下载&安装访问官网：https://www.vmware.com 在此处可以选择语言点击China（简体中文） 点击产品，点击Workstation Pro 下滑，点击下载试用版下滑找到Workstation 17 Pro for Wi…...

编程日记 2024/2/10 1:46:54

STM32 硬件随机数发生器(RNG)

STM32 硬件随机数发生器文章目录 STM32 硬件随机数发生器前言第1章随机数发生器简介1.1 RNG主要特性1.2.RNG应用第2章 RNG原理框图第3章 RNG相关寄存器3.1 RNG 控制寄存器 (RNG_CR)3.2 RNG 状态寄存器 (RNG_SR)3.3 RNG 数据寄存器 (RNG_DR) 第3章 RNG代码部分第4章 STM32F1 …...

编程日记 2024/2/10 1:45:53

Window环境下使用go编译grpc最新教程

网上的grpc教程都或多或少有些老或者有些问题，导致最后执行生成文件时会报很多错。这里给出个人实践出可执行的编译命令与碰到的报错与解决方法。（ps:本文代码按照煎鱼的教程编写：4.2 gRPC Client and Server - 跟煎鱼学 Go (gitbook.io)&…...

编程日记 2024/2/10 1:41:48

STM32——FLASH（1）简单介绍、分类、读写流程及注意事项

文章目录 FLASH的特点Nor flash和nand flashflash的读写flash 的存储单位 flash的读写过程 FLASH的特点可擦写数据可修改可重写访问速度<ROM Nor flash和nand flash Nor flash 1、与SDRAM相似，用户可以直接运行装载到NORFLASH里面的代码，减少SRAM…...

编程日记 2024/2/10 1:36:44

MySQL的DML语言

DML：Data Manipulation Language（数据操作语言） DML语言用来对数据库中表的数据记录进行增、删、改操作。一、添加数据命令注意： 插入数据时，指定的字段顺序需要与值的顺序是一一对应的。字符串和日期型数据应该包…...

编程日记 2024/2/10 1:30:39

Vivado-IP核主程序 timescale 1ns / 1ps ////module ip_clk_wiz(input sys_clk,input sys_rst_n,output clk_out1,output clk_out2,output clk_out3,output clk_out4,output locked);clk_wiz_0 instance_name(// Clock out ports.clk_out1(clk_out1), // output clk_out…...

编程日记 2024/2/10 1:27:36

品牌如何营造生活感氛围？媒介盒子分享

「生活感」简而言之是指人们对生活的感受和意义，它往往没有充斥在各种重要的场合和事件中，而是更隐藏在细碎平凡的生活场景中。在营销越来越同质化的当下，品牌应该如何打破常规模式，洞察消费情绪，找到更能打动消费者心…...

编程日记 2024/2/10 1:25:34

Java 学习和实践笔记（2）

今天的学习进度： 注册并下载安装好了Java 8，之后进行以下配置。 1）path 是一个常见的环境变量，它告诉系统除了在当前的目标下妹寻找此程序外，还可以到path指定的目录下找。这句话是什么意思呢？以下举报例…...

编程日记 2024/2/10 1:24:33

Python：批量url链接保存为PDF

我的数据是先把url链接获取到存入excel中，后续对excel做的处理，各位也可以直接在程序中做处理，下面就是针对excel中的链接做批量处理 excel内容格式如下（涉及具体数据做了隐藏） 标题文件链接文件日期网页标题1http://…...

编程日记 2024/2/10 1:23:32

【LeetCode每日一题】525连续数组 303区域和检索（前缀和的基本概念和3个简单案例）

前缀和 // 构造prefix let prefix [0] arr.forEach(num > {prefix.push(prefix.at(-1) num); })如果想要计算某个区间 i 到 j 这个子数组的和时，可以根据 prefix[j1] - prefix[i] 获得。例题1：303.区域和检索 - 数组不可变给定一个整数数组 num…...

编程日记 2024/2/10 1:21:30

形态学算法应用之连通分量提取的python实现——图像处理

原理连通分量提取是图像处理和计算机视觉中的一项基本任务，旨在识别图像中所有连通区域，并将它们作为独立对象处理。在二值图像中，连通分量通常指的是所有连接在一起的前景像素集合。这里的“连接”可以根据四连通或八连通的邻接关系来定义…...

编程日记 2024/2/10 1:20:29

Kafka系列之：Kafka集群同时设置基于时间和日志大小两种方式保存Topic的数据

Kafka系列之：Kafka集群同时设置基于时间和日志大小两种方式保存Topic的数据一、基于日志大小二、基于时间大小三、参数设置四、设置命令一、基于日志大小 "log.retention.bytes"是Apache Kafka中的一项配置参数，用于指定每个日志段文件的最大大小。当日志段文件的…...

编程日记 2024/2/10 1:18:27

pytest+allure批量执行测试用例

在 Pytest 中，可以使用装饰器 `@pytest.fixture` 来定义用例级别的前置和后置操作。下面是一个示例代码，演示了如何使用 Pytest 的前置和后置操作： ```python import pytest @pytest.fixture(scope="function") def setup_function(): print("Setup fu…...

编程日记 2024/2/10 1:15:24

SpringBoot和SpringMVC

目录一、springboot项目 （1）创建springboot项目 （2）目录介绍 （3）项目启动 （4）运行一个程序 （5）通过其他方式创建和运行springboot项目二、SpringMVC…...

编程日记 2024/2/10 1:11:20

免费搭建幻兽帕鲁服务器，白嫖阿里云游戏服务器

阿里云幻兽帕鲁服务器免费搭建方案，先在阿里云高校计划「云工开物」活动领取学生专享300元无门槛代金券，幻兽帕鲁专用服务器4核16G配置26元1个月、149元半年，直接使用这个无门槛300元代金券抵扣即可免费搭建幻兽帕鲁服务器。阿里云服务器网al…...

编程日记 2024/2/10 1:09:18

[技术杂谈]如何下载vscode历史版本

网站模板： https://code.visualstudio.com/updates/v1_85 如果你想下载1.84系列可以访问https://code.visualstudio.com/updates/v1_84 然后看到： 选择对应版本下载即可，我是windows x64系统选择x64即可开始下载...

编程日记 2024/2/10 1:07:16

nginx slice模块的使用和源码分析

文章目录 1. 为什么需要ngx_http_slice_module2. 配置指令3. 加载模块4. 源码分析4.1 指令分析4.2 模块初始化4.3 slice模块的上下文4.2 $slice_range字段值获取4.3 http header过滤处理4.4 http body过滤处理5 测试和验证 1. 为什么需要ngx_http_slice_module 顾名思义&#…...

编程日记 2024/2/10 1:06:15

AI应用开发-python实现redis数据存储

AI应用开发相关目录本专栏包括AI应用开发相关内容分享，包括不限于AI算法部署实施细节、AI应用后端分析服务相关概念及开发技巧、AI应用后端应用服务相关概念及开发技巧、AI应用前端实现路径及开发技巧适用于具备一定算法及Python使用基础的人群 AI应用开发流程概…...

编程日记 2024/2/10 1:03:11

2024年Java架构篇之设计模式

2024年Java实战面试题_java 5 年面试-CSDN博客 1、单例模式...

编程日记 2024/2/10 1:02:10

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/7/7 5:08:22

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/7/7 16:37:17

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑一、学生端在主界面可以选择自己的用户角色选择学生则进入学生登录界面…...

编程新知 2025/7/8 0:54:17

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/7/6 8:41:25

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2025/7/7 4:40:03

linux 下常用变更-8

1、删除普通用户查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...

编程新知 2025/7/5 18:42:22

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/7/8 1:59:59