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

CSS 盒子模型（box model）

news 2026/4/3 5:44:21

概念

所有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

Pixel Couplet Gen快速上手：三步完成像素春联生成器本地部署与微信小程序对接

Pixel Couplet Gen快速上手&#xff1a;三步完成像素春联生成器本地部署与微信小程序对接 1. 项目概览 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成器。通过ModelScope大模型驱动&#xff0c;它能够将用户输入的文字愿望转化为富有创意的像素风格…...

编程新知 2026/4/3 5:18:13

Python 闭包与装饰器

在 Python 学习中&#xff0c;闭包和装饰器是两个既关联又容易混淆的知识点&#xff0c;尤其是结合嵌套函数使用时&#xff0c;常常分不清执行逻辑。但其实只要抓住核心原理&#xff0c;再结合简单案例拆解&#xff0c;就能轻松掌握。 一、前置回顾&#xff1a;函数与局部变量的…...

编程新知 2026/4/3 4:57:59

OpenClaw备份方案：Qwen2.5-VL-7B技能与配置的定期同步

OpenClaw备份方案&#xff1a;Qwen2.5-VL-7B技能与配置的定期同步 1. 为什么需要备份OpenClaw系统 上周我的开发机突然蓝屏&#xff0c;硬盘分区表损坏。当我重装系统后&#xff0c;发现过去三个月精心调教的OpenClaw配置全部丢失——包括调试好的技能参数、对接的飞书机器人…...

编程新知 2026/4/3 4:53:56

OpenClaw定时任务：千问3.5-9B实现每日自动化巡检

OpenClaw定时任务&#xff1a;千问3.5-9B实现每日自动化巡检 1. 为什么需要自动化巡检 去年接手一个长期维护的Python项目时&#xff0c;我每天早晨都要手动检查服务器状态、数据库连接、日志错误和依赖库版本。这种重复劳动不仅耗时&#xff0c;还容易遗漏关键指标。直到发现…...

编程新知 2026/4/3 4:37:45

Elasticsearch-PHP异步搜索终极指南：如何实现高性能搜索应用

Elasticsearch-PHP异步搜索终极指南&#xff1a;如何实现高性能搜索应用 【免费下载链接】elasticsearch-php Official PHP client for Elasticsearch. 项目地址: https://gitcode.com/gh_mirrors/el/elasticsearch-php Elasticsearch-PHP是官方PHP客户端&#xff0c;为…...

编程新知 2026/4/3 4:07:18

OpenClaw低代码开发：Qwen2.5-VL-7B自动化流程设计器入门

OpenClaw低代码开发&#xff1a;Qwen2.5-VL-7B自动化流程设计器入门 1. 为什么需要可视化流程设计器&#xff1f; 上周我尝试用OpenClaw自动处理一批产品截图和说明文档时&#xff0c;遇到了一个典型问题&#xff1a;需要先让Qwen2.5-VL-7B识别图片中的关键元素&#xff0c;再…...

编程新知 2026/4/3 1:49:11

NineData SQL AI 智能补全上线：写 SQL，不必每次都从头敲

写 SQL 的人&#xff0c;大概都遇到过这种情况&#xff1a; 明明脑子里已经知道要查什么&#xff0c;但真正开始写的时候&#xff0c;还是得一点点补关键字、补表名、补字段、补语句结构。越是多表查询、长 SQL、复杂条件&#xff0c;越容易写得慢、改得烦&#xff0c;还容易漏…...

编程新知 2026/4/2 23:57:57

2026最权威的五大AI辅助写作神器解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 随着人工智能技术发展得格外迅猛&#xff0c;学术领域对于AI相关论文的需求增长得越来越快。…...

编程新知 2026/4/2 23:45:36

别再只用Chat了！深度挖掘Cursor的‘规则’与‘上下文’功能，打造你的专属AI编程助手

解锁Cursor的隐藏力量&#xff1a;从代码助手到项目级智能架构师 在AI编程工具爆发的时代&#xff0c;大多数开发者仅仅停留在基础对话和代码补全的层面。但Cursor的真正价值远不止于此——它能够成为你项目架构的智能协作者、团队规范的自动化执行者&#xff0c;以及复杂工程问…...

编程新知 2026/4/2 23:00:52

新手必看：用Wireshark分析CTF流量题，手把手教你从抓包到找到Flag

从零玩转Wireshark&#xff1a;CTF流量分析实战指南 第一次打开Wireshark时&#xff0c;满屏跳动的数据包就像天书一样让人头晕目眩。但别担心&#xff0c;每个网络安全高手都曾经历过这个阶段。本文将带你走进CTF流量分析的世界&#xff0c;从最基础的Wireshark操作开始&#…...

编程新知 2026/4/2 22:11:45