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

【css】width:100%；padding:20px；造成超出100%宽度的解决办法 - box-sizing的使用方法 - CSS布局

article 2026/4/22 12:49:46

问题

修改效果

解决方法

.xx {width: 100%;padding: 0 20px;box-sizing: border-box;
}

默认box-sizing: content-box下，
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

可选box-sizing: border-box;下，
width = border + padding + 内容的宽度  >> 不包括margin
height = border + padding + 内容的高度  >> 不包括margin

参考

CSS系列之 box-sizing-CSDN博客文章浏览阅读8.3k次，点赞18次，收藏41次。本文详细介绍了box-sizing属性的两种模式：content-box和border-box，讲述了它们如何影响元素尺寸计算，并通过示例展示了两者在实际布局中的效果。记住，border-box模型包含了内容、内边距和边框，而content-box则不包含外边距。 https://blog.csdn.net/weixin_62277266/article/details/123023988

相关文章：

【css】width:100%；padding:20px；造成超出100%宽度的解决办法 - box-sizing的使用方法 - CSS布局

问题 修改效果 解决方法 .xx {width: 100%;padding: 0 20px;box-sizing: border-box; } 默认box-sizing: content-box下， width 内容的宽度 height 内容的高度 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding&…...

编程日记 2026/4/11 11:34:41

贪心算法_翻硬币

蓝桥账户中心 依次遍历 不符合条件就反转 题目要干嘛 你就干嘛 #include <bits/stdc.h>#define endl \n using namespace std;int main() {ios::sync_with_stdio(0); cin.tie(0); cout.tie(0); string s; cin >> s;string t; cin >> t;int ret 0;for ( i…...

编程日记 2026/4/9 10:54:57

vue开发06：前端通过webpack配置代理处理跨域问题

1.定义 在浏览器尝试请求不同源&#xff08;域名、协议、端口号不同&#xff09;的资源时&#xff0c;浏览器的同源策略会阻止这种跨域请求。&#xff08;比如前端端口15500&#xff0c;后端端口5050&#xff0c;前端界面不可以直接调用5050端口&#xff09; 2.解决方案 使用前…...

编程日记 2025/12/29 19:09:24

深入HBase——引入

引入 前面我们通过深入HDFS到深入MapReduce &#xff0c;从设计和落地&#xff0c;去深入了解了大数据最底层的基石——存储与计算是如何实现的。 这个专栏则开始来看大数据的三驾马车中最后一个。 通过前面我们对于GFS和MapReduce论文实现的了解&#xff0c;我们知道GFS在数…...

编程日记 2026/4/13 15:53:08

2025年02月12日Github流行趋势

项目名称&#xff1a;data-formulator 项目地址url&#xff1a;https://github.com/microsoft/data-formulator 项目语言&#xff1a;TypeScript 历史star数&#xff1a;4427 今日star数&#xff1a;729 项目维护者&#xff1a;danmarshall, Chenglong-MS, apps/dependabot, mi…...

编程日记 2026/4/12 12:03:20

【落羽的落羽 数据结构篇】双向链表

文章目录 一、链表的分类二、双向链表1. 结构2. 申请一个新节点3. 尾部插入数据4. 头部插入数据5. 尾部删除数据6. 头部删除数据7. 在指定位置之后插入数据8. 删除指定位置节点9. 销毁链表 一、链表的分类 链表的分类实际上要从这三个方向分析&#xff1a;是否带头、单向还是双…...

编程日记 2026/4/7 15:47:19

Golang的并发编程问题解决思路

Golang的并发编程问题解决思路 一、并发编程基础 并发与并行 在计算机领域&#xff0c;“并发”和“并行”经常被混为一谈&#xff0c;但它们有着不同的含义。并发是指一段时间内执行多个任务&#xff0c;而并行是指同时执行多个任务。在 Golang 中&#xff0c;通过 goroutines…...

编程日记 2026/4/16 16:33:34

vsftpd 配置项说明

目录 一&#xff1a;vsftpd 配置文件说明二&#xff1a;vsftpd 服务和连接设置三&#xff1a;vsftpd 用户根目录管理四&#xff1a;vsftpd 匿名用户模式管理五&#xff1a;vsftpd 本地用户模式管理六&#xff1a; vsftpd 虚拟用户模式管理 一&#xff1a;vsftpd 配置文件说明 …...

编程日记 2026/4/15 9:01:14

剑指offer第2版：搜索算法（二分/DFS/BFS）

查找本质就是排除的过程&#xff0c;不外乎顺序查找、二分查找、哈希查找、二叉排序树查找、DFS/BFS查找 一、p39-JZ3 找出数组中重复的数字&#xff08;利用特性&#xff09; 数组中重复的数字_牛客题霸_牛客网 方法1&#xff1a;全部排序再进行逐个扫描找重复。 时间复杂…...

