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

深入理解 `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;&#xff1a;CSS 布局的利器 默认行为示例代码 使用 box-sizing: border-box;示例代码 全局应用 box-sizing: border-box;示例代码 实际应用场景1. 表单布局2. 网格布局 总结 在 CSS 中&#xff0c;box-sizing 属性决定了元素的总宽度和高度是…...

【原子工具】快速幂 快速乘

题幂算.一切即1 阴阳迭变积微著&#xff0c;叠浪层峦瞬息功 莫道浮生千万事&#xff0c;元知万象一归宗 文章目录 快速幂原始快速幂&#xff08;O(logn)&#xff09;二分递归形式非递归形式 模下意义的快速幂&#xff08;O(logn)&#xff09;二分递归形式非递归形式 快速乘龟速…...

Apache SeaTunnel 整体架构运行原理

概述 SeaTunnel 缘起 数据集成在现代企业的数据治理和决策支持中扮演着至关重要的角色。随着数据源的多样化和数据量的迅速增长及业务需求的快速变化&#xff0c;企业需要具备强大的数据集成能力来高效地处理数据。SeaTunnel通过其高度可扩展和灵活的架构&#xff0c;帮助企业…...

Nginx如何实现 TCP和UDP代理?

文章目录 前言 Nginx之TCP和UDP代理 工作原理示意图 配置文件和命令参数注释 基本命令 配置实例说明 TCP代理实例UDP代理实例 总结 前言 Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;同时也支持TCP/UDP代理。在1.9.13版本后&#xff0c;Nginx已经支持端口转发&…...

蓝桥杯思维训练营(三)

文章目录 题目详解680.验证回文串 II30.魔塔游戏徒步旅行中的补给问题观光景点组合得分问题 题目详解 680.验证回文串 II 680.验证回文串 II 思路分析&#xff1a;这个题目的关键就是&#xff0c;按照正常来判断对应位置是否相等&#xff0c;如果不相等&#xff0c;那么就判…...

开箱即用的.NET MAUI组件库 V-Control 发布了!

之前写过挺多的MAUI Sample&#xff0c;其中有很多代码可以打包成组件&#xff0c;当组件完善到一定程度&#xff0c;我会把控件封装起来放到控件库中。 今天&#xff0c;在这个仓库建立一年零八个月后&#xff0c;我觉得可以考虑将其作为开源库发布。 有很多网友在观望.NET …...

动手学图神经网络(9):利用图神经网络进行节点分类 WeightsBiases

利用图神经网络进行节点分类Weights&Biases 引言 在本篇博客中,将深入探讨如何使用图神经网络(GNNs)来完成节点分类任务。以 Cora 数据集为例,该数据集是一个引用网络,节点代表文档,推断每个文档的类别。同时,使用 Weights & Biases(W&B)来跟踪实验过程和…...

【文件上传、秒传、分片上传、断点续传、重传】

文章目录 获取文件对象文件上传&#xff08;秒传、分片上传、断点续传、重传&#xff09;优化 获取文件对象 input标签的onchange方法接收到的参数就是用户上传的所有文件 <html lang"en"><head><title>文件上传</title><style>#inp…...

使用Pygame制作“打砖块”游戏

1. 前言 打砖块&#xff08;Breakout / Arkanoid&#xff09; 是一款经典街机游戏&#xff0c;玩家控制一个可左右移动的挡板&#xff0c;接住并反弹球&#xff0c;击碎屏幕上方的砖块。随着砖块被击碎&#xff0c;不仅能获得分数&#xff0c;还可以体验到不断加速或复杂的反弹…...

【完整版】DeepSeek-R1大模型学习笔记(架构、训练、Infra)

文章目录 0 DeepSeek系列总览1 模型架构设计基本参数专家混合模型&#xff08;MoE&#xff09;[DeepSeek-V2提出, DeepSeek-V3改良]多头潜在注意力&#xff08;MLA&#xff09;[DeepSeek-V2提出]多token预测&#xff08;MTP&#xff09;[DeepSeek-V3提出] 2 DeepSeek-R1-Zero及…...

深入解析:如何利用 Python 爬虫获取商品 SKU 详细信息

在电商领域&#xff0c;SKU&#xff08;Stock Keeping Unit&#xff0c;库存单位&#xff09;详细信息是电商运营的核心数据之一。它不仅包含了商品的规格、价格、库存等关键信息&#xff0c;还直接影响到库存管理、价格策略和市场分析等多个方面。本文将详细介绍如何利用 Pyth…...

【3】高并发导出场景下,服务器性能瓶颈优化方案-文件压缩

使用EasyExcel导出并压缩文件是一种高效且常见的解决方案&#xff0c;尤其适用于需要处理大量数据的场景。 1. 导出多个Excel文件并压缩成ZIP文件的基本流程 &#xff08;1&#xff09;数据准备&#xff1a;从数据库或其他数据源获取需要导出的数据&#xff0c;并将其存储在Ja…...

FPGA|生成jic文件固化程序到flash

1、单击file-》convert programming files 2、flie type中选中jic文件&#xff0c;configuration decive里根据自己的硬件选择&#xff0c;单击flash loader选择右边的add device选项 3、选择自己的硬件&#xff0c;单击ok 4、选中sof选项&#xff0c;单机右侧的add file 5、选…...

【ArcGIS_Python】使用arcpy脚本将shape数据转换为三维白膜数据

说明&#xff1a; 该专栏之前的文章中python脚本使用的是ArcMap10.6自带的arcpy&#xff08;好几年前的文章&#xff09;&#xff0c;从本篇开始使用的是ArcGIS Pro 3.3.2版本自带的arcpy&#xff0c;需要注意不同版本对应的arcpy函数是存在差异的 数据准备&#xff1a;准备一…...

用Python获取股票数据并实现未来收盘价的预测

获取数据 先用下面这段代码获取上证指数的历史数据&#xff0c;得到的csv文件数据&#xff0c;为后面训练模型用的 import akshare as ak import pandas as pd# 获取上证指数历史数据 df ak.stock_zh_index_daily(symbol"sh000001")# 将数据保存到本地CSV文件 df.…...

Rust 所有权特性详解

Rust 所有权特性详解 Rust 的所有权系统是其内存安全的核心机制之一。通过所有权规则&#xff0c;Rust 在编译时避免了常见的内存错误&#xff08;如空指针、数据竞争等&#xff09;。本文将从堆内存与栈内存、所有权规则、变量作用域、String 类型、内存分配、所有权移动、Cl…...

Gateway路由匹配规则详解

在微服务架构中&#xff0c;Gateway作为请求的入口&#xff0c;扮演着至关重要的角色。它不仅负责路由转发&#xff0c;还具备安全、监控、限流等多种功能。其中&#xff0c;路由匹配规则是Gateway的核心功能之一&#xff0c;它决定了请求如何被正确地转发到目标服务。本文将详…...

项目实操:windows批处理拉取git库和处理目录、文件

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…...

前端开发知识梳理 - HTMLCSS

1. 盒模型 由内容区&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;border&#xff09;和外边距&#xff08;margin&#xff09;组成。 &#xff08;1&#xff09;标准盒模型&#xff08;box-sizing默认值, content-box&#xff…...

nginx中的proxy_set_header参数详解

在使用 Nginx 作为反向代理服务器时&#xff0c;proxy_set_header 指令扮演着至关重要的角色。它允许我们自定义请求头信息&#xff0c;将客户端请求传递给上游服务器时&#xff0c;添加或修改特定的信息&#xff0c;从而实现更灵活的代理功能。本文将深入探讨 proxy_set_heade…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...