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

CSS的盒子模型（Box Model)

news 2025/11/6 1:05:06

所有HTML元素都可以看作盒子，在CSS中盒子模型是用来设计和布局的，CSS盒子模型本质上是一个盒子，分装周围的HTML元素包括：外边距，边框，内边距和实际内容。

Margin（外边距）

清除边框外的区域，外边距是透明的。

Border（边框）

围绕在内边距和内容外的边框。

Padding（内边距）

清楚内容周围的区域。

Content（内容）

盒子的内容，显示文本图像。

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于实物部分，内边距等同于盒子中的泡沫，边框等同于快递盒子，外边距等同于快递与快递之间的距离。

例：

首先添加内容

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div class="continer"></div>
</body>

添加内边距

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/}</style>
</head>
<body><div class="continer"></div>
</body>

注：可以通过使用padding-left/right/top/bottom来实现单个边距的添加。

添加边框

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/}</style>
</head>
<body><div class="continer"></div>
</body>

添加外边距

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/margin: 100px 100px;/*第一个值表示上下外边距的大小，第二个值表示左右边距的大小*/ }</style>
</head>
<body><div class="continer"></div>
</body>

注：可以使用margin-left/right/top/bottom来单个更改某一边距离。

CSS的盒子模型（Box Model)

所有HTML元素都可以看作盒子，在CSS中盒子模型是用来设计和布局的，CSS盒子模型本质上是一个盒子，分装周围的HTML元素包括：外边距，边框，内边距和实际内容。 Margin（外边距） 清除边框…...

编程日记 2024/9/25 16:07:54

1 创建PKI结构目录 mkdir 07_PKI cd 07_PKI mkdir 01_RootCA 02_SubCA 03_Client2 创建根CA cd 01_RootCA mkdir key csr cert newcerts touch index.txt index.txt.attr echo 01 > serial2.1 创建根CA密钥对 2.1.1 生成长度为2048 bit 的RSA私钥。 cd key openssl gen…...

编程日记 2024/9/25 16:06:52

scp 命令：在两台主机间远程传输文件

一、命令简介 scp 命令使用 SSH 加密的方式在本地主机和远程主机之间复制文件。 ‍ 二、命令参数格式 scp [选项] 发送方主机和目录接收方主机和目录注意：左边是发送方，右边是接收方。固定格式。示例 #示例1 scp ~/test.txt soulio172.1…...

编程日记 2024/9/25 16:05:51

家用迷你洗衣机哪款质量高？五大热销高分单品强势来袭

迷你内衣洗衣机一般是为婴儿宝宝，或者一些有特殊需要的用户而设计使用的，宝宝衣物换洗频繁，而且对卫生方面的除菌要求高，而为避免交叉感染，所以一般不适合和大人的衣物放在一起洗，因此对于有宝宝的家庭来说…...

编程日记 2024/9/25 16:04:50

rpm 命令：RedHat底层包管理器

一、命令简介 rpm 是 Red Hat Package Manager 的缩写，是 Red Hat、CentOS、Fedora 等基于 Red Hat 的 Linux 发行版中用于管理和安装软件包的工具。它能够安装、卸载、升级、查询和验证软件包。相关命令： rpm 是基础，提供了底层的软…...

编程日记 2024/9/25 16:03:49

Xilinx 使用DDS实现本振混频上下变频

文章目录一、什么是混频？二、为什么要进行混频？三、Matlab实现混频操作四、FPGA实现混频上下变频操作4.1 例化IP4.2 仿真验证一、什么是混频？ 混频（Mixing）是信号处理中的一个核心概念，混频的本质是将两个…...

编程日记 2024/9/25 16:01:47

ClickHouse-Kafka Engine 正确的使用方式

Kafka 是大数据领域非常流行的一款分布式消息中间件，是实时计算中必不可少的一环，同时一款 OLAP 系统能否对接 Kafka 也算是考量是否具备流批一体的衡量指标之一。ClickHouse 的 Kafka 表引擎能够直接与 Kafka 系统对接，进而订阅 Kafka 中的 …...

编程日记 2024/9/25 16:00:45

PTA L1-071 前世档案

L1-071 前世档案（20分） 网络世界中时常会遇到这类滑稽的算命小程序，实现原理很简单，随便设计几个问题，根据玩家对每个问题的回答选择一条判断树中的路径（如下图所示），结论就是路径终…...

编程日记 2024/9/25 15:58:41

解决mac下 Android Studio gradle 下载很慢，如何手动配置

抓住人生中的一分一秒，胜过虚度中的一月一年! 小做个动图开篇引题前言平时我们clone git 上项目，项目对应gradle版本本地没有，ide编译会自动下载，但是超级慢可能还下载失败，下面讲解下此问题如如下图所示&#xff…...

