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

HTML/CSS盒子模型

news 2026/2/10 23:58:17

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

盒子模型的组成：

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

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/2/4 18:09:49

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2026/1/24 4:39:04

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

HTML前端开发：JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

编程新知 2025/10/6 18:44:24