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

CSS的盒子模型（Box Model)

news 2026/2/1 20:20: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元素都可以看作盒子&#xff0c;在CSS中盒子模型是用来设计和布局的&#xff0c;CSS盒子模型本质上是一个盒子&#xff0c;分装周围的HTML元素包括&#xff1a;外边距&#xff0c;边框&#xff0c;内边距和实际内容。 Margin&#xff08;外边距&#xff09; 清除边框…...

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

用OpenSSL搭建PKI证书体系

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 [选项] 发送方主机和目录 接收方主机和目录注意&#xff1a;左边是发送方&#xff0c;右边是接收方。固定格式。 示例 #示例1 scp ~/test.txt soulio172.1…...

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

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

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

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

rpm 命令：RedHat底层包管理器

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

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

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

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

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

ClickHouse-Kafka Engine 正确的使用方式

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

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

PTA L1-071 前世档案

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

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

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

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

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

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

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

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

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

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

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

公共字段自动填充

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

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

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

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

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

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

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

编程日记 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模型之时&#xff0c;SD原开发团队组成的“黑森林”出的FLUX模型就袭来了。我们不得不感叹FLUX模型给我们带来的冲击&#xff0c;模型所绘制的画面质感、精细度的确让我们眼前一亮&#xff0c;之前发布的SD3开源模型给我们带来的些许失落…...

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

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

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

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

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

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

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

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

【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN) 【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN) 文章目录 【深度学习基础模型】递归神经网络 (Recurrent Neural Networks, RNN)1.算法原理介绍&#xff1a;递归神经网络 (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是一种算法&#xff0c;该算法接受传入的内容&#xff0c;经过运算得到一串hash值。如果把hash…...

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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/1/26 22:27:53

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/1/26 20:39:53

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24