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

HTML/CSS盒子模型

news 2026/5/28 17:58:12

盒子：页面中的所有的元素（标签），都可以看做一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更加方便的进行页面布局

盒子模型的组成：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边框区域（margin）

布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签

标签：<div><span>

特点：

div标签：

一行只显示一个

宽度默认式父元素的宽度，高度默认由内容撑开

可以设置宽高

soan标签：

一行可以显示多个

苦读和高度默认由内容撑开

不可以设置宽高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气</title><style>h1{color: blue;}#time{color: rgb(240, 11, 53);}#sb{width: 100px;}a{color: black;text-decoration: none;width: 55px;}#center{width: 65%;margin: 0 auto;}</style>
</head>
<body><div id="center"><img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"><a href="https://blog.csdn.net/jbykmzls"><span id="sb" >冰逸</span></a> <h1>焦点访谈：中国底气</h1><hr><span id="time">2023.8.25</span><hr><p>一个非常好用的高清壁纸网站，里面的壁纸质量高而且数量丰富，不管你喜欢什么样的壁纸都能满足你。首页还给除了很多热门标签，想要动漫壁纸的话，直接点一下标签就能快速查看。</p><img src="https://pic4.zhimg.com/80/v2-118cdd0b9ead23ba24d3f48b0fd945ef_1440w.webp"width="500"></div> 
</body>
</html>

相关文章：

HTML/CSS盒子模型

盒子&#xff1a;页面中的所有的元素&#xff08;标签&#xff09;&#xff0c;都可以看做一个盒子&#xff0c;由盒子将页面中的元素包含在一个矩形区域内&#xff0c;通过盒子的视角更加方便的进行页面布局 盒子模型的组成&#xff1a; 内容区域&#xff08;content&#xff…...

编程日记 2023/9/4 8:01:04

《Java面向对象程序设计》学习笔记——CSV文件的读写与处理

​笔记汇总&#xff1a;《Java面向对象程序设计》学习笔记 笔记记录的不是非常详实&#xff0c;如果有补充的建议或纠错&#xff0c;请踊跃评论留言&#xff01;&#xff01;&#xff01; 什么是CSV文件 CSV文件的定义 CSV 是英文 comma-separated values 的缩写&#xff0…...

编程日记 2023/9/4 8:00:03

opencv 案例05-基于二值图像分析(简单缺陷检测)

缺陷检测&#xff0c;分为两个部分&#xff0c;一个部分是提取指定的轮廓&#xff0c;第二个部分通过对比实现划痕检测与缺角检测。本次主要搞定第一部分&#xff0c;学会观察图像与提取图像ROI对象轮廓外接矩形与轮廓。 下面是基于二值图像分析的大致流程 读取图像将图像转换…...

编程日记 2023/9/4 7:59:00

Elasticsearch入门介绍

应用场景 1 它提供了强大的搜索功能&#xff0c;可以实现类似百度、谷歌等搜索。 2 可以搜索日志或者交易数据&#xff0c;用来分析商业趋势、搜集日志、分析系统瓶颈或者运行发展等等 3 可以提供预警功能&#xff08;持续的查询分析某个数据&#xff0c;如果超过一定的值&a…...

编程日记 2023/9/4 7:57:58

QML Book 学习基础3（动画）

目录 主要动画元素 例子&#xff1a; 非线性动画 分组动画 Qt 动画是一种在 Qt 框架下创建交互式和引人入胜的图形用户界面的方法&#xff0c;我们可以认为是对某个基础元素的多个设置 主要动画元素 PropertyAnimation-属性值变化时的动画 NumberA…...

编程日记 2023/9/4 7:56:57

Lesson4-3:OpenCV图像特征提取与描述---SIFT/SURF算法

学习目标 理解 S I F T / S U R F SIFT/SURF SIFT/SURF算法的原理&#xff0c;能够使用 S I F T / S U R F SIFT/SURF SIFT/SURF进行关键点的检测 SIFT/SURF算法 1.1 SIFT原理 前面两节我们介绍了 H a r r i s Harris Harris和 S h i − T o m a s i Shi-Tomasi Shi−Tomasi…...

编程日记 2023/9/4 7:55:56

语言基础篇9——Python流程控制

流程控制 顺序结构、条件结构、循环结构&#xff0c;顺序结构由自上而下的语句构成&#xff0c;条件结构由if、match-case构成&#xff0c;循环结构由for、while构成。 if语句 flag 1 if flag 1:print("A") elif flag 2:print("B") else:print("…...

编程日记 2023/9/4 7:54:54

MATLAB算法实战应用案例精讲-【概念篇】构建数据指标方法(补充篇)

目录 前言 几个高频面试题目 指标与标签的区别 几个相关概念 数据域 业务过程...

编程日记 2023/9/4 7:53:52

【pyqt5界面化工具开发-12】QtDesigner图形化界面设计

