本篇文章就给大家介绍css中margin边界叠加问题及解决方案 。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。
CSS的margin边界叠加深度剖析
边界叠加简介
边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。
立即学习“前端免费学习笔记（深入）”；
当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：
◆元素的顶边界与前面元素的底边界发生叠加
当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图：
◆元素的顶边界与父元素的顶边界发生叠加
尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，见图：
◆元素的顶边界与底边界发生叠加
如果这个边界碰到另一个元素的边界，它还会发生叠加，见图：
◆空元素中已经叠加的边界与另一个空元素的边界发生叠加
这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有边界都叠加到一起，形成一个小的边界。
边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例（见图2-8）。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了。
◆边界叠加在元素之间维护了一致的距离
只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。
边界叠加的问题
边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考p元素内嵌套段落的简单示例：
Thisparagraphhasa20pxmargin.
p框设置了10像素边界，段落设置了20像素的边界：
#box{ margin:10px; background-color:#d5d5d5; } p{ margin:20px; background-color:#6699ff; }你会自然地认为产生的样式会像图1-1那样，在段落和p之间有20像素的距离，在p外边围绕着10像素的边界。
图1-1
但是，产生的样式实际上像图1-2。
图1-2
这里发生了两个情况。首先，段落的20像素上边界和上边界与p的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被p包围，而是突出到p的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。
如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。
为了让前面的示例看起来像图1-1这样，只需在p周围添加补白或边框：
#box{ margin:10px; padding:1px;/*或者border:1pxsolidcolor;*/ background-color:#d5d5d5; } p{ margin:20px; background-color:#6699ff; }边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。
补充解决方案：
1.外层padding
2.透明边框border:1pxsolidtransparent;
3.绝对定位postion:absolute:
4.外层poverflow:hidden;
5.内层p 加float:left;display:inline;
6.外层p有时会用到zoom:1;
以上就是本篇的全部内容，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap视频教程！
以上就是CSS中margin边界叠加问题及解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612528.html赞 (0)打赏微信扫一扫
支付宝扫一扫
微信扫一扫 
支付宝扫一扫 关于作者
相关推荐
-
HTML+CSS制作简单下拉菜单的实例代码
在页面布局时，经常会用到下拉列表，作为web前端开发人员，你知道html下拉菜单怎么做吗？这篇文章就和大家分享html，css下拉菜单的代码，有一定的参考价值，感兴趣的朋友可以参考一下。 在制作HTML下拉菜单时，会用到很多CSS属性，比如：hover，list-style，float浮动，disp…
-
如何使用纯CSS实现飞机舷窗风格的toggle控件
本篇文章给大家带来的内容是关于如何使用纯css实现飞机舷窗风格的toggle控件，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…
-
CSS样式类的讲解（附实例）
本篇文章给大家带来的内容是关于css样式类的讲解（附实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是…
-
CSS样式类的实例代码（导航栏、分页、层级选择器）
本篇文章给大家带来的内容是关于css样式类的实例代码（导航栏、分页、层级选择器），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 导航栏 拥有易用的导航条对于任何网站都很重要。通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。导航栏需要标准的 HTML 作为基础。在我们…
-
css中浮动的label的介绍（附案例）
本篇文章给大家带来的内容是关于css中浮动的label的介绍（附案例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input…
-
CSS中filter属性定义了元素的可视效果的介绍
本篇文章给大家带来的内容是关于css中filter属性定义了元素的可视效果的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 blur 给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊。 如果…
-
css中Flex布局要素的介绍（附代码）
本篇文章给大家带来的内容是关于css中flex布局要素的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 flex布局为 “弹性布局”，任何一个元素都可以通过设置css属性 display:flex; webkit内核浏览器为 display: …
-
css中display属性的介绍（附实例）
本篇文章给大家带来的内容是关于css中display属性的介绍（附实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 css定位属性Positioning display: none 不再页面渲染元素 css-test .content { display: none; } 这一…
-
css专业术语有哪些？css专业术语介绍
本篇文章给大家带来的内容是关于css专业术语有哪些？css专业术语介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 1. 属性 如height、color等，称作css的属性。 2. 值 在css中，如：10px, 50%, #ccc等这些都称作css的值。比较常见的类型值有：整…
-
CSS堆叠上下文是什么？有什么作用？
本篇文章给大家带来的内容是关于css堆叠上下文是什么？有什么作用？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 CSS 堆叠上下文是啥？ 我们有一个基本样式的div，样式如下： div{ width: 200px; height: 200px; border:10px solid …
-
CSS如何实现反方向圆角？（代码）
本篇文章给大家带来的内容是关于css如何实现反方向圆角？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 原理 父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 CSS样式 .wrappe…
-
css改变单选框颜色的方法实现（附代码）
本篇文章给大家带来的内容是关于css改变单选框颜色的方法实现（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 是否曾经被业务提出”能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！”，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开i…
-
css如何实现图片大于div时的居中显示（代码实例）
本文给大家介绍css如何实现图片大于div时的居中显示（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 当图片大于p时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个p，如果直接将图片不设置宽高，将其外层p设置overflow:hidden；这时即使外层…
-
CSS长度单位之em介绍
本文给大家带来css长度单位之em介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 一、为什么使用em em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。 em主要是应用于弹性布局，下面给出一个小栗子说明…
-
CSS什么是图标字体（IconFont）？有什么用？
本篇主要介绍一种非常好用的图标大法——图标字体（iconfont）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。 网站上经常会用到各种图标，之前网页上使用图标主要采用精灵图（背景位…
-
CSS如何实现滚动的图片栏（代码实例）
本文给大家介绍css如何实现滚动的图片栏（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下 主要原理是通过动画向左移动。 首先给出两组一样的图片（同一行上），让整体…
-
CSS如何设置背景属性（详解）
本文给大家详解css如何设置背景属性，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 背景相关属性主要有： background-color 背景颜色 background-image 背景图片 background-repeat 是否平铺 repeat （默认平铺） | re…
-
css如何设置颜色值？rgb()设置颜色（代码实例）
css如何设置颜色值？本篇文章就给介绍在css中如何用rgb()来设置颜色，让大家可以了解rgb()设置颜色的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先我们来了解一下rgb是什么意思？ RGB：一种色彩模式 ，是工业界一种颜色标准；可以通过对红(R)、绿(G)、蓝(…
-
如何使用纯CSS实现热气球的效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯css实现热气球的效果（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom，容器中…
-
css如何对文本进行修饰？css修饰文本样式的9种属性（总结）
css如何对文本进行修饰？本篇文章就给大家总结了css修饰文本文字的一些方法，介绍一些css 修饰文本的属性，让大家了解css修饰文本文字的9种属性有哪些。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 1、css设置文本文字颜色的属性 color属性：设置文本文字颜色。用法如下：…
