HTML(16)——边距问题

清楚默认样式

很多标签都有默认的样式,往往我们不需要这些样式,就需要清楚默认样式

写法:

  • 用通配符选择器,选择所有标签,清除所有内外边距
  • 选中所有的选择器清楚

 *{

 margin:0;

padding:0;

}

 

 盒子模型——元素溢出 

作用:控制溢出元素的内容的显示方式

属性名:overflow

属性值效果
hidden溢出隐藏
scroll                         溢出滚动(无论是否溢出,都显示滚动条)
auto溢出滚动(溢出才显示滚动条)

测试:

原网页为:

 hidden:

  • scroll

auto:

外边距问题

合并现象 

场景:垂直排列的兄弟元素,上下margin会合并

现象:取两个margin中的较大值生效

示例:

.one{

 margin-botton:50px;

}

.two{

margin-top:20px;

}

 

两个盒子之间为50px

塌陷问题

场景:父子级的标签,子级的添加上外边距会产生塌陷问题

现象:导致父级一起向下移动

示例:

.father{

 width:300px;

 height:300px;

 background-color:pink;

}

.son{

 width:100px;

 height:100px;

 background-color:orange;

margin-top:50px;

}

可见父级盒子由于子盒子的上外边距也跟着塌陷。

解决方法

  • 取消子级margin,父级设置padding
  • 父级设置overflow:hidden
  • 父级设置border-top

行内元素——内外边距问题

场景:行内元素添加margin和padding,只能改变水平位置,无法改变元素垂直位置。

解决办法:给行内元素添加line-height可以改变垂直位置 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33044.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL锁、加锁机制(超详细)—— 锁分类、全局锁、共享锁、排他锁;表锁、元数据锁、意向锁;行锁、间隙锁、临键锁;乐观锁、悲观锁

