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

CSS关于默认宽度

news 2026/4/29 17:29:44

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box {/* 设置了高度没有设置宽度 */height: 100px;background-color: red;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果图：

在这里插入图片描述

如果我们设置了margin值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}body {background-color: black;}.box {/* 设置了高度没有设置宽度 */height: 200px;margin: 100px;background-color: red;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果图：

在这里插入图片描述

我们设置padding试一试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}body {background-color: black;}.box {/* 设置了高度没有设置宽度 */height: 200px;padding: 0 100px;background-color: red;font-size: 20px;}</style>
</head>
<body><div class="box">11111111111111111111111111111111111111111111</div>
</body>
</html>

在这里插入图片描述
我们发现内容区被撑开了
小结一下：
总宽度 = 父的 content — 自身的左右margin
内容区的宽度 = 父的 content — 自身的左右margin — 自身的左右 border — 自身的左右padding

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

相关文章：

CSS关于默认宽度

所谓的默认宽度&#xff0c;就是不设置width属性时&#xff0c;元素所呈现出来的宽度 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box {/…...

编程日记 2023/11/9 4:59:31

JDBC（二）

第4章 操作BLOB类型字段 4.1 MySQL BLOB类型 MySQL中&#xff0c;BLOB是一个二进制大型对象&#xff0c;是一个可以存储大量数据的容器&#xff0c;它能容纳不同大小的数据。 插入BLOB类型的数据必须使用PreparedStatement&#xff0c;因为BLOB类型的数据无法使用字符串拼接写…...

编程日记 2023/11/9 4:58:30

LeetCode----149. 直线上最多的点数

 题目 给你一个数组 points &#xff0c;其中 points[i] [ x i x_i xi​, y i y_i yi​] 表示 X-Y 平面上的一个点。求最多有多少个点在同一条直线上。 示例 1&#xff1a; 输入&#xff1a;points [[1,1],[2,2],[3,3]] 输出&#xff1a;3 示例 2&#xff1a; 输入…...

编程日记 2023/11/9 4:57:29

19、Flink 的Table API 和 SQL 中的自定义函数及示例（3）

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

编程日记 2023/11/9 4:56:25

Flutter IOS 前后台切换主题自动变化的问题

BUG 触发条件 设备 IOS 15 模拟器GetX 实现换肤GetMaterialApp 里面配置好 theme和darkTheme使用GetView和GetController进行开发 此时如果把App前后台切换&#xff0c;使用Obx包括起来的内容会跟谁异常主题变换&#xff0c;未使用Obx的颜色不会变化。 解决路径 首先在获取 …...

编程日记 2023/11/9 4:55:22

rabbitmq入门学习

写在前面 本文看下rabbit mq的基础概念以及使用。 1&#xff1a;简单介绍 为了不同进程间通信的解耦&#xff0c;出现了消息队列&#xff0c;为了规范消息队列的具体实现&#xff0c;Java制定了jms规范&#xff0c;这是一套基于接口的规范&#xff0c;因此是绑定语言的&…...

编程日记 2023/11/9 4:54:15

说说对Fiber架构的理解？解决了什么问题？

一、问题 JavaScript引擎和页面渲染引擎两个线程是互斥的&#xff0c;当其中一个线程执行时&#xff0c;另一个线程只能挂起等待 如果 JavaScript 线程长时间地占用了主线程&#xff0c;那么渲染层面的更新就不得不长时间地等待&#xff0c;界面长时间不更新&#xff0c;会导…...

编程日记 2023/11/9 4:53:14

Spring Security笔记

Spring Security 是 Spring家族中的一个安全管理框架。 一般来说中大型的项目都是使用 SpringSecurity 来做安全框架&#xff0c;小项目用相对简单的Shiro。认证、授权是 SpringSecurity 作为安全框架的核心功能。 认证&#xff1a;通过用户名密码验证当前访问系统的是不是本…...

编程日记 2023/11/9 4:52:13

快速教程｜如何在 AWS EC2上使用 Walrus 部署 GitLab

Walrus 是一款基于平台工程理念的开源应用管理平台&#xff0c;致力于解决应用交付领域的深切痛点。借助 Walrus 将云原生的能力和最佳实践扩展到非容器化环境&#xff0c;并支持任意应用形态统一编排部署&#xff0c;降低使用基础设施的复杂度&#xff0c;为研发和运维团队提供…...

编程日记 2023/11/9 4:51:11

[vmware]vmware虚拟机压缩空间清理空间

vmware中的ubuntu使用如果拷贝文件进去在删除&#xff0c;vmare镜像文件并不会减少日积月累会不断是的真实物理磁盘空间大幅度减少&#xff0c;比如我以前windows操作系统本来只有30GB最后居然占道硬盘200GB&#xff0c;清理方法有2种。 第一种&#xff1a;vmware界面操作 第二…...

