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

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

news 2026/2/9 20:42:33

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2026/2/8 12:54:53

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/7 22:13:48

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29