解决margin塌陷的问题_解决margin塌陷与margin合并(margin)清除浮动问题

**1、margin塌陷**

问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效,但会带着父级一起动(作者总结,官方定义自己查看)。如:

Document
//20pxmargin-top

效果:

**解决方法:**

(1)给父级盒子加上边框border:1px silod black;(改变结构了,不推荐使用)

Document

效果:

(2)触发盒子的BFC模型(不懂就去百度吧)

如何触发盒子的BFC呢?

1.Position:absolute; 2.display:inline-block; 3.float:left/right; 4.overflow:hiddle; 1.Position:absolute;给父级加上绝对定位,让子级相对父级动。

Document

效果:

2.display:inline-block;让父级同时具有行级属性和块级属性。

Document

效果:

3.float:left/right;让父级产生浮动流

```

Document

```

效果:

4.overflow:hiddle;溢出部分隐藏

```

Document

```

效果:

**2、margin合并**

问题:

margin-left和margin-right区域不能共用。只会叠加。

```

Document

1

2

```

效果:

两个兄弟结构垂直方向的margin共用。

```

Document

1

2

3
3

```

效果:

解决垂直方向的margin合并问题也是触动盒子的BFC。

解决方法如下:(嵌套盒子:然后:overflower:hidden;)

```

Document

1

2

3
3
```

效果:

**总结:**

在实际开发时不解决这个问题,比如说要解决垂直方面200px,为什么不直接top200px呢,不用top100px,然后bottom100px。

**顺带说一下清除浮动的两种两种方法:**

(1)在有浮动的元素的后面加入一个标签。

下面我就简单举例了:

css中:

.clrar{clear:both;}

(2)使用伪类元素,找到需要清除的标签,直接使用三件套:

.warpper::after{

content:"";

clrar:both;

display:block;

}

总结

以上所述是小编给大家介绍的解决margin塌陷与margin合并(margin)清除浮动问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

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

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

相关文章

【转】人工智能-1.2.2 神经网络是如何进行预测的

上一篇文章中我们已经知道了如何将数据输入到神经网络中。那么神经网络是如何根据这些数据进行预测的呢?我们将一张图片输入到神经网络中,神经网络是如何预测这张图中是否有猫的呢?? 这个预测的过程其实只是基于一个简单的公式&a…

js 根据公历日期 算出农历_一招教会你公历换算成农历,要不要试试看

古代的历法是干支纪年,俗称农历或阴历,现在我们都统一采用公历的阿拉伯数字纪年。因此,就存在着一个历法的换算问题。当然,我们可以查历书就直接知道了,但是这个方法并不一定方便。现在告诉大家一个简单的口诀&#xf…

【转】C# HMAC Sha1 生成签字

最近因为工作的需要,开始接触腾讯云,在调用CMQ服务时发现官方提供的SDK只有基于.Net Framework的,而现在做.net项目的谁不是用.net core啊。好吧,既然没有官方的SDK,只能自己写服务来调用Api了。遇到的第一个麻烦点的事…

去哪查阅RFC文档?

什么是RFC文档 RFC。 Request For Comments(RFC),是一系列以编号排定的文件。文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件。目前RFC文件是由Internet Society(ISOC)赞助发行。基本的互联…

【转】Power Platform(简介)

Power Platform 系统通过允许用户执行以下三个关键操作来帮助他们推动业务发展:使用 Power BI 从数据中获得见解,通过使用 PowerApps 构建的应用程序来推动智能业务流程,以及使用 Power Automate 自动执行这些流程。 这些解决方案彼此配合协作…

云原生的本质_CloudNative

[TOC]阿里云原生技术公开课第1章:云原生课本节课程要点云原生技术发展历程(为什么要学习这门课)课程简介与预备知识(这门课到底教什么)云原生的定义与技术要点(本节正式内容)一、为什么要开设云原生技术公开课?1. 云原生技术发展简史首先从第一个问题进行…

【Python】打包程序后运行程序出现 ModuleNotFoundError: No module named ‘PySide6‘

问题描述 在python虚拟环境中使用PySide6开发桌面程序,执行打包命令: pyinstaller.exe -F -w .\main.py 打包程序完成后,双击运行,弹出对话框提示: ModuleNotFoundError: No module named ‘PySide6’ 原因 虚拟环境…

【转】人工智能-1.2.1 如何将数据输入到神经网络中

1.2.1 如何将数据输入到神经网络中 通过对前面文章的学习,我们已经知道神经网络可以实现真正的人工智能。本小节我会进行详细地讲解,让大家彻底地弄懂神经网络。在仅仅只学完一篇文章后,你肯定依然感觉朦胧,这是正常的&#xff0…

php对接钉钉_php实现钉钉业务报警机器人

