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

CSS盒子模型(HTML元素布局)

news 2026/2/9 20:31:26

CSS盒子模型是一种用于描述HTML元素布局的模型，它将每个元素看作是一个矩形的盒子，每个盒子由内容、内边距、边框和外边距组成。

盒子模型包括以下几个部分：

  1. 内容区域（Content）
    内容区域是盒子中实际显示内容的部分，比如文本、图片等。

  2. 内边距区域（Padding）
    内边距是内容区域与边框之间的空白区域，用于控制内容与边框的距离。

  3. 边框区域（Border）
    边框是包围内容和内边距的线条或样式，用于定义元素的边界。

  4. 外边距区域（Margin）
    外边距是边框与相邻元素之间的空白区域，用于控制元素与其他元素的距离。

盒子模型的总宽度（Width）计算公式为：
总宽度 = 左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距

盒子模型的总高度（Height）计算公式为：
总高度 = 上外边距 + 上边框 + 上内边距 + 高度 + 下内边距 + 下边框 + 下外边距

CSS中可以通过box-sizing属性来指定盒子的尺寸计算方式，常用的取值包括：

  1. content-box（默认值）：
    总宽度和总高度仅包含内容区域的尺寸，不包括内边距和边框。

  2. border-box：
    总宽度和总高度包括内容区域、内边距和边框的尺寸，内容区域的尺寸会自动适应减去内边距和边框的空间。

通过设置不同的盒子模型属性，可以控制元素的定位、大小和间距，从而实现灵活的页面布局和样式设计。

 下面是一个简单的CSS代码示例，演示如何使用CSS盒子模型的各个部分：