编程日记 2023/11/9 4:50:10

一篇文章带你使用（MMKV--基于 mmap 的高性能通用 key-value 组件）

一、MMKV是什么&#xff1f; MMKV 是基于 mmap 内存映射的 key-value 组件&#xff0c;底层序列化/反序列化使用 protobuf 实现&#xff0c;性能高&#xff0c;稳定性强。也是腾讯微信团队使用的技术。 支持的数据类型 支持以下 Java 语言基础类型&#xff1a; boolean、int…...

编程日记 2023/11/9 4:49:09

Pytorch 里面torch.no_grad 和model.eval(), model.train() 的作用

torch.no_grad: 影响模型的自微分器&#xff0c;使得其停止工作&#xff1b;这样的话&#xff0c;数据计算的数据就会变快&#xff0c;内存占用也会变小&#xff0c;因为没有了反向梯度计算&#xff0c;当然&#xff0c;我哦们也无法做反向传播。 model.eval() 和model.train()…...

编程日记 2023/11/9 4:48:08

Ozon产品内容评级功能上线，妙手ERP实力助力Ozon卖家全方位打造爆款产品！

产品内容评级&#xff0c;可以直接反映产品质量的高低&#xff0c;也是影响产品排名的关键。具有较高内容评级的产品&#xff0c;将有更大机会显示在搜索结果和类目的前几页中&#xff0c;从而引起买家的关注&#xff0c;促进销售。 为帮助卖家打造高质量产品&#xff0c;妙手…...

编程日记 2023/11/9 4:47:07

Linux 下最主流的文件系统格式——ext

硬盘分成相同大小的单元&#xff0c;我们称为块&#xff08;Block&#xff09;。一块的大小是扇区大小的整数倍&#xff0c;默认是 4K。在格式化的时候&#xff0c;这个值是可以设定的。 一大块硬盘被分成了一个个小的块&#xff0c;用来存放文件的数据部分。这样一来&#xf…...

编程日记 2023/11/9 4:46:05

变量环境、变量提升和暂时性死区

JavaScript中的提升 在JavaScript中&#xff0c;“Hoisting”&#xff08;提升&#xff09;是一种特性&#xff0c;它将变量和函数的声明移动到作用域的顶部。这意味着可以在声明之前使用这些变量和函数&#xff0c;而不会报错。 当JavaScript代码执行时&#xff0c;会经过两个…...

编程日记 2023/11/9 4:45:03

yolov8+多算法多目标追踪+实例分割+目标检测+姿态估计（代码+教程）

多目标追踪实例分割目标检测 YOLO (You Only Look Once) 是一个流行的目标检测算法&#xff0c;它能够在图像中准确地定位和识别多个物体。 本项目是基于 YOLO 算法的目标跟踪系统&#xff0c;它将 YOLO 的目标检测功能与目标跟踪技术相结合&#xff0c;实现了实时的多目标跟…...

编程日记 2023/11/9 4:44:02

【神经网络】【GoogleNet】

1、引言 卷积神经网络是当前最热门的技术&#xff0c;我想深入地学习这门技术&#xff0c;从他的发展历史开始&#xff0c;了解神经网络算法的兴衰起伏&#xff1b;同时了解他在发展过程中的**里程碑式算法**&#xff0c;能更好的把握神经网络发展的未来趋势&#xff0c;了解神…...

编程日记 2023/11/9 4:43:01

网络安全深入学习第八课——正向代理（工具：ReGeorg）

文章目录 一、环境配置二、开始模拟1、拿下跳板机的Webshell权限&#xff0c;并上传shell文件1.1、查看跳板机网络环境1.2、查看arp表 2、使用ReGeorg来建立连接2.1、生产ReGeorg隧道文件2.2、上传ReGeorg隧道的PHP脚本到跳板机2.3、连接隧道2.4、尝试浏览器连接 3、使用Proxif…...

编程日记 2023/11/9 4:41:59

Jmeter全流程性能测试实战

项目背景&#xff1a; 我们的平台为全国某行业监控平台&#xff0c;经过3轮功能测试、接口测试后&#xff0c;98%的问题已经关闭&#xff0c;决定对省平台向全国平台上传数据的接口进行性能测试。 01、测试步骤 1、编写性能测试方案 由于我是刚进入此项目组不久&#xff0c…...

编程日记 2023/11/9 4:40:58

Python算法例8 将整数A转换为B

1. 问题描述 给定整数A和B&#xff0c;求出将整数A转换为B&#xff0c;需要改变bit的位数。 2. 问题示例 把31转换为14&#xff0c;需要改变2个bit位&#xff0c;即&#xff1a;&#xff08;31&#xff09;10&#xff08;11111&#xff09;2&#xff0c;&#xff08;14&…...

