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

从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型

news 来源：原创 2025/5/14 16:33:46

从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型

前言
一、盒子模型的组成
- margin（外边距）：
- border（边框）：
- padding（内边距）：
- content（内容）：
二、盒子内容区（content）
- 关于默认宽度
三、盒子内边距（padding）
四、盒子边框（border）
五、盒子外边距（margin）
- 1.margin 属性设置
- 2.margin 注意事项：
- 3.margin 塌陷问题：
- 4.margin 合并问题：
六、处理内容溢出
- 1. overflow属性介绍
- 2.visible（默认值）
- 3.hidden
- 4.scroll
- 5.auto
- 6.overflow-x和overflow-y属性
七、隐藏元素的方式
- 1.display: none;
- 2.visibility: hidden;
- 3.opacity: 0;

前言

在之前的博客中，我们深入了解了 CSS 的长度单位与元素的各种显示模式，这些知识对于我们构建网页样式起到了重要的铺垫作用。
而今天，我们要进一步探索CSS 盒子模型，它可是 CSS 布局的核心概念之一，掌握了它，就能更加精准地控制网页元素的呈现效果

一、盒子模型的组成

在这里插入图片描述

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子来设置的。这个盒子主要由以下几个部分组成：

margin（外边距）：

它表示盒子与外界的距离呢。需要注意的是，margin 不会影响盒子本身的大小，但会对盒子的位置产生影响。

用法

.box {margin: 20px;}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Margin Example </title><style>.box1 {background-color: lightblue;margin: 20px;}.box2 {background-color: lightgreen;margin: 10px;}</style>
</head><body><div class="box1">这是第一个盒子，设置了20px的外边距，你可以看到它与页面边缘以及其他元素之间有一定的间隔。</div><div class="box2">这是第二个盒子，设置了10px的外边距，和第一个盒子相比，它与周围的间隔会有所不同。</div>
</body></html>

在这里插入图片描述

border（边框）：

就是盒子的边框，通过相关属性可以设置边框的风格、宽度和颜色等。

 .box {border-style: solid;border-width: 3px;border-color: black;}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Border Example </title><style>.box {border-style: solid;border-width: 3px;border-color: black;background-color: lightyellow;padding: 10px;width: 200px;height: 150px;}</style>
</head><body><div class="box">这里是盒子里面的内容哦，通过设置边框的样式、宽度和颜色，让盒子有了一个明显的边界呢。</div>
</body></html>

在这里插入图片描述

padding（内边距）：

这是紧贴着内容的补白区域，能让内容和边框之间有一定的间隔。
用法

  .box {padding: 15px;}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Padding Example </title><style>.box {background-color: lightcoral;padding: 15px;border: 1px solid gray;}</style>
</head><body><div class="box">这里是盒子里面的内容哦，通过设置15px的内边距，你可以看到内容与边框之间有了一定的间隔呢，让整个盒子看起来更加美观和清晰啦。</div>
</body></html>

在这里插入图片描述

content（内容）：

元素中的文本或者后代元素等都属于它的内容。

盒子的大小计算公式是：

盒子的大小 = content + 左右 padding + 左右 border

外边距margin 不会影响盒子的大小，但会影响盒子的位置

二、盒子内容区（content）

在设置内容区的时候，我们有以下这些常用的 CSS 属性：
在这里插入图片描述

下面来详细讲解一下各部分

width：

用来设置内容区域的宽度，属性值是长度。

max-width：

可以设置内容区域的最大宽度，同样是长度值。不过要注意，一般它不与 width 一起使用。

min-width：

这个属性是设置内容区域的最小宽度的，也是长度值，同样通常不与 width 一起用。

height：

用于设置内容区域的高度，属性值为长度。

max-height：

设置内容区域的最大高度，是长度值，一般不与 height 一起使用。

min-height：

设置内容区域的最小高度，也是长度值，通常不与 height 一起使用

关于默认宽度

