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

HTML/CSS盒子模型

news 2026/3/29 19:39:46

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

盒子模型的组成：

内容区域（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

量化版SenseVoice语音识别体验：模型缩小74%，速度提升33%实测

量化版SenseVoice语音识别体验&#xff1a;模型缩小74%&#xff0c;速度提升33%实测 1. 引言 语音识别技术正在快速渗透到我们的日常生活和工作中&#xff0c;从智能客服到会议记录&#xff0c;从实时字幕到语音搜索&#xff0c;这项技术正在改变我们与设备交互的方式。然而&…...

编程新知 2026/3/29 19:27:38

别再只调PWM了！深入Linux thermal框架，让你的风扇转速更‘聪明’

别再只调PWM了&#xff01;深入Linux thermal框架&#xff0c;让你的风扇转速更‘聪明’ 当你的服务器在深夜突然风扇狂转&#xff0c;或是笔记本在轻度使用时莫名发烫&#xff0c;单纯调整PWM占空比就像用锤子做精细手术——粗暴且低效。真正的高手都在thermal子系统的规则引擎…...

编程新知 2026/3/29 19:19:36

Audio Pixel Studio语音合成实战：正则表达式预处理文本标点停顿

Audio Pixel Studio语音合成实战&#xff1a;正则表达式预处理文本标点停顿 1. 引言&#xff1a;为什么需要文本预处理 在语音合成应用中&#xff0c;文本预处理是一个经常被忽视但至关重要的环节。Audio Pixel Studio作为一款轻量级音频处理工具&#xff0c;虽然内置了强大的…...

编程新知 2026/3/29 17:55:11

快马平台五分钟搞定dht11温湿度传感器arduino数据采集原型

最近在做一个智能家居的小项目&#xff0c;需要实时监测房间的温湿度数据。作为一个硬件开发新手&#xff0c;我选择了经典的DHT11传感器搭配Arduino来实现这个功能。整个过程比想象中顺利很多&#xff0c;特别是在InsCode(快马)平台的帮助下&#xff0c;从零开始到完成原型只用…...

编程新知 2026/3/29 17:47:09

大模型入门学习教程（非常详细）非常详细收藏我这一篇就够了！大模型教程

本文系统介绍了LLM&#xff08;大型语言模型&#xff09;的基础知识&#xff0c;包括机器学习的数学基础、Python编程及其在数据科学中的应用、神经网络原理等。文章深入剖析了LLM科学家和工程师的角色&#xff0c;涵盖了大型语言模型架构、指令数据集构建、预训练模型、监督微…...

编程新知 2026/3/29 17:20:52

丹青幻境部署案例：高校数字艺术实验室低成本GPU算力复用方案

丹青幻境部署案例&#xff1a;高校数字艺术实验室低成本GPU算力复用方案 1. 项目背景与挑战 很多高校的数字艺术、动画设计或新媒体专业&#xff0c;都面临一个共同的难题&#xff1a;教学和创作需要强大的AI绘图能力&#xff0c;但专门采购一批高性能GPU服务器&#xff0c;预…...

编程新知 2026/3/29 15:58:16

解决数字记忆碎片化的创新方案：GetQzonehistory让社交数据成为可触摸的时光胶囊

解决数字记忆碎片化的创新方案&#xff1a;GetQzonehistory让社交数据成为可触摸的时光胶囊 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 副标题&#xff1a;重构QQ空间回忆的3大突破…...

编程新知 2026/3/29 15:15:53

PiliPlus视频播放进度条：自定义绘制与交互实现终极指南

PiliPlus视频播放进度条&#xff1a;自定义绘制与交互实现终极指南 【免费下载链接】PiliPlus PiliPlus 项目地址: https://gitcode.com/gh_mirrors/pi/PiliPlus PiliPlus是一款功能强大的视频播放器应用&#xff0c;其中自定义视频播放进度条是其核心功能之一。这个进度…...

编程新知 2026/3/29 14:35:38

使用usearch进行异常行为检测：基于用户行为向量的分析

使用usearch进行异常行为检测&#xff1a;基于用户行为向量的分析 【免费下载链接】usearch Fastest Open-Source Search & Clustering engine for Vectors & &#x1f51c; Strings in C, C, Python, JavaScript, Rust, Java, Objective-C, Swift, C#, GoLang, and …...

编程新知 2026/3/29 14:29:35

# 时序数据库新玩法：用Go语言打造高性能监控系统（附完整代码）在

时序数据库新玩法&#xff1a;用Go语言打造高性能监控系统&#xff08;附完整代码&#xff09; 在现代微服务架构中&#xff0c;指标采集与实时分析已成为运维和开发团队的核心能力。传统关系型数据库难以胜任高吞吐、低延迟的时序数据写入场景&#xff0c;而 InfluxDB、Promet…...

编程新知 2026/3/29 14:05:19