目录 0x00 前言 一、启动程序 二、基础的使用 三、保存布局文件 四、加载UI文件 0x00 前言 关于QtDesigner工具的配置等步骤&#xff08;网上链接也比较多&#xff09; 下列链接非本人的&#xff08;如果使用pip 在命令行安装过pyqt5以及tools&#xff0c;那么就可以跳过…...

编程日记 2023/9/4 7:52:51

CXL.mem S2M Message 释义

&#x1f525;点击查看精选 CXL 系列文章&#x1f525; &#x1f525;点击进入【芯片设计验证】社区&#xff0c;查看更多精彩内容&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c…...

编程日记 2023/9/4 7:51:48

设计模式—外观模式（Facade）

目录 一、什么是外观模式&#xff1f; 二、外观模式具有什么优点吗&#xff1f; 三、外观模式具有什么缺点呢&#xff1f; 四、什么时候使用外观模式&#xff1f; 五、代码展示 ①、股民炒股代码 ②、投资基金代码 ③外观模式 思维导图 一、什么是外观模式&#xff1f;…...

编程日记 2023/9/4 7:50:47

Stack Overflow开发者调查发布：AI将如何协助DevOps

Stack Overflow 发布了开创性的2023年度开发人员调查报告 [1]。报告对 90,000 多名开发人员进行了调查&#xff0c;全面展示了当前软件开发人员的体验。接下来&#xff0c;本文将重点介绍几项重要发现&#xff0c;即重要编程语言和工具偏好、人工智能在开发工作流程中的应用以及…...

编程日记 2023/9/4 7:49:46

去掉鼠标系列之二：Sublime Text快捷键使用指南

系列之二&#xff0c;Sublime Text。 Sublime Text 是我们常用的文本工具&#xff0c;常常要沉浸如其中使用&#xff0c;而不希望被鼠标打扰&#xff0c;所以也记录一下。 学会下面这些快捷键&#xff0c;基本上就不需要移动鼠标啦。 1&#xff0c;CtrlK&#xff0c;CtrlV …...

编程日记 2023/9/4 7:48:46

docker-compose安装node-exporter, prometheus, grafana

基础 exporter提供监控数据 prometheus拉取监控数据 grafana可视化监控数据 准备 全部操作在/root/mypromethus中执行 node_exporter docker-compose -f node-exporter.yaml up -d # web访问&#xff0c;查看node_exporter采集到的数据 http://192.168.1.102:9101/metrics…...

编程日记 2023/9/4 7:47:44

企业架构LNMP学习笔记10

1、Nginx版本&#xff0c;在实际的业务场景中&#xff0c;需要使用软件新版本的功能、特性。就需要对原有软件进行升级或重装系统。 Nginx的版本需要升级迭代。那么如何进行升级呢&#xff1f;线上服务器如何升级&#xff0c;我们选择稳定版本。 从nginx的1.14版本升级到ngin…...

编程日记 2023/9/4 7:46:43

[国产MCU]-W801开发实例-I2C控制器

I2C控制器 文章目录 I2C控制器1、I2C控制器介绍2、I2C驱动API2、I2C简单使用示例1、I2C控制器介绍 I2C总线是一种简单、双向二线同步串口总线。I2C总线设备之间通信只需两根线即可完成设备之间的数据传输。 I2C总线设备分为主机和从机，这取决于数据传输方向。I2C总线上的主机…...

编程日记 2023/9/4 7:45:41

植物根系基因组与数据分析

1.背景 这段内容主要是关于植物对干旱胁迫的反应&#xff0c;并介绍了生活在植物体内外以及根际的真菌和细菌的作用。然而&#xff0c;目前对这些真菌和细菌的稳定性了解甚少。作者通过调查微生物群落组成和微生物相关性的方法&#xff0c;对农业系统中真菌和细菌对干旱的抗性…...

编程日记 2023/9/4 7:44:40

2.3 数据模型

思维导图&#xff1a; 前言&#xff1a; 我的理解&#xff1a; 这段话介绍了概念模型和数据模型之间的关系&#xff0c;以及数据模型的定义和重要性。具体解读如下&#xff1a; 1. **概念模型**&#xff1a;它是一种描述现实世界数据关系的抽象模型&#xff0c;不依赖于任何…...

编程日记 2023/9/4 7:43:38

RT-Thread 中断管理学习（一）

中断管理 什么是中断&#xff1f;简单的解释就是系统正在处理某一个正常事件&#xff0c;忽然被另一个需要马上处理的紧急事件打断&#xff0c;系统转而处理这个紧急事件&#xff0c;待处理完毕&#xff0c;再恢复运行刚才被打断的事件。生活中&#xff0c;我们经常会遇到这样…...

编程日记 2023/9/4 7:42:37

学习周报9.3

文章目录 前言文献阅读一摘要挑战基于时间序列的 GAN 分类 文献阅读二摘要介绍提出的模型:时间序列GAN (TimeGAN) 代码学习总结 前言 本周阅读两篇文献&#xff0c;文献一是一篇时序生成方面的综述&#xff0c;主要了解基于时间序列 的GAN主要分类以及时间序列GAN方面面临的一…...