当我们不设置 width 属性时，元素会呈现出默认宽度。这里有两个关于默认宽度的公式：

总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右 padding 。

三、盒子内边距（padding）

padding 是个复合属性它的使用规则如下：

padding: 10px; 这种情况下，四个方向的内边距都是 10px
padding: 10px 20px; 此时是上 10px，左右 20px（也就是上下、左右的设置方式）
padding: 10px 20px 30px; 这里就是上 10px，左右 20px，下 30px（上、左右、下的设置顺序）
padding: 10px 20px 30px 40px; 那就是上 10px，右 20px，下 30px，左 40px（上、右、下、左的设置顺序）

这里还有几个注意点

padding 的值是不能为负数的哟。
对于行内元素来说，上下内边距不能完美地设置
块级元素、四个方向的内边距都可以完美设置

四、盒子边框（border）

边框相关的属性有 20 个之多
像 border-style、border-width、border-color 其实也是复合属性

五、盒子外边距（margin）

1.margin 属性设置

在这里插入图片描述

margin-left：设置左外边距，属性值是 CSS 中的长度值。
margin-right：设置右外边距，也是 CSS 中的长度值。
margin-top：设置上外边距，同样是长度值。
margin-bottom：设置下外边距，还是长度值。
margin：这是个复合属性，可以写 1~4 个值，规律和 padding 是一样的（顺时针方向），属性值也是 CSS 中的长度值呢

例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Margin Example</title><style>/* 第一个盒子，设置不同方向的外边距 */.box1 {background-color: lightblue;width: 200px;height: 150px;margin-left: 30px;margin-right: 20px;margin-top: 15px;margin-bottom: 10px;}/* 第二个盒子，使用复合属性margin设置外边距 */.box2 {background-color: lightgreen;width: 150px;height: 120px;margin: 10px 20px 15px 25px; /* 顺时针方向：上 右 下 左 */}/* 第三个盒子，使用复合属性margin设置外边距，只写两个值 */.box3 {background-color: lightcoral;width: 180px;height: 130px;margin: 12px 18px; /* 上下为12px，左右为18px */}/* 第四个盒子，使用复合属性margin设置外边距，只写一个值 */.box4 {background-color: lightyellow;width: 160px;height: 140px;margin: 20px; /* 四个方向的外边距都为20px */}</style>
</head><body><div class="box1">这是第一个盒子，通过分别设置margin-left、margin-right、margin-top和margin-bottom来控制外边距哦。</div><div class="box2">这是第二个盒子，使用复合属性margin设置外边距，这里按照顺时针方向分别设置了上、右、下、左的外边距哦。</div><div class="box3">这是第三个盒子，使用复合属性margin设置外边距，只写了两个值，分别对应上下和左右的外边距哦。</div><div class="box4">这是第四个盒子，使用复合属性margin设置外边距，只写了一个值，四个方向的外边距都设置为相同的值哦。</div>
</body></html>

在这里插入图片描述

2.margin 注意事项：

子元素的 margin，是参考父元素的 content 来计算的，因为是在父亲的 content 中承装着子元素。
上 margin、左 margin 会影响自己的位置；
下 margin、右 margin 则会影响后面兄弟元素的位置。
块级元素、行内块元素都能完美地设置四个方向的 margin；
但行内元素就有点特别，左右margin 可以完美设置，上下 margin 设置可就无效。
margin 的值还可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto，那这个块级元素就会在父元素中水平居中。
margin 的值是可以为负值

3.margin 塌陷问题：

什么是 margin 塌陷？就是第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 也会作用在父元素上

例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 父元素样式 */.parent {width: 300px;height: 300px;background-color: lightblue;/* 为了更明显看出效果，给父元素添加边框 */border: 1px solid black;}/* 子元素样式 */.child {width: 200px;height: 100px;background-color: pink;margin-top: 50px;margin-bottom: 30px;}</style><title>Margin塌陷示例</title>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

在这里插入图片描述

