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

盒子模型(外边距的设置)

  • 用于页面中元素的合理布局
  • 所有的元素都可以有宽高
  • 所有元素都是一个矩形
  • 所有元素都可以看成一个盒子
  • 盒子包括 外边距+边框+内边距+元素内容
    在这里插入图片描述

外边距设置

  • 外边距的要素:top、bottom、left、right
  • 外边距的尺寸:合法的尺寸单位
  • 外边距语法:marign-方向:外边距的尺寸
  • 使用百分比作为尺寸单位时,参考的是父级的尺寸
  • 可以使用负值,此时元素领地缩小
  • 正值时,元素领地扩大

语法:

  • marign:上 右 下 左
  • marign:上 左右 下
  • marign:上下 左右
  • marign:上下左右
    在这里插入图片描述

外边距设置注意事项

  • 当两个元素上下排列时,margin-bottom和margin-top的值会合并,并取最大值
  • 当两个元素左右排列时,margin-left和margin-right的值不合并
  • 行级元素只有左右外边距,没有上下外边距
  • img元素是行内块级元素,会有一个下边距,因为其元素的默认属性设置的是基线对齐的方式,可采用下面的命令清除样式
        img{vertical-align: top;}
  • 块级元素和行内块级元素的外边距四个方向都有效

相关文章:

盒子模型(外边距的设置)

用于页面中元素的合理布局所有的元素都可以有宽高所有元素都是一个矩形所有元素都可以看成一个盒子盒子包括 外边距边框内边距元素内容 外边距设置 外边距的要素:top、bottom、left、right外边距的尺寸:合法的尺寸单位外边距语法:marign-方…...

买卖股票的最佳时机 IV - 困难

************* C topic&#xff1a;188. 买卖股票的最佳时机 IV - 力扣&#xff08;LeetCode&#xff09; ************* Stock angin: Still stocks. Intuitively, it feels hard. For once: class Solution { public:int maxProfit(vector<int>& prices) {in…...

ElasticSearch - 深入解析 Elasticsearch Composite Aggregation 的分页与去重机制

文章目录 Pre概述什么是 composite aggregation&#xff1f;基本结构after 参数的作用问题背景&#xff1a;传统分页的重复问题after 的设计理念响应示例 after 如何确保数据不重复核心机制Example步骤 1: 创建测试数据创建索引插入测试数据 步骤 2: 查询第一页结果查询第一页返…...

HTML5 Web IndexedDB 数据库

IndexedDB 是一种基于浏览器的 NoSQL 数据库&#xff0c;用于在客户端持久化存储大量结构化数据。 IndexedDB 允许通过键值对存储复杂的数据对象&#xff08;如对象、数组、文件等&#xff09;&#xff0c;并支持事务、索引、版本控制和复杂查询操作。 IndexedDB 是异步的&am…...

苏黎世联邦理工学院与加州大学伯克利分校推出MaxInfoRL:平衡内在与外在探索的全新强化学习框架

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

读书笔记~管理修炼-缄默效应

缄默效应&#xff1a;学会正确批评下属 员工明明犯了错误&#xff0c;却不及时告知你&#xff0c;总是拖到最后一刻无法弥补时才不得不承认出了问题——你遇到过这样的问题吗&#xff1f; 这其实是缄默效应在发挥作用。 在职场中&#xff0c;即使再扁平化的环境&…...

LabVIEW声音信号处理系统

开发了一种基于LabVIEW的声音信号处理系统&#xff0c;通过集成的信号采集与分析一体化解决方案&#xff0c;提升电子信息领域教学与研究的质量。系统利用LabVIEW图形化编程环境和硬件如USB数据采集卡及声音传感器&#xff0c;实现了从声音信号的采集到频谱分析的全过程。 项目…...

2024.12.10——攻防世界Web_php_include

知识点&#xff1a;代码审计 文件包含 伪协议 伪协议知识点补充&#xff1a; 在PHP中&#xff0c;伪协议&#xff08;Pseudo Protocols&#xff09;也被称为流包装器&#xff0c;这些伪协议以 php://开头&#xff0c;后面跟着一些参数&#xff0c;用于指定要执行的操作或需要…...

Linux shell脚本用于常见图片png、jpg、jpeg、webp、tiff格式批量转PDF文件

Linux Debian12基于ImageMagick图像处理工具编写shell脚本用于常见图片png、jpg、jpeg、webp、tiff格式批量转PDF文件&#xff0c;”多个图片分开生成多个PDF文件“或者“多个图片合并生成一个PDF文件” 在Linux系统中&#xff0c;使用ImageMagick可以图片格式转换&#xff0c…...

有没有检测吸烟的软件 ai视频检测分析厂区抽烟报警#Python