编程日记 2023/9/4 7:41:36

自制射频功率计：基于AD8317芯片，成本43欧元实现1MHz-10GHz测量

1. 项目概述&#xff1a;为什么我要亲手打造一台射频功率计在无人机和模型飞行器的圈子里&#xff0c;尤其是在我们荷兰FMS Spaarnwoude俱乐部&#xff0c;合规飞行是头等大事。我给我的八轴飞行器加装了云台相机和图传系统&#xff0c;工作在5.8GHz频段。根据本地法规&#xf…...

编程新知 2026/5/26 2:11:22

Agent开发面试通关攻略：吃透稳拿offer

阅读前置&#xff1a;2026年当下最卷也最缺人的AI岗位&#xff0c;一定是AI Agent开发。最近刷遍CSDN、牛客、力扣最新面经&#xff0c;发现一个非常明显的招聘趋势&#xff1a;普通大模型微调岗位饱和内卷&#xff0c;而AI Agent开发岗位人才严重缺口&#xff0c;薪资更高、竞…...

编程新知 2026/5/26 1:51:13

FT231XQ USB串口桥接板设计解析与实战应用指南

1. 项目概述&#xff1a;从FT232R到FT231XQ的USB串口桥接板演进在嵌入式开发和硬件调试的日常工作中&#xff0c;一个可靠、小巧且功能清晰的USB转串口&#xff08;UART&#xff09;桥接板&#xff08;Breakout Board&#xff0c; 简称BoB&#xff09;几乎是工程师手边的标配工…...

编程新知 2026/5/26 0:01:56

大佬推荐的网络安全学习路线（从基础到高级，超级详细）

大佬推荐的网络安全学习路线&#xff08;从基础到高级&#xff0c;超级详细&#xff09; 说起网络安全&#xff0c;你可能会担心它是一个过时的行业。有人说&#xff0c;网络安全快卷死了&#xff0c;你既要攻又要防&#xff0c;并且随着技术的发展&#xff0c;你还要不断地学…...

编程新知 2026/5/25 23:25:14

PCL 基于强度的双边滤波【2026最新版】

目录 一、算法原理 1、计算步骤 2、算法源码 3、函数解析 4、参考文献 二、代码实现 三、结果展示 四、滤波后未发生变化的原因 五、解决办法 六、结果展示 七、相关链接 本文由CSDN点云侠原创，博客长期更新，本文最近一次更新时间为：2026年5月24日。 一、算法原理 1、计算…...

编程新知 2026/5/25 22:24:26

巨量投放总结

巨量商务管理平台 &#xff1a; https://business.oceanengine.com 巨量广告投放平台&#xff1a; https://ad.oceanengine.com 商务管理平台 账户 广告组 计划 广告投放平台 层级关系: 广告组 -> 计划 -> 创意 对应FB: 系列 - > 广告组 -> 广告...

编程新知 2026/5/25 22:24:26

国内大学生常用的AI写作辅助平台有哪些？

国内高校学生常用的 AI 写作辅助平台&#xff0c;以本土化全流程工具为主&#xff0c;结合通用大模型与专项功能模块&#xff0c;覆盖选题构思、大纲搭建、初稿撰写、语言润色、降重处理、查重检测及格式排版等关键环节&#xff0c;以下是主流平台详解与对比&#xff1a; 一、本…...

编程新知 2026/5/25 20:03:51

2026数据治理平台选型：五款产品如何赋能数据中台建设？

一、引言&#xff1a;数据中台的成败&#xff0c;关键在治理在数字化浪潮的席卷下&#xff0c;“数据中台”已成为当代企业信息化架构中的核心战略组件。然而&#xff0c;一个悖论正困扰着大量企业&#xff1a;数据中台的基础设施搭建日趋完善&#xff0c;但真正将数据转化为业…...

编程新知 2026/5/25 18:01:44

人工智能的伦理与安全：这3个问题，软件测试从业者必须重视

随着大语言模型、生成式AI的爆发式落地&#xff0c;人工智能已经从实验室走向千行百业的生产场景&#xff0c;深刻改变着软件开发与交付的逻辑。对于直接把控产品质量关口的软件测试从业者来说&#xff0c;我们的职责早已不再是单纯验证功能可用性、排查性能bug那么简单——AI系…...

编程新知 2026/5/25 17:53:13

Linux 负载均衡的 cache_nice_tries：缓存友好的迁移尝试

简介现如今服务器、嵌入式设备、工控主板普遍采用多核、NUMA 架构 CPU&#xff0c;多进程多线程并发运行模式成为常态。Linux 内核依靠调度域分层负载均衡机制&#xff0c;分散 CPU 运行压力&#xff0c;避免单核心负载过高、其余核心空闲浪费硬件算力。但任务跨核心迁移是一把…...

编程新知 2026/5/27 0:25:42