编程日记 2023/11/9 4:39:57

很多人不知道：AI证书还有隐藏费用

AI风口下&#xff0c;“持证上岗”“证书职场加分项”的宣传较为常见&#xff0c;不少人希望借助考证提升自身竞争力。但部分人只关注表面的报名费&#xff0c;忽略了背后可能存在的隐形费用&#xff0c;等到陆续掏钱时才发现&#xff0c;实际花费远超预期&#xff0c;所谓的“…...

编程新知 2026/4/29 17:11:51

第48篇：AI模型压缩与加速技术——让模型在移动端“飞”起来（原理解析）

文章目录现象引入&#xff1a;为什么我的模型跑不动&#xff1f;提出问题&#xff1a;我们到底要压缩和加速什么&#xff1f;原理剖析&#xff1a;四大主流技术的“手术刀”1. 知识蒸馏&#xff1a;让“小学生”模仿“大学教授”2. 剪枝&#xff1a;给模型做“减法手术”3. 量化…...

编程新知 2026/4/29 16:50:20

喜马拉雅音频批量下载器：打造个人离线音频库的终极解决方案

喜马拉雅音频批量下载器&#xff1a;打造个人离线音频库的终极解决方案 【免费下载链接】xmly-downloader-qt5 喜马拉雅FM专辑下载器. 支持VIP与付费专辑. 使用GoQt5编写(Not Qt Binding). 项目地址: https://gitcode.com/gh_mirrors/xm/xmly-downloader-qt5 还在为喜马…...

编程新知 2026/4/29 15:29:30

从PyTorch DDP到DeepSpeed ZeRO：我的大模型训练效率提升实战记录（含踩坑与调优）

从PyTorch DDP到DeepSpeed ZeRO&#xff1a;大模型训练效率跃迁实战指南 当你的模型参数突破10亿量级时&#xff0c;传统的PyTorch分布式数据并行&#xff08;DDP&#xff09;就像试图用家用轿车运送集装箱——即使增加车辆数量&#xff0c;每辆车的载重限制仍是无法逾越的瓶颈…...

编程新知 2026/4/29 14:49:16

从“中式英语”到地道表达：我用ChatGPT润色指令搞定论文投稿的完整复盘

从“中式英语”到地道表达&#xff1a;我用ChatGPT润色指令搞定论文投稿的完整复盘 第一次收到期刊审稿意见时&#xff0c;那句"语言表达需要彻底修改"像一盆冷水浇下来。作为非英语母语研究者&#xff0c;我花了三个月完成的实验数据&#xff0c;却因为"中式英…...

编程新知 2026/4/29 14:24:08

5分钟彻底修复Windows软件运行错误：VisualCppRedist AIO终极解决方案

5分钟彻底修复Windows软件运行错误&#xff1a;VisualCppRedist AIO终极解决方案 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经遇到过打开软件时突然…...

编程新知 2026/4/29 11:37:04

Zotero PDF Translate：打破语言壁垒的智能文献翻译革命

Zotero PDF Translate&#xff1a;打破语言壁垒的智能文献翻译革命 【免费下载链接】zotero-pdf-translate Translate PDF, EPub, webpage, metadata, annotations, notes to the target language. Support 20 translate services. 项目地址: https://gitcode.com/gh_mirrors…...

编程新知 2026/4/29 10:56:13

企业任务管理软件哪个好用？10款主流工具测评盘点

本文将深入对比10款工作任务管理系统&#xff1a;Worktile、PingCode、Jira Confluence、monday.com、Asana、ClickUp、Wrike、Smartsheet、Teamwork、Trello。很多企业在选工作任务管理系统时&#xff0c;最头疼的其实不是“工具太少”&#xff0c;而是“工具太多&#xff0c…...

编程新知 2026/4/29 10:06:00

多智能体协同框架实战：从AI决策到自动化工作流构建

1. 项目概述&#xff1a;一个由AI智能体驱动的公开增长实验 最近在AI智能体领域&#xff0c;一个名为“Doubling Agent”的开源项目引起了我的注意。这本质上是一个公开的、为期十天的增长实验&#xff0c;核心命题非常吸引人&#xff1a; 用10美元起步&#xff0c;在10天内通…...

编程新知 2026/4/29 9:36:22

视觉语言模型幻觉问题的几何对偶诊断框架

1. 项目背景与核心挑战 视觉语言模型&#xff08;VLM&#xff09;近年来在跨模态理解任务中展现出强大能力&#xff0c;但"幻觉"问题始终是困扰实际应用的顽疾。所谓幻觉&#xff0c;指的是模型生成的文本描述与输入图像内容出现明显偏差&#xff0c;例如将"坐在…...

编程新知 2026/4/29 9:33:45