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

CSS 盒子模型（box model）

news 2025/11/13 2:50:20

概念

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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/10/31 0:43:35

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/11/8 7:31:37

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/11/12 11:25:56

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/11/11 2:23:05

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/11/12 9:47:25

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2025/11/9 12:30:36