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

CSS 盒子模型（box model）

news 2026/4/3 7:22:18

概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。

蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。

就像快递，易碎品外面套一层泡沫，然后再到外层包裹一个箱子，层层包裹 。每个盒子就是为了让你在布局的时候变的更加好看。

就是让元素在页面上面摆放的时候更容易的调整位置和间距，因为内容和内容之间是需要间距的。

一个元素由自身，内边距和边框和外边距组成，来摆放蓝色框在页面中的位置了。

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

Content(内容)          盒子的内容，显示文本和图像 

内容文字图片是实物，然后内边距，边框，外边距。 

    <style>/*宽度和高度就是自身的大小，也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;}</style>
</head><body>
<div>
</div>

这个是页面中100*100的方块，这个就是内容的实际大小。

Padding(内边距)      清除内容周围的区域，内边距是透明的

设置padding之后盒子变大了，之前盒子多出来的部分就做内边距的空隙。如果盒子里面没有内容可以通过宽高来设定。

    <style>/*宽度和高度就是自身的大小，也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px;}</style>
</head><body>
<div>
</div>

 如果盒子里面有内容，就需要考虑摆放的样式了。

    <style>/*宽度和高度就是自身的大小，也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>

    <style>/*宽度和高度就是自身的大小，也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>

盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。为了是好看，不让内容贴着左上角去显示。内边距是撑大自身大小来给元素一些空隙，这样可以更加好的展示。

内容在盒子100px*100px的左上角，如果不希望有这样的空隙，那么就不需要设置内边距。

内边距主要作用是把自身撑大，但是本身的自身只有100px*100px。只是看起来像变大了。

padding一般分为两个值。上下是一个值，左右是一个值。上下是50px，左右是10px。按照双值来设定，上下为50px，第二个值为左右。

        div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>

Border(边框)            围绕在内边距和内容外的边框 

        div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>

 Margin(外边距)        清除边框外的区域

    <style>/*宽度和高度就是自身的大小，也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;margin: 100px;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>

<style>/*宽度和高度就是自身的大小，也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;margin: 100px;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
哈哈

当前内容的上下左右都有50px 忘记画右边的。这个也是元素与元素这件的空隙，也是让元素好看。 

 两个并没有挨宰一起，中间也有空隙，就是通过外边距处理的。margin也一样，有两个值，上下，左右。也可以指定一个方向的值。

相关文章：

CSS 盒子模型（box model）

概念 所有HTML元素可以看作盒子&#xff0c;在CSS中&#xff0c;"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素&#xff0c;它包括&#xff1a;外边距(margin)&#xff0c;边框(border)&#xff0c;内边距(pad…...

编程日记 2024/3/6 3:04:39

基于springboot+vue的在线考试系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…...

编程日记 2024/3/6 3:02:38

001 概述

什么是API API&#xff08;Application Programming Interface,应用程序编程接口&#xff09;是一些预先定义的函数&#xff0c;目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细节。为了…...

编程日记 2024/3/6 3:01:37

linux环境下nginx的配置文件

根据指定的域名进行反向代理转发&#xff0c;实现负载均衡 Nginx的upstream支持如下六种方式的分配算法&#xff0c;分别是&#xff1a; 轮询 默认方式 weight 权重方式 ip_hash 依据ip分配方式 least_conn 依据最少连接方式 url_hash 依据URL分配方式 fair 依据响应时间…...

编程日记 2024/3/6 3:00:36

AcWing:1236. 递增三元组

给定三个整数数组 A[A1,A2,…AN] B[B1,B2,…BN] C[C1,C2,…CN] 请你统计有多少个三元组 (i,j,k) 满足&#xff1a; 1≤i,j,k≤NAi<Bj<Ck 输入格式 第一行包含一个整数 N。 第二行包含 N 个整数 A1,A2,…AN。 第三行包含 N 个整数 B1,B2,…BN。 第四行包含 N 个整…...

编程日记 2024/3/6 2:58:34

关于并网继电器的继电器自检逻辑及实现方式

需求 对于常规的光伏并网逆变器来说&#xff0c;继电器控制至关重要。继电器一般位于逆变电感后&#xff0c;共模电感前&#xff0c;用于将逆变电压与电网电压脱开&#xff0c;一般国外有双继电器的安规强制认证要求&#xff0c;国内目前只需要单继电器要求&#xff08;后续应…...

编程日记 2024/3/6 2:57:33

Spring中的事务和事务的传播机制

事务是一组操作的集合&#xff0c;不可以被分割。事务会把所有的操作作为一个整体&#xff0c;这组操作要么全部成功&#xff0c;要么全部失败。 事务有三种操作&#xff1a; 开启事务&#xff1b;提交事务&#xff1b;回滚事务。 如果代码的执行逻辑是这样&#xff1a; 开…...

编程日记 2024/3/6 2:56:32

前端【技术类】资源学习网站整理（那些年的小网站）

学习网站整理 值得分享的视频博主&#xff1a;学习网站链接 百度首页的资源收藏里的截图&#xff08;排列顺序没有任何意义&#xff0c;随性而已~&#xff09;&#xff0c;可根据我标注的关键词百度搜索到这些网站呀&#xff0c;本篇末尾会一一列出来&#xff0c;供大家学习呀 …...

编程日记 2024/3/6 2:55:32

MySQL——存储引擎

存储引擎 InnoDB 是 MySQL 默认的存储引擎&#xff0c;只有在需要它不支持的特性时&#xff0c;才会考虑其他存储引擎 实现了 4 个标准的隔离级别&#xff0c;默认级别可重复度。在可重复度隔离级别下&#xff0c;通过 MVCC 间隙锁防止幻读 主索引是聚簇索引 内部做了很多…...

编程日记 2024/3/6 2:53:30

YoloV8改进策略：Block改进|MogaNet——高效的多阶门控聚合网络

文章目录 摘要论文：《MogaNet——高效的多阶门控聚合网络》1、简介2、相关工作2.1、视觉Transformers2.2、ViT时代的卷积网络3、从多阶博弈论交互的角度看表示瓶颈4、方法论4.1、MogaNet概述4.2、多阶门控聚合4.3、通过通道聚合进行多阶特征重新分配4.4、实现细节5、实验5.1、…...

编程日记 2024/3/6 2:52:29

关于vue3使用prop传动态参数时父子数据不同步更新问题

子: <template><div><h3>子组件</h3><input :value"modelValue" input"$emit(update:modelValue, $event.target.value)"></div> </template><script setup> import { defineProps, defineEmits } from …...

编程日记 2024/3/6 2:51:28

招投标系统：从线下招标到高效数字化

随着科技的不断进步&#xff0c;越来越多的企业开始意识到传统的线下招标方式存在的种种限制&#xff0c;并积极转向电子招投标系统。这一趋势的兴起不仅是数字化转型的必然选择&#xff0c;更是企业提高效率、降低成本的有效途径。 招投标系统的定义与作用 招投标系统是一种…...

编程日记 2024/3/6 2:47:24

day08_分类品牌管理商品规格管理商品管理

文章目录 1 分类品牌管理1.1 菜单添加1.2 表结构介绍1.3 页面制作1.4 品牌列表加载1.4.1 后端接口BrandControllerBrandServiceBrandMapperBrandMapper.xml 1.4.2 前端对接brand.jscategoryBrand.vue 1.5 分类数据加载1.6 列表查询1.6.1 需求说明1.6.2 后端接口需求分析Categor…...

编程日记 2024/3/6 2:45:22

手写分布式配置中心（二）实现分布式配置中心的简单版本

这一篇文章比较简单&#xff0c;就是一个增删改查的服务端和一个获取配置的客户端&#xff0c;旨在搭建一个简单的配置中心架构&#xff0c;代码在 https://gitee.com/summer-cat001/config-center 服务端 服务端选择用springboot 2.7.14搭建&#xff0c;设计了4个接口/confi…...

编程日记 2024/3/6 2:44:21

跨境知识分享：什么是动态IP？和静态IP有什么区别？

对于我们跨境人来说&#xff0c;清楚地了解IP地址、代理IP等这些基础知识&#xff0c;并学会正确地使用IP地址对于保障店铺的安全性和稳定性至关重要&#xff0c;尤其是理解动态IP和静态IP之间的区别&#xff0c;以及如何利用这些知识来防止账号关联&#xff0c;对于每个电商卖…...

编程日记 2024/3/6 2:43:20

liunx安装jdk、redis、nginx

jdk安装 下载jdk,解压。 sudo tar -zxvf /usr/local/jdk-8u321-linux-x64.tar.gz -C /usr/local/ 在/etc/profile文件中的&#xff0c;我们只需要编辑一下&#xff0c;在文件的最后加上java变量的有关配置&#xff08;其他内容不要动&#xff09;。 export JAVA_HOME/usr/l…...

编程日记 2024/3/6 2:42:19

【C++】STL学习之旅——初识STL，认识string类

string类 1 STL 简介2 STL怎么学习3 STL缺陷4 string4.1 初识 string4.2 初步使用构造函数成员函数 5 小试牛刀Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 1 STL 简介 …...

编程日记 2024/3/6 2:41:18

Java学习笔记002——类的修饰符

在Java语言中&#xff0c;类的访问修饰符决定了其它类能够访问该类的方式。类有如下4种访问修饰符&#xff0c;在创建类时用于类的声明&#xff1a; 1、public: 当一个类被声明为public时&#xff0c;它可以从任何其他类中被访问&#xff0c;无论这些类位于哪个包中。通常&am…...

编程日记 2024/3/6 2:40:16

华为交换机常见命令总结

文章目录 查看MAC地址清除MAC地址修改MAC地址的老化时间查询STP信息查询接口与vlan的信息 查看MAC地址 查看所有MAC地址表项 display mac-address 查看静态MAC地址表项 display mac-address static //会把动态的过滤掉 查看动态MAC地址表项 display mac-address dynamic //会…...

编程日记 2024/3/6 2:39:15

Android 签名机制

V1是内部文件单个签 但是增加apk文件目录下面随意增加文件并不会有影响,它只关心meta-info文件 mf汇总清单的各个文件sha256 V2 整个APK文件,按文件进行hash 那么便不能随便在这里面增加文件了,增加了签名分块&#xff08;不然签名信息存哪里&#xff09;这里涉及一个文件概念 …...

编程日记 2024/3/6 2:38:15

AI时代，普通人必须知道的10个法律与版权风险

生成式AI的法律风险未经授权使用受版权保护的数据训练AI模型可能引发侵权诉讼。AI生成内容若与原创作品高度相似&#xff0c;可能被判定为抄袭。深度伪造与肖像权利用AI换脸或合成声音可能侵犯他人肖像权、名誉权。未经许可使用公众人物形象牟利&#xff0c;可能面临高额赔偿。…...

编程新知 2026/4/3 5:52:58

内存占用直降68%？揭秘头部金融科技公司Python服务的成本控制策略，含可落地的12个代码级优化checklist

第一章&#xff1a;Python 智能体内存管理策略Python 的内存管理并非由开发者手动控制&#xff0c;而是通过一套高度自动化的智能体机制协同运作&#xff0c;核心包括引用计数、循环垃圾回收器&#xff08;gc 模块&#xff09;和内存池&#xff08;pymalloc&#xff09;三层结构…...

编程新知 2026/4/3 5:50:56

Kandinsky-5.0-I2V-Lite-5s性能调优教程：采样步数24平衡效率与质量实测

Kandinsky-5.0-I2V-Lite-5s性能调优教程&#xff1a;采样步数24平衡效率与质量实测 1. 模型简介与核心能力 Kandinsky-5.0-I2V-Lite-5s是一款专为单卡环境优化的轻量级图生视频模型。它能够将静态图片转化为约5秒时长的动态视频&#xff08;24fps&#xff09;&#xff0c;只需…...

编程新知 2026/4/3 5:46:54

OpenClaw社区贡献指南：为Qwen3-14b_int4_awq开发并分享自定义技能

OpenClaw社区贡献指南&#xff1a;为Qwen3-14b_int4_awq开发并分享自定义技能 1. 为什么我们需要更多社区技能 上周我尝试用OpenClaw自动整理电脑里堆积如山的PDF论文时&#xff0c;发现现有的文件处理技能无法识别某些特殊格式的学术文献。这个痛点让我意识到&#xff1a;Op…...

编程新知 2026/4/3 5:26:22

探索NextDNS Config：优化你的DNS配置以提升网络性能

探索NextDNS Config&#xff1a;优化你的DNS配置以提升网络性能 是一个开源项目&#xff0c;旨在帮助用户轻松地管理并优化其设备上的NextDNS设置。该项目由Yokoffing开发&#xff0c;并提供了多种平台&#xff08;包括路由器、Android和iOS&#xff09;的配置文件&#xff0c;…...

编程新知 2026/4/3 4:23:28

百考通：AI精准赋能任务书生成，让科研与项目启动更高效

在学术研究、课程设计与项目开发的起步阶段&#xff0c;一份规范、清晰的任务书是指引方向的核心纲领。但从选题构思到内容撰写&#xff0c;往往让研究者与学生陷入困境&#xff1a;选题迷茫、逻辑混乱、要求表述模糊&#xff0c;严重拖慢项目推进节奏。百考通&#xff08;http…...

编程新知 2026/4/3 2:11:38

ThinkLink+EdgeBus 将建大仁科的氧传感器接入到LoRaWAN系统

传统 RS485 传感器&#xff0c;也能快速接入 LoRaWAN 系统很多项目现场&#xff0c;其实已经部署了不少成熟可用的传感器。 问题往往不在于“传感器能不能测”&#xff0c;而在于&#xff1a;怎样把这些传统传感器&#xff0c;快速接入 LoRaWAN 和上层业务系统&#xff1f;以 R…...

编程新知 2026/4/3 2:01:22

郭老师-永远要跟认知比你高的人在一起

永远要跟认知比你高的人在一起 ——从高人身上汲取智慧“你跟什么样的人在一起&#xff0c; 比你做什么样的事情重要得多。” ——巴菲特&#x1f33f; 真正的成长&#xff0c; 不是埋头苦干&#xff0c; 而是—— 站在巨人的肩膀上看世界。&#x1f52d; 一、认知高的人&#…...

编程新知 2026/4/3 0:48:35

iarduino MB-Socket嵌入式Modbus控制库详解

1. 项目概述iarduino_MB_Socket是一款专为 iarduino 系列智能插座硬件设计的嵌入式 Modbus 通信库&#xff0c;面向基于 Arduino 架构的 MCU&#xff08;如 ATmega328P、ATmega2560、ESP32 等&#xff09;平台。该库不依赖特定操作系统&#xff0c;可在裸机环境或 FreeRTOS/Ard…...

编程新知 2026/4/3 0:42:32

计算机毕业设计springboot展会门票系统 基于SpringBoot的会展票务数字化服务平台 SpringBoot框架下的博览会入场券预约与核销系统

计算机毕业设计springboot展会门票系统 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着会展经济的蓬勃发展和数字化转型的深入推进&#xff0c;各类展会活动规模不断扩大&am…...

编程新知 2026/4/2 23:16:58