在现代厂区管理中&#xff0c;安全与规范是重中之重&#xff0c;而吸烟行为的管控则是其中关键一环。传统的禁烟管理方式往往依赖人工巡逻&#xff0c;效率低且存在监管死角&#xff0c;难以满足当下复杂多变的厂区环境需求。此时&#xff0c;AI视频检测技术应运而生&#xff0…...

LeetCode 每日一题 2024/12/16-2024/12/22

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 12/16 1847. 最近的房间12/17 3291. 形成目标字符串需要的最少字符串数 I12/18 3292. 形成目标字符串需要的最少字符串数 II12/19 3285. 找到稳定山的下标12/20 3138. 同位…...

gitlab代码推送

点击这个√ 修改的文件全部选上 填好提交的名称 点击commit 选取提交的 gitlab 库 点击Push...

小红书飞书素材库 | AI改写 | 无水印下载 | 多维表格 | 采集同步 | 影刀RPA

小红书飞书素材库 | AI改写 | 无水印下载 | 多维表格 | 采集同步 | 影刀RPA 模板准备 进入【小红书】素材采集库_荷逸模板&#xff0c;点击使用模板 创建文档应用 在开发者后台 - 飞书开放平台创建 企业自建应用 (需要账号有相应的权限, 如果没有权限向管理员申请) 获取 Ap…...

【计算机视觉基础CV-图像分类】02-入门详解图像分类、经典数据集、比赛与冠军图像模型演进史

前言 图像分类&#xff08;Image Classification&#xff09;是计算机视觉&#xff08;Computer Vision&#xff09;中一项基础且核心的任务。简单来说&#xff0c;就是让计算机从给定的类别集合中&#xff0c;为一张输入图片分配一个正确的类别标签。这个过程听起来直观&…...

【机器学习】探索机器学习与人工智能:驱动未来创新的关键技术

探索机器学习与人工智能&#xff1a;驱动未来创新的关键技术 前言&#xff1a;人工智能的核心技术深度学习&#xff1a;自然语言处理&#xff08;NLP&#xff09;&#xff1a;计算机视觉&#xff1a; 机器学习与人工智能的驱动创新医疗健康领域金融行业智能制造与工业互联网智慧…...

DS二叉树--基于数组存储的构建

题目描述 任意二叉树可以根据完全二叉树性质保存在一个数组中。已知二叉树的数组存储&#xff0c;用程序构建该二叉树。 提示&#xff1a;用递归方法或非递归都可以 输入 第一行输入一个整数t&#xff0c;表示有t个测试数据 第二行起输入二叉树的数组存储结果&#xff0c;空…...

入侵他人电脑,实现远程控制(待补充)

待补充 在获取他人无线网网络密码后&#xff0c;进一步的操作是实现入侵他人电脑&#xff0c;这一步需要获取对方的IP地址并需要制作自己的代码工具自动化的开启或者打开对方的远程访问权限。 1、获取IP地址&#xff08;通过伪造的网页、伪造的Windows窗口、hook&#xff0c;信…...

STM32基于标准库如何查看时钟主频,100%简单

基于原有的工程写入两行代码&#xff0c;见下图 RCC_ClocksTypeDef get_rcc_clock; RCC_GetClocksFreq(&get_rcc_clock); 进入我们的仿真加入断点&#xff0c;然后在watch1观察变量值数据&#xff0c;然后在计算器计算就能得出&#xff0c;如上图。 但是这样看的PAB1上…...

HarmonyOS NEXT 技术实践-基于意图框架服务实现智能分发

在智能设备的交互中&#xff0c;如何准确理解并及时响应用户需求&#xff0c;成为提升用户体验的关键。HarmonyOS Next 的意图框架服务&#xff08;Intents Kit&#xff09;为这一目标提供了强大的技术支持。本文将通过一个项目实现的示例&#xff0c;展示如何使用意图框架服务…...

[原创](Modern C++)现代C++的第三方库的导入方式: 例如Visual Studio 2022导入GSL 4.1.0

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共23年] 职业生涯: 21年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi、XCode、Eclipse…...

【jenkins插件】

1) 2) 3) 4) 5) 6) 参考: 知识库/运维/Jenkins/01-安装/13-插件.md zfoo/java-developer-document - 码云 - 开源中国...

springboot472基于web网上村委会业务办理系统(论文+源码)_kaic

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本网上村委会业务办理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…...

七层网络笔记

首先&#xff0c;用户感知到的只是最上面一层应用层&#xff0c;自上而下每层都依赖于下一层&#xff0c;所以我们从最下一层开始切入&#xff0c;比较好理解 每层都运行特定的协议&#xff0c;越往上越靠近用户&#xff0c;越往下越靠近硬件 物理层由来&#xff1a;上面提到&a…...

PostgreSQL编译安装教程