文章目录 一、概述1.1 MySQL锁的由来1.2 锁定义1.3 锁分类 二、共享锁与排他锁2.1 共享锁(S锁)2.2 排他锁(X锁)2.3 MySQL锁的释放 三、全局锁3.1 介绍3.2 语法3.3 特点 四、表级锁4.1 介绍4.2 表锁4.3 元数据锁(Meta D…

雷达标定与解析

融合雷达与解析雷达数据的相关代码。感谢开源社区的贡献。以下代码继承了很多人的工作。 如果是单雷达: 直接进行标定,所以就是接收相关的话题然后发布。 lidar_calibration_params.yaml: calibration:在这个接口里面x_offset: 0.0y_offset:…

u盘sd卡格式化怎么恢复,3种恢复方法教学

u盘sd卡格式化怎么恢复,这是许多人在误操作后最关心的问题。我们会详细介绍五种有效的恢复方法,并且提供恢复原理的教学视频,帮助您轻松找回U盘和SD卡上被格式化的数据。 一. 数据存储与恢复的原理 1. U盘、移动硬盘、硬盘以及固态盘存储数据…

自然语言处理:第三十八章: 开箱即用的SOTA时间序列大模型 -Timsfm

自然语言处理:第三十八章: 开箱即用的SOTA时间序列大模型 -Timsfm 文章链接:[2310.10688] A decoder-only foundation model for time-series forecasting (arxiv.org) 项目链接: google-research/timesfm: TimesFM (Time Series Foundation Model) is a pretrained time-ser…

IPD推行成功的核心要素(十二)CDP确保产品开发的正确方向

IPD体系是一种全新的产品研发管理模式,它将研发合格产品整个过程分为确保开发做正确的事和如何正确地做事两个阶段。确保开发做正确的事是指在产品进入研发之初就清晰地定义出有竞争力的产品,核心是确保产品能够对准客户需求,能够给客户带来商…

游戏高度可配置化(一)通用数据引擎(data-e)及其在模块化游戏开发中的应用构想图解

游戏高度可配置化(一)通用数据引擎(data-e)及其在模块化游戏开发中的应用构想图解 码客 卢益贵 ygluu 关键词:游戏策划 可配置化 模块化配置 数据引擎 条件系统 红点系统 一、前言 在插件式模块化软件开发当中,既要模块高度独…

封装一个上拉加载的组件(无限滚动)

一、封装 1.这个是在vue3环境下的封装 2.整体思路: 2.1传入一个elRef,其实就是一个使用页面的ref。 2.2也可以不传elRef,则默认滚动的是window。 import { onMounted, onUnmounted, ref } from vue; import { throttle } from underscore;ex…

ros 创建新的工作空间

创建工作空间 # catkin_ws是自己创建工作空间的名字 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src catkin_init_workspace编译工作空间 cd ~/catkin_ws/src catkin_make打开并编辑 .bashrc 文件: nano ~/.bashrc在 .bashrc 文件末尾添加以下内容…

解决Windows下移动硬盘无法弹出的问题:\$Extend\$RmMetadata\$TxfLog\$TxfLog.blf

想弹出移动硬盘时,Windows告诉我设备正在使用 然后我使用LockHunter查看到底是哪个应用在使用我的移动硬盘,发现是 System(PID 4) E x t e n d Extend ExtendRmMetadata T x f L o g TxfLog TxfLogTxfLog.blf这个文件正在使用 这是一个索引文件 解决 …

数据清洗!即插即用!异常值、缺失值、离群值处理、残差分析和孤立森林异常检测,确保数据清洗的全面性和准确性,MATLAB程序!

适用平台:Matlab2021版及以上 数据清洗是数据处理和分析中的一个关键步骤,特别是对于像风电场这样的大型、复杂数据集。清洗数据的目的是为了确保数据的准确性、一致性和完整性,从而提高数据分析的质量和可信度,是深度学习训练和…

PTA基础题考点汇总

一:字符串(数组)的逆序,栈的方法 **字符串数组的逆序 : ** 标准容器库的知识:定义stack容器于字符串:stackv; string s; //这里用到了c中stl(标准容器库的知识)stack&…

一二三应用开发平台应用开发示例(4)——视图类型介绍以及新增、修改、查看视图配置

调整上级属性类型 前面为了快速展示平台的低代码配置功能,将实体文件夹的数据模型上级属性的数据类型暂时配置为文本类型,现在我们调整下,将其数据类型调整为实体,如下图所示: 数据类型需要选择实体,并在实…

STM32单片机系统

1.STM32最小系统 微型计算机(面) 单片机最小系统是指能够将单片机芯片运行所必需的最少的硬件电路集成在一起的系统。 它是一种基本的单片机应用系统,通常由主芯片,时钟电路,复位电路,电源电路&#xff0c…

Ubuntu/Linux SSH 端口转发

文章目录 Ubuntu/Linux SSH 端口转发概述本地端口转发场景一场景二 参考资料 Ubuntu/Linux SSH 端口转发 概述 SSH, Secure Shell 是一种在网络上用于安全远程登录到另一台机器的工具。除了远程登录以外,ssh 的端口转发是它的另一项强大功能。通过 ssh 端口转发功…

计算机网络知识点整理1

目录 激励的话 一、计算机发展的三个阶段 二、互联网标准化工作 三、互联网的组成 边缘部分 核心部分 电路交换的主要特点 分组交换的主要特点 四、三大交换方式的主要特点 总结 激励的话 没关系的,有三分钟热度,就有三分钟收获 一、计算机…

RabbitMQ实践——使用WebFlux响应式方式实时返回队列中消息

大纲 Pom.xml监听队列实时返回消息测试完整代码工程代码 在之前的案例中,我们在管理后台收发消息都是通过短连接的形式。本文我们将探索对队列中消息的实时读取,并通过流式数据返回给客户端。 webflux是反应式Web框架,客户端可以通过一个长连…

捷云等保一体机 产品服务一站式等保合规交付解决方案

等保2.0的变化 2019 年 5 月 13 日,网络安全等级保护制度 2.0 国家标准(简称“等保 2.0”)正式发布,将等保 2.0 基本要求、测评要求、安全设计技术要求框架统一为安全管理中心支持下的三重防护结构框架。定级对象在按照等保 2.0 …

Python爬虫-贝壳新房

前言 本文是该专栏的第32篇,后面会持续分享python爬虫干货知识,记得关注。 本文以某房网为例,如下图所示,采集对应城市的新房房源数据。具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。接下来,跟着笔者直接往下看正文详细内容。(附带完整代码) 正文 地…

TensorFlow高阶API使用与PyTorch的安装

欢迎来到 Papicatch的博客 文章目录 🍉TensorFlow高阶API使用 🍈示例1:使用tf.keras构建模型 🍍通过“序贯式”方法构建模型 🍍通过“函数式”方法构建模型 🍈示例2:编译模型关键代码 &am…

ArkTS开发系列之导航 (2.6 图形)

上篇回顾:ArkTS开发系列之导航 (2.5.2 页面组件导航) 本篇内容: 显示图片、自定义图形和画布自定义图形的学习使用 一、知识储备 1. 图片组件(Image) 可以展示jpg 、png 、svg 、gif等各格式的网络和本地资源文件图…