深入理解 `box-sizing: border-box;`:CSS 布局的利器
深入理解 `box-sizing: border-box;`:CSS 布局的利器
- 默认行为
- 示例代码
- 使用 `box-sizing: border-box;`
- 示例代码
- 全局应用 `box-sizing: border-box;`
- 示例代码
- 实际应用场景
- 1. 表单布局
- 2. 网格布局
- 总结
在 CSS 中,box-sizing 属性决定了元素的总宽度和高度是如何计算的。默认情况下,元素的宽度和高度只包括内容(content),不包括内边距(padding)和边框(border)。然而,box-sizing: border-box; 可以改变这种行为,使元素的宽度和高度包括内容、内边距和边框。本文将详细介绍 box-sizing: border-box; 的用法及其在实际开发中的应用。
默认行为
在默认情况下,元素的宽度和高度只包括内容部分。内边距和边框会增加元素的总尺寸。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Default Box Sizing</title><style>.default-box {width: 200px;height: 100px;padding: 20px;border: 5px solid #0078d7;background-color: #f3f3f3;}</style>
</head>
<body><div class="default-box">Default Box Sizing</div>
</body>
</html>
在这个示例中,.default-box 的总宽度是 200px(内容宽度) + 2 * 20px(内边距) + 2 * 5px(边框) = 250px。
使用 box-sizing: border-box;
当你将 box-sizing 设置为 border-box 时,元素的宽度和高度将包括内容、内边距和边框。这意味着你设置的宽度和高度将是元素的总尺寸。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Border Box Sizing</title><style>.border-box {width: 200px;height: 100px;padding: 20px;border: 5px solid #0078d7;background-color: #f3f3f3;box-sizing: border-box;}</style>
</head>
<body><div class="border-box">Border Box Sizing</div>
</body>
</html>
在这个示例中,.border-box 的总宽度是 200px(内容宽度 + 内边距 + 边框),而不是 250px。这意味着你设置的宽度和高度将是元素的总尺寸。
全局应用 box-sizing: border-box;
为了确保所有元素都使用 border-box 尺寸计算,你可以在全局样式中设置 box-sizing。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Global Border Box Sizing</title><style>* {box-sizing: border-box;}.global-box {width: 200px;height: 100px;padding: 20px;border: 5px solid #0078d7;background-color: #f3f3f3;}</style>
</head>
<body><div class="global-box">Global Border Box Sizing</div>
</body>
</html>
在这个示例中,所有元素都使用 border-box 尺寸计算,包括 .global-box。这样可以确保所有元素的宽度和高度都包括内容、内边距和边框。
实际应用场景
1. 表单布局
在表单布局中,box-sizing: border-box; 可以帮助你更容易地控制输入框的尺寸,避免因为内边距和边框导致的布局问题。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Layout</title><style>* {box-sizing: border-box;}.form-group {margin-bottom: 15px;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}</style>
</head>
<body><div class="form-group"><label for="username">Username</label><input type="text" id="username" name="username"></div><div class="form-group"><label for="password">Password</label><input type="password" id="password" name="password"></div>
</body>
</html>
2. 网格布局
在使用 CSS 网格布局时,box-sizing: border-box; 可以确保网格项的尺寸一致,避免因为内边距和边框导致的布局问题。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout</title><style>* {box-sizing: border-box;}.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}.grid-item {padding: 20px;border: 1px solid #ccc;background-color: #f3f3f3;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">Item 1</div><div class="grid-item">Item 2</div><div class="grid-item">Item 3</div><div class="grid-item">Item 4</div><div class="grid-item">Item 5</div><div class="grid-item">Item 6</div></div>
</body>
</html>
总结
box-sizing: border-box; 是一个非常有用的 CSS 属性,可以帮助你更容易地控制元素的总尺寸。通过将 box-sizing 设置为 border-box,你可以确保元素的宽度和高度包括内容、内边距和边框,从而简化布局和样式设计。
相关文章:
深入理解 `box-sizing: border-box;`:CSS 布局的利器
深入理解 box-sizing: border-box;:CSS 布局的利器 默认行为示例代码 使用 box-sizing: border-box;示例代码 全局应用 box-sizing: border-box;示例代码 实际应用场景1. 表单布局2. 网格布局 总结 在 CSS 中,box-sizing 属性决定了元素的总宽度和高度是…...
【原子工具】快速幂 快速乘
题幂算.一切即1 阴阳迭变积微著,叠浪层峦瞬息功 莫道浮生千万事,元知万象一归宗 文章目录 快速幂原始快速幂(O(logn))二分递归形式非递归形式 模下意义的快速幂(O(logn))二分递归形式非递归形式 快速乘龟速…...
Apache SeaTunnel 整体架构运行原理
概述 SeaTunnel 缘起 数据集成在现代企业的数据治理和决策支持中扮演着至关重要的角色。随着数据源的多样化和数据量的迅速增长及业务需求的快速变化,企业需要具备强大的数据集成能力来高效地处理数据。SeaTunnel通过其高度可扩展和灵活的架构,帮助企业…...
Nginx如何实现 TCP和UDP代理?
文章目录 前言 Nginx之TCP和UDP代理 工作原理示意图 配置文件和命令参数注释 基本命令 配置实例说明 TCP代理实例UDP代理实例 总结 前言 Nginx是一个高性能的HTTP和反向代理服务器,同时也支持TCP/UDP代理。在1.9.13版本后,Nginx已经支持端口转发&…...
蓝桥杯思维训练营(三)
文章目录 题目详解680.验证回文串 II30.魔塔游戏徒步旅行中的补给问题观光景点组合得分问题 题目详解 680.验证回文串 II 680.验证回文串 II 思路分析:这个题目的关键就是,按照正常来判断对应位置是否相等,如果不相等,那么就判…...
开箱即用的.NET MAUI组件库 V-Control 发布了!
之前写过挺多的MAUI Sample,其中有很多代码可以打包成组件,当组件完善到一定程度,我会把控件封装起来放到控件库中。 今天,在这个仓库建立一年零八个月后,我觉得可以考虑将其作为开源库发布。 有很多网友在观望.NET …...
动手学图神经网络(9):利用图神经网络进行节点分类 WeightsBiases
利用图神经网络进行节点分类Weights&Biases 引言 在本篇博客中,将深入探讨如何使用图神经网络(GNNs)来完成节点分类任务。以 Cora 数据集为例,该数据集是一个引用网络,节点代表文档,推断每个文档的类别。同时,使用 Weights & Biases(W&B)来跟踪实验过程和…...
【文件上传、秒传、分片上传、断点续传、重传】
文章目录 获取文件对象文件上传(秒传、分片上传、断点续传、重传)优化 获取文件对象 input标签的onchange方法接收到的参数就是用户上传的所有文件 <html lang"en"><head><title>文件上传</title><style>#inp…...
使用Pygame制作“打砖块”游戏
1. 前言 打砖块(Breakout / Arkanoid) 是一款经典街机游戏,玩家控制一个可左右移动的挡板,接住并反弹球,击碎屏幕上方的砖块。随着砖块被击碎,不仅能获得分数,还可以体验到不断加速或复杂的反弹…...
【完整版】DeepSeek-R1大模型学习笔记(架构、训练、Infra)
文章目录 0 DeepSeek系列总览1 模型架构设计基本参数专家混合模型(MoE)[DeepSeek-V2提出, DeepSeek-V3改良]多头潜在注意力(MLA)[DeepSeek-V2提出]多token预测(MTP)[DeepSeek-V3提出] 2 DeepSeek-R1-Zero及…...
深入解析:如何利用 Python 爬虫获取商品 SKU 详细信息
在电商领域,SKU(Stock Keeping Unit,库存单位)详细信息是电商运营的核心数据之一。它不仅包含了商品的规格、价格、库存等关键信息,还直接影响到库存管理、价格策略和市场分析等多个方面。本文将详细介绍如何利用 Pyth…...
【3】高并发导出场景下,服务器性能瓶颈优化方案-文件压缩
使用EasyExcel导出并压缩文件是一种高效且常见的解决方案,尤其适用于需要处理大量数据的场景。 1. 导出多个Excel文件并压缩成ZIP文件的基本流程 (1)数据准备:从数据库或其他数据源获取需要导出的数据,并将其存储在Ja…...
FPGA|生成jic文件固化程序到flash
1、单击file-》convert programming files 2、flie type中选中jic文件,configuration decive里根据自己的硬件选择,单击flash loader选择右边的add device选项 3、选择自己的硬件,单击ok 4、选中sof选项,单机右侧的add file 5、选…...
【ArcGIS_Python】使用arcpy脚本将shape数据转换为三维白膜数据
说明: 该专栏之前的文章中python脚本使用的是ArcMap10.6自带的arcpy(好几年前的文章),从本篇开始使用的是ArcGIS Pro 3.3.2版本自带的arcpy,需要注意不同版本对应的arcpy函数是存在差异的 数据准备:准备一…...
用Python获取股票数据并实现未来收盘价的预测
获取数据 先用下面这段代码获取上证指数的历史数据,得到的csv文件数据,为后面训练模型用的 import akshare as ak import pandas as pd# 获取上证指数历史数据 df ak.stock_zh_index_daily(symbol"sh000001")# 将数据保存到本地CSV文件 df.…...
Rust 所有权特性详解
Rust 所有权特性详解 Rust 的所有权系统是其内存安全的核心机制之一。通过所有权规则,Rust 在编译时避免了常见的内存错误(如空指针、数据竞争等)。本文将从堆内存与栈内存、所有权规则、变量作用域、String 类型、内存分配、所有权移动、Cl…...
Gateway路由匹配规则详解
在微服务架构中,Gateway作为请求的入口,扮演着至关重要的角色。它不仅负责路由转发,还具备安全、监控、限流等多种功能。其中,路由匹配规则是Gateway的核心功能之一,它决定了请求如何被正确地转发到目标服务。本文将详…...
项目实操:windows批处理拉取git库和处理目录、文件
初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github:codetoys,所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的,可以在任何平台上使用。 源码指引:github源…...
前端开发知识梳理 - HTMLCSS
1. 盒模型 由内容区(content)、内边距(padding)、边框(border)和外边距(margin)组成。 (1)标准盒模型(box-sizing默认值, content-boxÿ…...
nginx中的proxy_set_header参数详解
在使用 Nginx 作为反向代理服务器时,proxy_set_header 指令扮演着至关重要的角色。它允许我们自定义请求头信息,将客户端请求传递给上游服务器时,添加或修改特定的信息,从而实现更灵活的代理功能。本文将深入探讨 proxy_set_heade…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