<!DOCTYPE html>
<html>
<head><style>.box {width: 200px;height: 150px;margin: 20px;padding: 10px;border: 1px solid #000;}</style>
</head>
<body><div class="box">This is the content of the box.</div>
</body>
</html>

在上面的示例中，我们创建了一个 <div> 元素，并为其添加了一个类名 .box。然后，通过CSS样式来定义.box这个类的样式。

在.box的样式中：

  • width 设置为 200px，表示盒子的宽度为200像素。
  • height 设置为 150px，表示盒子的高度为150像素。
  • margin 设置为 20px，表示盒子的外边距为20像素，这将在盒子外部创建一个空白区域。
  • padding 设置为 10px，表示盒子的内边距为10像素，这将在内容和边框之间创建一个空白区域。
  • border 设置为 1px solid #000，表示盒子的边框为1像素宽的黑色边框。

在 <div class="box"> 中添加了文本 “This is the content of the box.”，作为盒子的内容。

通过这些样式设置，我们可以看到盒子的布局效果：宽度为200px，高度为150px，外边距为20px，内边距为10px，边框为1像素的黑色边框。内容位于内边距内部。

您可以将上述代码复制到一个HTML文件中，并在浏览器中查看结果。这将展示CSS盒子模型的基本概念和效果。

<!DOCTYPE html>
<html>
<head><style>.box {width: 200px;height: 150px;margin: 20px;padding: 10px;border: 1px solid #000;}.content {background-color: #f0f0f0;height: 100%;padding: 10px;}</style>
</head>
<body><div class="box"><div class="content">This is the content of the box.</div></div>
</body>
</html>

在上面的代码示例中，我们创建了一个具有两个嵌套 <div> 元素的盒子模型。其中，外部 <div> 元素具有类名 .box，内部 <div> 元素具有类名 .content。

在CSS样式中，我们为.box定义了宽度、高度、外边距、内边距和边框。.content类定义了背景颜色、高度和内边距。

现在，让我们来详细解释样式属性的作用：

  • .box 类：

    • width: 200px;：将盒子的宽度设置为200像素。
    • height: 150px;：将盒子的高度设置为150像素。
    • margin: 20px;：设置外边距为20像素，将在盒子周围创建一个空白区域。
    • padding: 10px;：设置内边距为10像素，将在内容和边框之间创建一个空白区域。
    • border: 1px solid #000;：设置边框为1像素宽的黑色边框。

  • .content 类：

    • background-color: #f0f0f0;：将背景颜色设置为浅灰色。
    • height: 100%;：将内部内容区域的高度设置为与父元素（.box）相等，以使用所有可用空间。
    • padding: 10px;：设置内边距为10像素，使内容与内部边框之间有一段空白。

在这个演示中，我们创建了一个具有固定宽度和高度的盒子，它具有外边距、内边距和边框。内部的内容区域使用了剩余的空间，并具有自己的背景颜色和内边距。

您可以将上述代码复制到一个HTML文件中，并在浏览器中查看结果。这将展示CSS盒子模型的各个部分如何相互作用，影响盒子的布局和样式。

相关文章：

CSS盒子模型(HTML元素布局)

CSS盒子模型是一种用于描述HTML元素布局的模型&#xff0c;它将每个元素看作是一个矩形的盒子&#xff0c;每个盒子由内容、内边距、边框和外边距组成。 盒子模型包括以下几个部分&#xff1a; 内容区域&#xff08;Content&#xff09; 内容区域是盒子中实际显示内容的部分&am…...

编程日记 2023/7/30 2:51:46

PostgreSQL-Centos7源码安装

卸载服务器上的pg13 本来是想删除原来的postgis重新源码安装就行，但是yum安装的PostgreSQL不能直接使用，会提示以下问题： 之前服务是用yum安装的，现在需要删除 -- 删除数据的postgis插件 drop extension postgis; drop extension postgis cascade;删除相关安装包 # 查询…...

编程日记 2023/7/30 2:50:45

QTday2信号和槽

点击登录按钮,关闭Widget登录窗口,打开QQList窗口 widget.cpp #include "widget.h"void my_setupUI(Widget *w);Widget::Widget(QWidget *parent): QWidget(parent) {my_setupUI(this); }Widget::~Widget() { }void Widget::login_slots() {//fixemit jump_signal(…...

编程日记 2023/7/30 2:49:44

信驰达推出RTL8720DN系列2.4G和5G双频Wi-Fi+蓝牙二合一模块

近日&#xff0c;领先的无线物联网通信模块厂商深圳信驰达科技RF-star推出了基于RTL8720DN SoC的2.4 GHz和5 GHz双频Wi-Fi蓝牙二合一模块—RF-WM-20DNB1。 图 1信驰达RF-WM-20DNB1 Wi-Fi模块 RF-WM-20DNB1是一款低功耗单芯片无线蓝牙和Wi-Fi组合模块&#xff0c;支持双频(2.4 G…...

编程日记 2023/7/30 2:48:42

【LeetCode】剑指 Offer Ⅱ 第1章：整数（5道题） -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 001. 整数除法快速除 ⭐剑指 Offer II 002. 二进制加法模拟&#xff1a;StringBuilder ⭐剑指 Offer II 003. 前 n 个数字二进制中 1 的个数动规&#xff1a;res[i] res[i & (…...

编程日记 2023/7/30 2:47:39

解析数据可视化工具：如何选择最合适的软件

在当今信息爆炸的时代&#xff0c;数据已成为各行各业的重要资源。为了更好地理解和分析数据&#xff0c;数据可视化成为一种必不可少的工具。市面上数据可视化工具不说上千也有上百&#xff0c;什么帆软、powerbi、把阿里datav&#xff0c;腾讯云图、山海鲸可视化等等等等&…...

编程日记 2023/7/30 2:46:36

大数据面试题之Elasticsearch:每日三题(七)

大数据面试题之Elasticsearch:每日三题 1.Elasticsearch索引文档的流程&#xff1f;2.Elasticsearch更新和删除文档的流程&#xff1f;3.Elasticsearch搜索的流程&#xff1f; 1.Elasticsearch索引文档的流程&#xff1f; 协调节点默认使用文档ID参与计算(也支持通过routing)&a…...

编程日记 2023/7/30 2:45:34

ubuntu20.04 安装 Qt5.15

目录 安装前工作 选择安装QT的哪个版本 安装时候选择哪些组件 安装Qt5.15 在线安装 我选择的组件 源码包安装 测试 安装前工作 ubuntu20.04.3安装Qt6.22操作步骤_ubuntu安装qt6_sonicss的博客-CSDN博客 # 安装g、gcc编译器 sudo apt-get install build-essential 安装l…...

编程日记 2023/7/30 2:44:33

web之标签元素转换成图片、a标签元素下载图片、获取浏览器窗口名称、重命名、元素定位、旋转、拉伸文字、文字向心对齐

文章目录 准备版本二的效果图版本一htmlJavaScript 版本二htmlJavaScript 准备 NPM下载指令 npm install dom-to-image框架加载 in ES6 import domtoimage from dom-to-image;in ES5 var domtoimage require(dom-to-image);CDN(标签)加载 案例 <script src"dist/dom…...

编程日记 2023/7/30 2:43:32

你应该知道的关于PCB布线的31条建议

1、走线长度应包含过孔和封装焊盘的长度。 2、布线角度优选135角出线方式&#xff0c;任意角度出线会导致制版出现工艺问题。 图1 PCB布线的角度 3、布线避免直角或者锐角布线&#xff0c;导致转角位置线宽变化&#xff0c;阻抗变化&#xff0c;造成信号反射&#xff0c;如图2…...

编程日记 2023/7/30 2:42:30

matlab中dir的各种使用方法（包括递归遍历子文件夹）

遍历文件夹1下的所有文件夹和文件&#xff08;不会递归遍历&#xff09;&#xff1a; listdir(’ D:\文件夹1’);遍历文件夹1及其所有子文件夹下的所有文件夹和文件&#xff08;会递归遍历&#xff09;&#xff1a; listdir(’ D:\文件夹1\** );遍历文件夹1下的所有csv文件&…...

编程日记 2023/7/30 2:41:28

软件测试/测试开发丨Selenium环境安装与使用

Selenium 官方网站&#xff1a; www.selenium.dev/ 简介&#xff1a; 用于web浏览器测试的工具&#xff1b;支持的浏览器包括IE&#xff0c;Firefox&#xff0c;Safari&#xff0c;Chrome&#xff0c;Edge等&#xff1b;使用简单&#xff0c;可使用Java&#xff0c;Python等…...

编程日记 2023/7/30 2:40:27

WPF实战学习笔记15-使用Memo类的GetAll接口

使用Memo类的GetAll接口 总体参照上节即可 创建MemoService接口 新建文件Mytodo/Service/IMemoService.cs using MyToDo.Share.Models; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace M…...

编程日记 2023/7/30 2:39:26

算法与数据结构-二分查找

文章目录 什么是二分查找二分查找的时间复杂度二分查找的代码实现简单实现&#xff1a;不重复有序数组查找目标值变体实现&#xff1a;查找第一个值等于给定值的元素变体实现&#xff1a;查找最后一个值等于给定值的元素变体实现&#xff1a;查找最后一个小于给定值的元素变体实…...

编程日记 2023/7/30 2:38:25

【软件测试】什么是selenium

1.seleniumJava环境搭建 前置条件: Java最低版本要求为8,浏览器使用chrome浏览器 1.1下载chrome浏览器 https://www.google.cn/chrome/ 1.2查看浏览器版本 点击关于Google chrome. 记住版本的前三个数. 1.3下载浏览器驱动 http://chromedriver.chromium.org/downloads 下载…...

编程日记 2023/7/30 2:37:22

redis线程模型

文章目录 一、redis单线程模型1.1 为什么redis命令处理是单线程&#xff0c;而不采用多线程1.2 单线程的局限及redis的优化方式 二、redis单线程为什么这么快2.1 采用的机制2.2 优化的措施 三、redis的IO多线程模型3.1 redis 为什么引入IO多线程模型3.2 配置io-threads-do-read…...

编程日记 2023/7/30 2:36:19

【idea工具】idea工具，build的时候提示:程序包 com.xxx.xx不存在的错误

idea工具&#xff0c;build的时候提示:程序包 com.xxx.xx不存在的错误&#xff0c;如下图&#xff0c;折腾了好一会&#xff0c; 做了如下操作还是不行&#xff0c;idea工具编译的时候&#xff0c;还是提示 程序包不存在。 a. idea中&#xff0c;重新导入项目&#xff0c;也还…...

编程日记 2023/7/30 2:35:17

线性代数——特征值和特征向量

系列文章目录 线性代数——行列式线性代数——矩阵线性代数——向量线性代数——线性方程组线性代数——特征值和特征向量线性代数——二次型 文章目录 系列文章目录版权声明补充知识求和公式的性质常用希腊字符读音 特征值和特征向量相似矩阵相似对角化实对称矩阵 版权声明 …...

编程日记 2023/7/30 2:34:16

运筹系列83：使用分枝定界求解tsp问题

1. 辅助函数 Node算子用来存储搜索树的状态。其中level等于path的长度&#xff0c;path是当前节点已经访问过的vertex清单&#xff0c;bound则是当前的lb。 这里的bound函数是一种启发式方法&#xff0c;等于当前路径的总长度&#xff0c;再加上往后走两步的最小值。 struct …...

编程日记 2023/7/30 2:33:13

linux 指令 第3期

cat cat 指令&#xff1a; 首先我们知道一个文件内容属性 我们对文件操作就有两个方面&#xff1a;对文件内容和属性的操作 扩展&#xff1a;echo 指令 直接打印echo后面跟的字符串 看&#xff1a; 这其实是把它打印到了显示器上&#xff0c;我们也可以改变一下它的打印位置…...

编程日记 2023/7/30 2:32:12

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/8 20:41:51

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/8 20:41:46

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2026/2/4 12:43:08

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47