下载安装 1.在家目录创建一个文件夹放下载安装包 mkdir softwarecd software 2.下载文件压缩包 wget https://ftp.postgresql.org/pub/source/v16.0/postgresql-16.0.tar.gz 3.解压 tar -xzvf postgresql-16.0.tar.gz 4.编译 在software/postgresql-16.0下 cd software…...

音视频学习(二十四):hls协议

基本原理 HLS协议通过将视频文件切分成多个小的媒体段&#xff08;通常是10秒左右的.ts文件&#xff09;&#xff0c;并通过HTTP传输给客户端。视频播放过程中&#xff0c;客户端按顺序请求这些小段文件来逐步播放整个视频流。HLS还支持多种码率&#xff0c;以便适应不同网络条…...

pytorch MoE(专家混合网络)的简单实现。

专家混合&#xff08;Mixture of Experts, MoE&#xff09;是一种深度学习模型架构&#xff0c;通常用于处理大规模数据和复杂任务。它通过将输入分配给多个专家网络&#xff08;即子模型&#xff09;&#xff0c;然后根据门控网络&#xff08;gating network&#xff09;的输出…...

代码随想录day24 | leetcode 93.复原IP地址 90.子集 90.子集II

93.复原IP地址 Java class Solution {List<String> result new ArrayList<String>();StringBuilder stringBuilder new StringBuilder();public List<String> restoreIpAddresses(String s) {backtracking(s, 0, 0);return result;}// number表示stringb…...

Scala项目(图书管理系统)

3、service BookService package org.app package serviceimport org.app.dao.{BookDAO, BorrowRecordDAO} import org.app.models.{BookModel, BorrowRecordModel}import java.time.LocalDateTime import scala.collection.mutable.ListBuffer// 图书业务逻辑层 class BookS…...

Deepin/Linux clash TUN模式不起作用,因网关导致的问题的解决方案。

网关导致的问题的解决方案 查看路由 ip route寻找默认路由 默认路由应当为Mihomo default dev Mihomo scope link 如果不是&#xff0c;则 sudo ip route add default dev Mihomo在clash TUN开关状态发生变化时&#xff0c;Mihomo网卡会消失&#xff0c;所以提示找不到网卡…...

【macos java反编译工具Java Decompiler】

mac上能用的反编译工具 https://java-decompiler.github.io/...

VLAN数据格式

概念&#xff1a;VLAN叫做虚拟局域网&#xff0c;指在物理网络中根据用于、工作组、应用等进行逻辑划分的局域网&#xff0c;是一个广播域&#xff0c;与用户的物理位置没有关系。 作用&#xff1a;VLAN可以灵活的进行分段和组织&#xff0c;能够实现更好的安全性&#xff0c;…...

Error response from daemon: Get “https://registry-1.docker.io/v2/“ 问题解决

文章目录 一、参考资料二、修改nameserver三、修改daemon.json文件 一、参考资料 问题的根源在于系统每次都会自动修改DNS&#xff0c;所以需要永久修改 linux永久修改dns 二、修改nameserver sudo nano /etc/resolvconf/resolv.conf.d/head 没有该文件的话需要安装 sudo a…...

每天40分玩转Django:Django部署

Django部署 一、今日学习内容概述 学习模块重要程度主要内容生产环境配置⭐⭐⭐⭐⭐settings配置、环境变量WSGI服务器⭐⭐⭐⭐⭐Gunicorn配置、性能优化Nginx配置⭐⭐⭐⭐反向代理、静态文件安全设置⭐⭐⭐⭐⭐SSL证书、安全选项 二、生产环境配置 2.1 项目结构调整 mypr…...

学习threejs,scene.overrideMaterial全局材质效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.2 ☘️THREE.Scene 场景1.2 ☘️…...

新版Android Studio 2024.1.2版本,如何通过无线wifi连接手机实现交互

1、首先&#xff0c;先确定手机是否启动了开发者选项 在我的设备 -> 全部参数 -> MIUI版本点击6下 &#xff08;有的手机是 关于手机 -> 查看手机版本 &#xff09; 2、在设置中搜索 开启开发者选项 3、进入开发者选项后&#xff0c;在 调试 中选择 无线调试并选择…...

PTA 时间几何

作者 Happyer 单位 湖北文理学院 乘火车或飞机常有由始发时间历经时间计算终到时间的事儿。我们通过三个 函数来完成&#xff0c;当然&#xff0c;为了存储几点几分这个时间&#xff0c;我们专门定义了一个结构体Time_gxx,你要完成的是写二个函数&#xff1a;1&#xff09;st…...

事务、管道

目录 事务 相关命令 悲观锁 乐观锁 管道 实例 Pipeline与原生批量命令对比 Pipeline与事物对比 使用Pipeline注意事项 事务 相关命令 命令描述discard取消事务&#xff0c;放弃执行事务块内的所有命令exec执行所有事务块内的事务&#xff08;所有命令依次执行&#x…...

深入了解蓝牙Profile类型与设备的对应关系

在现代技术中,蓝牙作为一种无线通信技术,广泛应用于各种设备之间的短距离通信。不同的设备在连接时使用不同的蓝牙Profile(配置文件),每种Profile都为特定的设备功能提供支持,例如音频流传输、语音通话、文件传输等。在本文中,我们将详细介绍蓝牙Profile的常见类型及其对…...

net_device结构

net_device是Linux内核中用于表示网络设备的数据结构,它存储了特定网络设备的所有信息,无论是真实设备(如Ethernet)还是虚拟设备(如Bonding或VLAN)。以下是对net_device的详细解析: 一、定义与位置 net_device数据结构定义在Linux内核的include/linux/netdevice.h文件中…...

DuetWebControl 开源项目常见问题解决方案

DuetWebControl 开源项目常见问题解决方案 DuetWebControl A completely new web interface for the Duet electronics [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/du/DuetWebControl 一、项目基础介绍 DuetWebControl 是一个为 RepRapFirmware 设计的完全响…...

c# 不同数据类型转换

namespace Systempublic static class ConvertExtension {public static byte[] ToBinaryByteArray(this byte[] bytes){// 每个字节有 8 位&#xff0c;所以总位数为 bytes.Length * 8byte[] binaryArray new byte[bytes.Length * 8];int index 0;// 遍历每个字节foreach (b…...

2025.01.15python商业数据分析top2

一、 导入项目 导入项目、准备项目数据 import pandas as pd# 文件路径为python文件位置下的相对路径dwxpd.read_excel("电蚊香套装市场近三年交易额.xlsx") fmfzpd.read_excel("防霉防蛀片市场近三年交易额.xlsx") msmcpd.read_excel("灭鼠杀虫剂市…...

软件信息化平台项目投标技术方案中如何进行项目实施方案以及安全质量方案培训售后方案应急预案的编写?

在软件平台投标技术方案中,项目实施方案、质量管理、安全管理、培训方案、售后服务方案和应急预案等章节至关重要,它们分别从不同角度确保项目的顺利实施、高质量交付、安全稳定运行、用户有效使用、持续服务保障以及应对突发情况的能力。各章节编制要点相互关联、协同作用,…...

目标检测-R-CNN

R-CNN在2014年被提出&#xff0c;算法流程可以概括如下&#xff1a; 候选区域生成&#xff1a;利用选择性搜索(selective search)方法找出图片中可能存在目标的候选区域(region proposal) CNN网络提取特征&#xff1a;对候选区域进行特征提取(可以使用AlexNet、VGG等网络) 目…...

计算机毕业设计PySpark+PyFlink+Hive地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Hadoop 机器学习 深度学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

panddleocr-文本检测+文本方向分类+文本识别整体流程

panddleocr-文本检测文本方向分类文本识别整体流程 通过文本检测–>文本方向分类–>文本识别&#xff0c;即可识别出0~360度的旋转文本。 文本检测的最小外接矩形框根据长宽可以看到90度的角度&#xff0c;而再加入文本方向分类就能扩展到180度的角度。...

【物联网技术与应用】实验9:红外遥控实验

实验9 红外遥控实验 【实验介绍】 红外接线头的主要功能为IC化的一种受光元件&#xff0c;其内部是将光电二极管&#xff08;俗称接收管&#xff09;和集成IC共同组合封装而成&#xff0c;其IC设计主要以类比式控制&#xff0c;一般主要接受38KHz的频率的红外线&#xff0c;而…...

青少年编程与数学 02-004 Go语言Web编程 18课题、日志记录

青少年编程与数学 02-004 Go语言Web编程 18课题、日志记录 一、日志记录&#xff08;一&#xff09;目的&#xff08;二&#xff09;内容类型&#xff08;三&#xff09;日志记录的格式 二、Go Web 日志记录1. 使用标准库 log 包2. 使用 logrus3. 在 Gin 框架中集成 logrus4. 使…...

【数据结构练习题】栈与队列

栈与队列 选择题括号匹配逆波兰表达式求值出栈入栈次序匹配最小栈设计循环队列面试题1. 用队列实现栈。[OJ链接](https://leetcode.cn/problems/implement-stack-using-queues/solutions/)2. 用栈实现队列。[OJ链接](https://leetcode.cn/problems/implement-queue-using-stack…...

ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含

目录 1、web82 2、web83 3、web84 4、web85 5、web86 1、web82 新增过滤点 . &#xff0c;查看提示&#xff1a;利用 session 对话进行文件包含&#xff0c;通过条件竞争实现。 条件竞争这个知识点在文件上传、不死马利用与查杀这些里面也会涉及&#xff0c;如果大家不熟…...