按照正常理解，如果没有 margin 塌陷问题，父元素应该保持自身的高度 300px 不变，子元素在父元素内部根据设置的 margin 来调整位置。但实际上，由于 margin 塌陷现象，你会发现父元素的上边框和子元素的上边缘之间的距离并不是设置的 50px（而是子元素的上 margin 作用到了父元素上，使得父元素的上边框和子元素上边缘重合了），同样，父元素的下边框和子元素的下边缘之间的距离也不是设置的 30px（子元素的下 margin 也作用到了父元素上）

那怎么解决这个问题？
有以下几种方案

方案一：给父元素设置不为 0 的 padding 。
方案二：给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden

4.margin 合并问题：

什么是 margin 合并？
就是上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

怎么解决这个问题呢？其实呀，在布局的时候上下的兄弟元素，只给一个设置上下外边距就可以啦，无需特别去解决。

六、处理内容溢出

当内容超出盒子的范围时，我们可以通过 overflow 相关属性来处理

下面来详细降解一下各部分

1. overflow属性介绍

2.visible（默认值）

内容会溢出元素框并且可见，超出部分会直接显示在盒子外面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Visible Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow: visible;}</style>
</head><body><div class="box">这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的语文内容，用来测试当overflow设置为visible时的效果，你会发现文字会超出盒子的边界直接显示出来哦。</div>
</body></html>

在这里插入图片描述

3.hidden

内容超出盒子范围的部分会被隐藏，不会显示在页面上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Hidden Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow: hidden;}</style>
</head><body><div class="box">同样是一段很长很长的文字内容，这次overflow设置为hidden，你会看到超出盒子范围的文字部分都被隐藏起来啦，看不到咯。</div>
</body></html>

在这里插入图片描述

4.scroll

无论内容是否超出盒子范围，都会显示滚动条，用户可以通过滚动条来查看全部内容

5.auto

当内容超出盒子范围时，会自动显示滚动条；如果内容没有超出，则不会显示滚动条

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Overflow Auto Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow: auto;}</style>
</head><body><div class="box">这里的文字内容长度适中，当overflow设置为auto时，如果文字没有超出盒子范围，就不会有滚动条；但如果把文字内容改得很长很长，超出盒子了，就会自动出现滚动条哦。</div>
</body></html>

在这里插入图片描述

6.overflow-x和overflow-y属性

除了overflow属性外，我们还可以分别对水平方向和垂直方向的内容溢出进行单独设置，这就用到了overflow-x和overflow-y属性。它们的取值和overflow属性类似，例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Overflow X and Y Example</title><style>.box {width: 200px;height: 150px;border: 1px solid black;overflow-x: scroll; /* 水平方向设置为滚动条显示方式 */overflow-y: hidden; /* 垂直方向设置为隐藏超出部分 */}</style>
</head><body><div class="box">这里是一些内容，其中包含了比较长的文字以及可能会超出盒子宽度的图片等元素哦。通过设置overflow-x和overflow-y，你可以看到水平方向有滚动条可查看超出部分，而垂直方向超出的部分则被隐藏起来啦。</div>
</body></html>

在这里插入图片描述

七、隐藏元素的方式

在网页设计中，有时候我们需要根据特定的条件隐藏某些元素。以下是几种常见的隐藏元素的方式

1.display: none;

当我们给一个元素设置display: none;时，该元素及其所有内容都会从页面布局中完全移除，就好像这个元素从来不存在一样。它不会占据任何空间，其他元素会自动填补它原本所在的位置。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Display None Example</title><style>.hidden-element {display: none;}</style>
</head><body><div class="visible-element">这是一个可见的元素哦，你可以看到我正常显示在这里呢。</div><div class="hidden-element">我是被设置为display:none的元素，现在你看不到我啦，而且我原本占的地方也被其他元素占了哦。</div><div class="visible-element">这又是一个可见的元素哦，我在被隐藏元素的后面呢，已经填补了它原本的位置啦。</div>
</body></html>

在这里插入图片描述

2.visibility: hidden;

