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

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

news 2025/7/16 19:27:44

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

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/7/16 4:25:34

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/7/16 0:58:39

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/21 2:09:08

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/7/6 1:26:33

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/7/16 1:53:38

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2025/7/12 5:47:20

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/7/9 23:25:12

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...

编程新知 2025/7/5 21:03:34

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...

编程新知 2025/7/11 23:51:40

【工具教程】多个条形码识别用条码内容对图片重命名，批量PDF条形码识别后用条码内容批量改名，使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

编程新知 2025/7/16 13:29:14