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

CSS关于默认宽度

news 2026/1/27 19:44:25

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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/1/20 21:57:00

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/22 10:28:09

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...

编程新知 2026/1/20 21:44:37