与display: none;不同的是，当设置visibility: hidden;时，元素虽然在页面上不可见了，但它仍然占据着原来的空间位置，其他元素不会填补它的位置。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Visibility Hidden Example</title><style>.invisible-element {visibility: hidden;}</style>
</head><body><div class="visible-element">这是一个可见的元素哦，你可以看到我正常显示在这里呢。</div><div class="invisible-element">我是被设置为visibility:hidden的元素，现在你看不到我啦，但我还占着我原来的地方哦，其他元素可没法填补我的位置呢。</div><div class="visible-element">这又是一个可见的元素哦，我在被隐藏元素的后面呢，它占着位置，我就只能在这儿啦。</div>
</body></html>

在这里插入图片描述

3.opacity: 0;

设置opacity: 0;会使元素完全透明，从而在视觉上看起来好像隐藏了一样。但与前两种方式不同的是，它仍然可以响应鼠标事件等交互操作，并且同样占据着原来的空间位置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"="width=device-width, initial-scale=1.0"><title>Opacity Zero Example</title><style>.transparent-element {opacity: 0;}</style>
</head><body><div class="visible-element">这是一个可见的元素哦，你可以看到我正常显示在这里呢。</div><div class="transparent-element">我是被设置为opacity:0的元素，现在你看不到我啦，但我还占着我原来的地方哦，而且你要是在我这儿点鼠标，还是会有反应的呢，因为我只是透明了而已呀。</div><div class="visible-element">这又是一个可见的元素哦，我在被隐藏元素的后面呢，它占着位置，我就只能在这儿啦。</div>
</body></html>

在这里插入图片描述

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型

从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型前言一、盒子模型的组成margin（外边距）：border（边框）：padding（内边距）：conten…...

编程日记 2025/5/14 16:33:46

Linux命令行下载工具

1. curl 1.1. 介绍 curl是一个功能强大的命令行工具，用于在各种网络协议下传输数据。它支持多种协议，包括但不限于 HTTP、HTTPS、FTP、FTPS、SCP、SFTP、SMTP、POP3、IMAP 等，这使得它在网络数据交互场景中有广泛的应用。curl可以模拟浏览器…...

编程日记 2025/5/14 12:36:13

Navicat 连接 SQL Server 详尽指南

Navicat 是一款功能强大的数据库管理工具，它提供了直观的图形界面，使用户能够轻松地管理和操作各种类型的数据库，包括 SQL Server。本文将详尽介绍如何使用 Navicat 连接到 SQL Server 数据库，包括安装设置、连接配置、常见问题排…...

编程日记 2025/5/14 8:14:33

黑马JavaWeb-day06、07、08（SQL部分） _

文章目录 MYSQL概述数据模型SQL简介SQL分类 DDL数据库操作表操作 DML增（INSERT）改（UPDATE）删（DELETE） DQL基本查询条件查询（where）分组查询（group by）排序查询…...

编程日记 2025/5/14 1:43:22

Redis（1）

Redis是一个在内存中存储数据的中间件。 1.在内存中存储数据。通过数据结构来存储，mysql通过表的方式存储数据，是关系型数据库，redis通过键值对存储，key的类型是string，value的类型是非关系型数据库。 2.可编程的 …...

编程日记 2025/5/13 20:52:57

工具类-列表请求工具 useList

useList 用于列表请求的基于 vue 3 的 hooks，接收请求函数、请求参数等数据，自动生成请求请求函数，分页信息等本文有涉及到 http 请求工具和接口返回格式的内容： http 工具：一个基于 axios 封装的请求工具Response…...

编程日记 2025/5/14 16:18:27

5G终端自动拔号脚本

5G终端自动拔号脚本 5G终端自动拔号脚本 5G终端自动拔号脚本， 先进入飞行模式，再切出飞行模式， 最后查询UE IP地址 5G终端自动拔号脚本 input$1 if [ "$input"x "1"x ]; then cmdatcfun1echo "start dialing &…...