编程日记 2024/9/25 15:55:37

第三篇第17章工程计量与支付

第三篇工程计价第17章工程计量与支付 17.1 工程计量 17.1.1 工程计量的原则承包人完成合同工程且应予计量的工程数量确定计量周期可以月为单位,也可以按其他时间节点、工程形象进度分段计量因承包人原因造成的超出合同工程范围施工或返工的工程量、发包人不予计量 17.1…...

编程日记 2024/9/25 15:54:36

[半导体检测-1]：半导体检测概述

前言： 半导体检测是半导体产业链中不可或缺的一环，它贯穿于产品生产制造流程的始终，对于提高产线良率、提升产品竞争实力具有关键作用。以下是对半导体检测的详细概述： 一、什么是半导体检测半导体检测是指运用专业技术手段&a…...

编程日记 2024/9/25 15:53:35

公共字段自动填充

问题分析总会有些公共字段，例如创建时间和创建人实现思路对mapper定义注解，使用切面思想来判断是不是更新和新增操作对于指定的操作来更新公共字段自定义操作类型 package com.sky.enumeration;/*** 数据库操作类型*/ public enum OperationType {/*…...

编程日记 2024/9/25 15:49:30

超详细 Git 教程：二十篇博客，三万字干货

Git 是最流行的版本管理工具，可以说是任何程序员都应该掌握的工具。当然，其他人也可以学习它用来进行版本控制为此，我将之前学习 Git 时的笔记整理了下（预计有二十篇），作为博客发出来，希望能帮…...

编程日记 2024/9/25 15:48:21

“出参”和“入参”的命名由来

有些开发者会用“入参”和“出参”来描述函数、方法或接口的参数和返回值。尽管我们基本都知道“入参”就是方法的参数，“出参”就是返回值。但是对于一些起步就是JAVA的开发者来说，可能并不清楚这两个名词的由来。这篇文章就来分享一下关于“入参”和“…...

编程日记 2024/9/25 15:47:12

webrtc gclient sync报错问题解决

报错信息 strp_current_url current_url[:-4] if current_url.endswith( ^^^^^^^^^^^^^^^^^^^^ AttributeError: ‘NoneType’ object has no attribute ‘endswith’ gclient syncsrc/base (ERROR) ---------------------------------------- [0:00:00] Started. ----------…...

编程日记 2024/9/25 15:46:10

FLUX模型，或许这几点你还未曾都了解，最详细的Flux模型介绍（附模型安装包）

当我们还在沉浸在惊叹和体验快手的Kolors模型之时，SD原开发团队组成的“黑森林”出的FLUX模型就袭来了。我们不得不感叹FLUX模型给我们带来的冲击，模型所绘制的画面质感、精细度的确让我们眼前一亮，之前发布的SD3开源模型给我们带来的些许失落…...

编程日记 2024/9/25 15:45:09

RAG(Retrieval-Augmented Generation)检索增强生成技术基础了解学习与实践

RAG（Retrieval-Augmented Generation）是一种结合了信息检索（Retrieval）和生成模型（Generation）的技术，旨在提高生成模型的性能和准确性。RAG 技术通过在生成过程中引入外部知识库，使…...

编程日记 2024/9/25 15:44:08

基于SpringBoot实现高性能缓存组件

1. 简介为了体现我们的实力，首先我们要有造轮子的能力。这意味着我们不仅要熟练掌握现有的技术栈和框架，还要具备深厚的技术功底。通过自主设计和实现关键组件，如高性能缓存系统，我们能够深入理解技术背后的原理，掌握…...

编程日记 2024/9/25 15:42:05

【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN) 详细理解并附实现代码。

【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN) 【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN) 文章目录【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN)1.算法原理介绍：递归神经网络 (Recurrent…...

编程日记 2024/9/25 15:41:04

python全栈学习记录（十九） hashlib、shutil和tarfile、configparser

hashlib、shutil和tarfile、configparser 文章目录 hashlib、shutil和tarfile、configparser一、hashlib二、shutil和tarfile1.shutil2.tarfile 三、configparser 一、hashlib hash是一种算法，该算法接受传入的内容，经过运算得到一串hash值。如果把hash…...

编程日记 2024/9/25 15:40:02

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现题目链接：3576. Transform Array to All Equal Elements 1. 解题思路这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤运行安装程序： 双击下载的.exe安装文件如果出现安全提示&…...

编程新知 2025/10/26 7:38:50

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建前言如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...

编程新知 2025/10/31 0:51:40

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性本论文优点：（1）在ALOHA…...

编程新知 2025/11/3 6:01:45

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

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

编程新知 2025/9/12 22:46:10