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

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

news 文章来源：https://blog.csdn.net/m0_64027617/article/details/131982962 2025/5/10 17:46:28

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

测试用例实战

测试用例实战 三角形判断 三角形测试用例设计 测试用例编写 先做正向数据&#xff0c;再做反向数据。 只要有一条边长为0&#xff0c;那就是不符合要求&#xff0c;不需要再进行判断&#xff0c;重复。 四边形 四边形测试用例...

编程日记 2023/7/30 2:31:11

Unity XML1——XML基本语法

一、XML 概述 ​ 全称&#xff1a;可拓展标记语言&#xff08;EXtensible Markup Language&#xff09; ​ XML 是国际通用的&#xff0c;它是被设计来用于传输和存储数据的一种文本特殊格式&#xff0c;文件后缀一般为 .xml ​ 我们在游戏中可以把游戏数据按照 XML 的格式标…...

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

了解Unity编辑器之组件篇Playables和Rendering（十）

Playables 一、Playable Director&#xff1a;是一种用于控制和管理剧情、动画和音频的工具。它作为一个中央控制器&#xff0c;可以管理播放动画剧情、视频剧情和音频剧情&#xff0c;以及它们之间的时间、顺序和交互。 Playable Director组件具有以下作用&#xff1a; 剧情控…...

编程日记 2023/7/30 2:29:06

python的包管理器pip安装经常失败的解决办法：修改pip镜像源

pip 常用的国内镜像源&#xff1a; https://pypi.tuna.tsinghua.edu.cn/simple/ // 清华 http://mirrors.aliyun.com/pypi/simple/ // 阿里云 https://pypi.mirrors.ustc.edu.cn/simple/ // 中国科技大学 http://pypi.hustunique.com/ // 华中理…...

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

忘记安卓图案/密码锁如何解锁？

如何解锁Android手机图案锁&#xff1f;如何删除忘记的密码&#xff1f;Android 手机锁定后如何重置&#xff1f;这是许多智能手机用户在网上提出的几个问题。为了回答这些问题&#xff0c;我们想出了一些简单有效的方法来解锁任何设备而不丢失数据。 忘记手机密码可能会令人恐…...

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

Bash编程

目录&#xff1a; bash编程语法bash脚本编写 1.bash编程语法 Bash 编程基础 变量引号数组控制语句函数 Bash 变量 语法&#xff1a; Variable_namevalue Bash 变量定义的规则 变量名区分大小写&#xff0c;a和A为两个不同的变量。变量名可以使用大小写字母混编的形式进行…...

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

vue指令-v-model修饰符

vue指令-v-model修饰符 1、目标2、语法 1、目标 让v-modelv-mode拥有更强大的功能 2、语法 v-model.修饰符“Vue数据变量” .number 以parseFloat转成数字类型 .trime 去除首位空白字符 .lazy 在change时触发而非input时示例1 <template><div id"app"&g…...

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

【论文精读CVPR_2023】3D-Aware Face Swapping

【论文精读CVPR_2023】3D-Aware Face Swapping 前言Abstract1. Introduction2. Related WorkFace Swapping.3D-Aware Generative Models.GAN Inversion.3. Method3.1. Overview3.2. Inferring 3D Prior from 2D Images3.3. Face Swapping via Latent Code Manipulation3.4. Joi…...

编程日记 2023/7/30 2:23:58

flutter开发实战-自定义相机camera功能

flutter开发实战-自定义相机camera功能。 Flutter 本质上只是一个 UI 框架&#xff0c;运行在宿主平台之上&#xff0c;Flutter 本身是无法提供一些系统能力&#xff0c;比如使用蓝牙、相机、GPS等&#xff0c;因此要在 Flutter 中调用这些能力就必须和原生平台进行通信。 实现…...

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

重排链表——力扣143

文章目录 题目描述法一&#xff1a;寻找链表中点、链表逆序、链表合并 题目描述 法一&#xff1a;寻找链表中点、链表逆序、链表合并 void reorderList(ListNode* head){if(headnullptr){return;}// 找到中点 ListNode* mid FindMiddle(head);ListNode *h1head, *h2mid->ne…...

编程日记 2023/7/30 2:21:54