编程日记 2025/5/10 4:02:30

3-1 C指针与数组

前言： 基于本人回顾与思考，仅供学习参考 1.0 数组名称的用途注：可以用于求数组占用的内存空间:sizeof(arrName);此时数组名称代表整个数组 int32 t buffer[5] {1,2,3,4,5};int32 t size sizeof(buffer);printf("sizeof(buffer) %d.\…...

编程日记 2025/5/10 15:31:47

步骤 1：导入 ReplayKit import ReplayKit步骤 2：开始录屏 let screenRecorder RPScreenRecorder.shared() // 麦克风或系统音频 screenRecorder.isMicrophoneEnabled truefunc startRecording() {guard screenRecorder.isAvailable else {print(&quo…...

编程日记 2025/5/14 15:48:41

Graphviz 的详细介绍

Graphviz 的详细介绍 Graphviz 是一个开源的图形可视化软件，专门用于生成结构化图形。它特别适合用于表示关系图、流程图、依赖关系图和树状结构等类型的图表。Graphviz 使用一种名为 DOT 的脚本语言描述图形，通过解析 DOT 文件生成图像。 Graphviz 的特…...

编程日记 2025/5/11 18:05:19

前端工程化

文章目录前端工程化模块化与组件化代码规范与风格统一自动化构建与部署性能优化版本控制与团队协作自动化测试前端工程化前端工程化是一种将软件工程的方法应用于前端开发的过程，旨在提高开发效率、降低维护成本、优化代码质量，并支持团队协作。以下…...

编程日记 2025/5/13 21:28:18

【LC】41. 缺失的第一个正数

题目描述： 给你一个未排序的整数数组 nums ，请你找出其中没有出现的最小的正整数。请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。示例 1： 输入：nums [1,2,0] 输出：3 解释：范围…...

编程日记 2025/5/7 3:19:39

高频面试题（含笔试高频算法整理）基本总结回顾29

干货分享，感谢您的阅读！ （暂存篇---后续会删除，完整版和持续更新见高频面试题基本总结回顾（含笔试高频算法整理）） 备注：引用请标注出处，同时存在的问题请在相关博客留言…...

编程日记 2025/5/14 15:16:27

Hive 的 Hook 机制完全解析

Hive 的 Hook 是一种扩展机制，允许用户在执行查询时自定义行为，例如日志记录、审计或其他操作。Hook 通常在 Hive 的生命周期中某些关键节点被触发，开发者可以插入自定义代码执行特定任务。一、Hook 的用途和核心概念 1. 用途审计&#x…...

编程日记 2025/5/14 15:52:03

远程debug

这里写自定义目录标题一、首先配置idea二、配置jvm1、将刚才idea生成的jvm指令复制下来，就是如下内容（注意要从你的idea中复制）2、在粘贴之前，要拼接上java-jar命令，还有servery,suspendy命令，最后拼接项目…...

编程日记 2025/5/14 15:39:27

一些常见网络安全术语

1、黑帽为非法目的进行黑客攻击的人，通常是为了经济利益。他们进入安全网络以销毁，赎回，修改或窃取数据，或使网络无法用于授权用户。这个名字来源于这样一个事实：老式的黑白西部电影中的恶棍很容易被电影观众识别&…...

编程日记 2025/5/14 15:29:07

golang学习，小结

切片切片，底层就是数组，len（切片的长度）和cap（容量，切片的空间） 从一个数组来得到切片，修改切片会修改原来的数组，数据会收到影响我们可以通过内置的 append 函数对一…...

编程日记 2025/5/14 15:24:28

【C++ map和set】数据的吟游诗：Map与Set的双城记

公主请阅 set1.序列式容器和关联式容器2.set的介绍3.set的构造和迭代器部分set可以进行去重操作的，在去重的同时可以对插入进来的数字进行排序的操作4.set的增删查inserterasefindupper_bound和 lower_bound 5.multiset和set的差异6相关题目349.两个数组的交集142.环…...

编程日记 2025/5/14 15:05:27

leetcode 之二分查找（java）（3）

文章目录 5. 81. 搜索旋转排序数组 II6. 378、有序矩阵中第k个小的元素 5. 81. 搜索旋转排序数组 II 题目描述： 已知存在一个按非降序排列的整数数组 nums ，数组中的值不必互不相同。在传递给函数之前，nums 在预先未知的某个下标 k&#…...

编程日记 2025/5/14 15:00:38

后端返回前端的数据量过大解决方案

后端返回前端的数据量过大解决方案性能面板(Performance) chrome调试指南原因遇到一个页面有好几个表格，部分表格采用虚拟滚动条数据量有点大接近快60s了，看一下是哪里导致的慢后台请求方法执行并不慢 2024-12-04 15:21:52.889 INFO 69948 …...

编程日记 2025/5/14 15:14:17

STL算法之其它算法_下

random_shuffle 这个算法将[first,last)的元素次序随机排列。也就说，在N!中可能的元素排列中随机选出一种，此处N为last-first。 N个元素的序列，其排列方式为N!中，random_shuffle会产生一个均匀分布，因此任何一个排列被…...

编程日记 2025/5/6 12:12:59

MySQL如何区分幻读和不可重复读

在MySQL中，幻读和不可重复读都是并发事务中可能出现的问题，但它们的表现和原因略有不同。不可重复读 (Non-Repeatable Read) 不可重复读是指在同一个事务内，多次读取同一行数据时，可能会得到不同的结果。这种情况发生在一个事务…...

编程日记 2025/5/14 15:07:31

html ul li 首页渲染多条数据但只展示八条，其余的数据全部隐藏，通过icon图标进行展示

<div style"float: left;" id"showMore"> 展开 </div> <div style"float: left;“id"hideLess"> 收起 </div> var data document.querySelectorAll(.allbox .item h3 a); const list document.querySelectorAl…...

编程日记 2025/5/8 0:54:08

Vue3安装运行教程

本文是综合了所有vue安装教程而成更细化更简略希望对各位读者有所帮助！ Vue安装 1. Vue-cli脚手架安装安装vue的方式有很多我们这里选择npm方式安装vue npm方式 npm方式安装vue，详细介绍见下文。 1.node.js安装和配置安装npm 需要安装note.js&…...

编程日记 2025/5/14 6:03:43

Spring事务的一道面试题

每次聊起Spring事务，好像很熟悉，又好像很陌生。本篇通过一道面试题和一些实践，来拆解几个Spring事务的常见坑点。原理 Spring事务的原理是：通过AOP切面的方式实现的，也就是通过代理模式去实现事务增强。具体过程是&a…...

编程日记 2025/5/14 15:09:37

PHP SM4 加密

PHP SM4 加密 sm4基类 class Sm4 {private $ck [0x00070e15, 0x1c232a31, 0x383f464d, 0x545b6269,0x70777e85, 0x8c939aa1, 0xa8afb6bd, 0xc4cbd2d9,0xe0e7eef5, 0xfc030a11, 0x181f262d, 0x343b4249,0x50575e65, 0x6c737a81, 0x888f969d, 0xa4abb2b9,0xc0c7ced5, 0xdce3ea…...

编程日记 2025/5/10 1:51:29

从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型

前言

一、盒子模型的组成

margin（外边距）：

border（边框）：

padding（内边距）：

content（内容）：

二、盒子内容区（content）

关于默认宽度

三、盒子内边距（padding）

四、盒子边框（border）

五、盒子外边距（margin）

1.margin 属性设置

2.margin 注意事项：

3.margin 塌陷问题：

4.margin 合并问题：

六、处理内容溢出

1. overflow属性介绍

2.visible（默认值）

3.hidden

4.scroll

5.auto

6.overflow-x和overflow-y属性

七、隐藏元素的方式

1.display: none;

2.visibility: hidden;

3.opacity: 0;

相关文章：