编程日记 2026/4/12 7:46:41

Pytorch与大模型有什么关系

PyTorch 是 深度学习领域最流行的框架之一&#xff0c;在大模型的训练、推理、优化等方面发挥了重要作用。 大模型&#xff08;如 GPT、LLaMA、Stable Diffusion&#xff09;大多是基于 PyTorch 进行开发和训练的。 1. PyTorch 在大模型中的作用 大模型&#xff08;如 ChatGP…...

编程日记 2026/4/3 10:06:31

在 CentOS 上更改 SSH 默认端口以提升服务器安全性

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …...

编程日记 2026/4/19 1:05:12

PyTorch Lightning pytorch.loggers模块介绍

pytorch.loggers 是 PyTorch Lightning 提供的一个模块&#xff0c;用于集成多种日志记录工具&#xff0c;方便开发者在训练过程中记录和监控模型的性能指标、超参数等信息。日志记录器&#xff08;Loggers&#xff09;是 PyTorch Lightning 的重要组成部分&#xff0c;可以通过…...

编程日记 2026/2/6 7:29:24

2025年：边缘计算崛起下运维应对新架构挑战

一、引言 随着科技的飞速发展&#xff0c;2025年边缘计算正以前所未有的速度崛起&#xff0c;给运维行业带来了全新的架构挑战。在这个充满机遇与挑战的时代&#xff0c;美信时代公司的美信监控易运维管理软件成为运维领域应对这些挑战的有力武器。 二、边缘计算崛起带来的运维…...

编程日记 2026/4/20 3:16:36

什么是UV环形光源

UV环形光源是一种用于特定照明需求的设备&#xff0c;以下是其关键点&#xff1a; 定义 UV环形光源&#xff1a;发出紫外光的环形照明装置&#xff0c;常用于机器视觉、工业检测等领域。特点 均匀照明&#xff1a;环形设计确保光线均匀分布&#xff0c;减少阴影。 高亮度&…...

编程日记 2025/12/2 18:41:06

怎么理解 Spring Boot 的约定优于配置 ？

在传统的 Spring 开发中&#xff0c;大家可能都有过这样的经历&#xff1a;项目还没开始写几行核心业务代码&#xff0c;就已经在各种配置文件中耗费了大量时间。比如&#xff0c;要配置数据库连接&#xff0c;不仅要在 XML 文件里编写冗长的数据源配置&#xff0c;还要处理事务…...

编程日记 2026/4/21 17:56:53

学习总结2.14

深搜将题目分配&#xff0c;如果是两个题目&#xff0c;就可以出现左左&#xff0c;左右&#xff0c;右左&#xff0c;右右四种时间分配&#xff0c;再在其中找最小值&#xff0c;即是两脑共同处理的最小值 #include <stdio.h> int s[4]; int sum0; int brain[25][25]; …...

编程日记 2026/4/12 4:19:50

Electron 客户端心跳定时任务调度库调研文档 - Node.js 任务调度库技术调研文档

Electron 客户端心跳定时任务调度库调研文档 - Node.js 任务调度库技术调研文档 本文将对七个流行的定时任务调度库&#xff1a;node-cron、rxjs、bull、node-schedule、agenda、bree、cron。这些库都可以用来处理定时任务&#xff0c;但它们的特点和适用场景有所不同。我们将从…...

编程日记 2026/4/11 14:27:46

【学术投稿-第四届智能电网和绿色能源国际学术会议（ICSGGE 2025)】CSS基本选择器详解：掌握基础，轻松布局网页

可线上 官网&#xff1a;www.icsgge.org 时间&#xff1a;2025年2月28-3月2日 目录 前言 一、基本选择器简介 1. 元素选择器&#xff08;Type Selector&#xff09; 基本语法 示例 注意事项 2. 类选择器&#xff08;Class Selector&#xff09; 基本语法 示例 注意…...

编程日记 2026/4/22 7:08:21

singleTaskAndroid的Activity启动模式知识点总结

一. 前提知识 1.1. 任务栈知识 二. Activity启动模式的学习 2.1 standard 2.2 singleTop 2.3.singleTask 2.4.singleInstance 引言&#xff1a; Activity作为四大组件之一&#xff0c;也可以说Activity是其中最重要的一个组件&#xff0c;其负责调节APP的视图&#xff…...

编程日记 2026/4/21 15:44:50

Java Stream 全面解析

Java Stream 全面解析 Java 8 引入的 Stream API 提供了一种高效且声明式的方式来处理集合数据。Stream 允许你以函数式编程风格操作数据&#xff0c;支持并行处理&#xff0c;并且可以显著简化代码。下面我们将从 创建操作、中间操作 和 终端操作 三个方面进行全面深入的解析…...