使用场景,服务器报异常错误,想要及时收到报警信息并处理环境介绍,本博使用yaf框架php,仅仅提供思路,参考,具体根据自己实际情况进行编写1,每十分钟执行一次任务脚本# 每10分钟执行一次的任务if …

【转】30 岁前实现财务自由的人,都做对了哪些事?

不光是30岁,凡是能实现财务自由的,都有一个特点,这个特点叫做: 做庄思维。 在出现近现代法制社会之前,财富的原始积累最快的方式总结起来说到底都是“抢”和“骗”,然后既得利益者为了保护自己的胜利果实…

protobuf2和3同时安装_在 Ubuntu 上安装 Protobuf 3 的教程详解

什么时候需要安装如果使用 protoc 命令,遇到 Protoc not found,表示未安装。或者,执行时出现错误:This parser only recognizes "proto2",则表示不是3.0版。安装过程及可能遇到的问题安装指令详细介绍请参考…

【转】WPF中关于样式和模板的区别

1.WPF样式 类似于Web应用程序中的CSS&#xff0c;在WPF中可以为控件定义统一的样式(Style)。样式属于资源的一种&#xff0c;例如为Button定义统一的背景颜色和字体&#xff1a; <Window.Resources> <Style TargetType"Button"> <Setter Property&quo…

Qt实现多屏幕多分辨率自适应

这里仅大概描述一下实现思路。 运行条件 两个屏幕&#xff0c;分辨率不同。Qt软件 问题提出 前段时间写了一个软件&#xff0c;窗口内有自绘内容。 自绘内容里面用的长度单位都是像素。可想而知&#xff0c;在开发者的电脑屏幕上大小都是符合要求的。到这一步都没问题。 软…

您需要来自pc的权限才能_微信电脑版还是鸡肋吗?微信PC版3.0内测体验

[PConline 应用]微信PC版3.0来了&#xff01;这到底是个怎样的版本&#xff1f;先说结果吧&#xff0c;好消息是微信PC端新版很快就要上线了&#xff0c;坏消息是这一回采用是邀请内测制&#xff0c;注定了很多人只能等到正式上线后&#xff0c;才能见到新版本&#xff01;目前…

【转】【MySQL】事务与锁(四):行锁到底锁住的是什么?记录?字段?索引?

首先我们有三张表t1,t2,t3&#xff0c;它们都是只有两个字段&#xff0c; int类型的id和varchar类型的name&#xff1b;区别是t1没有索引&#xff0c;t2有主键索引&#xff0c;t3有唯一索引。 再强调一次&#xff0c;在实验前必须提前关闭自动提交&#xff0c;set autocommitof…

【编译原理】理解BNF

BNF范式 下面来自百度百科&#xff1a; 巴科斯范式&#xff08;BNF&#xff09;所描述的语法是与上下文无关的。它具有语法简单&#xff0c;表示明确&#xff0c;便于语法分析和编译的特点。 源码解析使用的算法就是BNF或者其改进算法。 什么是上下文无关文法呢&#xff1f; …

gibmacos 网络加速_黑苹果教程续集,利用EFI在线安装MacOS

本内容来源于什么值得买APP&#xff0c;观点仅代表作者本人 &#xff5c;作者&#xff1a;qianseyue创作立场声明&#xff1a;本人非某领域/某品牌从业人员&#xff0c;有机会学到一些专业知识。然而每个人站在不同立场&#xff0c;内容就会有所偏重&#xff0c;客观与否还请大…

【转】1.1【MySQL】基本SQL语句大全

1.库操作 登录数据库&#xff08;-h -u -p -P都不需要空格&#xff09; mysql -h {ip} -u {username} -p{password} -P {port} # -h ip默认是 localhost # -p 指定密码时中间不要空格&#xff0c;比如 -p123456 # -P 端口默认是 3306 1.1 增 create database 库名1.2 删 dr…

【GUI开发】图像处理类软件的浏览功能实现模型

图像处理软件包括但不限于&#xff1a; 图片浏览器&#xff0c;2D地图浏览器、图片编辑器等软件。 为了处理大分辨率图片&#xff0c;一般采用GDAL加载图像&#xff0c;GDAL可以动态加载图像的一部分&#xff0c;可以建立图像金字塔&#xff0c;优化加载速度。 一般的图像处理…

自动事务_JDBC进阶(二)事务编程

一、事务简介事务是用户定义的一个数据库操作序列&#xff0c;这些操作要么全做&#xff0c;要么全不做&#xff0c;是一个不可分割的工作单位。事务具有ACID特性&#xff1a;原子性&#xff08;Atomicity&#xff09; —— 原子性是指事务是一个不可分割的工作单位&#xff0c…