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

CSS关于默认宽度

news 2026/2/10 19:44:48

所谓的默认宽度，就是不设置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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/8 4:32:38

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/2/6 23:56:39

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

Vue 模板语句的数据来源

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

编程新知 2026/2/1 6:18:18

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

编程新知 2025/11/8 23:40:56

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

编程新知 2026/2/5 4:16:56