编程日记 2026/4/20 1:07:26

OpenCV识别电脑摄像头中的圆形物体

思路步骤 初始化摄像头&#xff1a;使用cv2.VideoCapture打开电脑摄像头。处理每一帧图像&#xff1a;对摄像头捕获的每一帧图像进行处理&#xff0c;包括灰度化、高斯模糊、霍夫圆变换等操作。绘制圆形和圆心&#xff1a;如果检测到圆形&#xff0c;使用cv2.circle函数用黄线…...

编程日记 2026/4/22 10:43:44

如何在 Tomcat 中屏蔽错误报告

Tomcat 屏蔽错误信息 <h1>HTTP状态 400 - 错误的请求</h1><hr class"line" /><p><b>类型</b> 异常报告</p><p><b>消息</b> 在请求目标中找到无效字符。有效字符在RFC 7230和RFC 3986中定义</p>&…...

编程日记 2025/9/2 8:57:59

Vue 入门到实战 十

第10章 Vue Router​​​​​​​ 目录 10.1 什么是路由 10.2 Vue Router的安装 10.2.1 本地独立版本方法 10.2.2 CDN方法 10.2.3 NPM方法 10.2.4 命令行工具&#xff08;Vue CLI&#xff09;方法 10.3 Vue Router的基本用法 10.3.1 跳转与传参 10.3.2 配置路由 10.…...

编程日记 2026/4/11 19:23:48

jenkins-获取当前时间戳

一. 简述&#xff1a; 很多场景下&#xff0c;需要获取当前时间戳。 二. 使用方法&#xff1a; 1. 安装&#xff1a; 最简单的&#xff0c; 莫过于直接部署相关插件&#xff1a; Build Timestamp Plugin 2. 配置&#xff1a; 3. 使用&#xff1a; post {success {script…...

编程日记 2026/4/12 1:02:51

springboot mybatis-plus 集成多数据源

在 Spring Boot 项目中集成 MyBatis-Plus 并配置多数据源&#xff0c;可以按照以下步骤进行。这个示例将展示如何配置两个数据源&#xff0c;并确保每个数据源都有自己对应的 SqlSessionFactory 和事务管理器。 1. 添加依赖 首先&#xff0c;在你的 pom.xml 文件中添加必要的…...

编程日记 2026/1/10 20:45:29

SSH 登录到 Linux 服务器为什么没有要求输入密码

如果你通过 SSH 登录到 Linux 服务器时没有要求输入密码&#xff0c;通常有以下几种可能性&#xff1a; 1. 使用 SSH 密钥认证 最常见的原因是你的 SSH 登录使用了 公钥认证&#xff0c;而不是密码认证。在这种情况下&#xff0c;服务器上已经配置了你的公钥&#xff0c;并且…...

编程日记 2026/4/21 4:12:22

Kafka 中基于 Segment 和 Offset 查找消息的过程

Kafka 中基于 Segment 和 Offset 查找消息的过程 假设我们有一个 Kafka Topic&#xff0c;其 Partition 划分为多个 Segment 文件。每个 Segment 文件包含 .log、.index 和 .timeindex 文件。现在我们需要查找 Offset 为 368801 的消息。 假设条件 Partition&#xff1a;par…...

编程日记 2026/4/22 12:07:53

【Jenkins流水线搭建】

Jenkins流水线搭建 01、SpringBoot项目 - Jenkins基于Jar持续集成搭建文档基于手动方式发布项目基于dockerfile基于jenkins + dockerfile + jenkinsfile +pieline基于jenkins + jar方式的发布01、环境说明01、准备项目02、准备服务器03、安装git04、安装jdk1.805、安装maven依赖…...

编程日记 2026/4/12 4:24:25

【Java】规则引擎 Drools

https://www.bilibili.com/video/BV1nW421R7qJ 来自尚硅谷 背景 /*** 设置订单积分*/ public void setOrderPoint(Order order){if (order.getAmout() < 100){order.setScore(0);}else if(order.getAmout() > 100 && order.getAmout() < 500){order.setScore(…...

编程日记 2026/4/19 4:41:31

Transformer以及BERT阅读参考博文

Transformer以及BERT阅读参考博文 Transformer学习&#xff1a; 已有博主的讲解特别好了&#xff1a; 李沐&#xff1a;Transformer论文逐段精读【论文精读】_哔哩哔哩_bilibili知乎&#xff1a;Transformer模型详解&#xff08;图解最完整版&#xff09; - 知乎 个人杂想&…...

编程日记 2025/9/27 10:08:47