CSS margin 边界叠加知识点

最新推荐文章于 2022-04-02 00:05:17 发布

Kabutack

最新推荐文章于 2022-04-02 00:05:17 发布

阅读量373

点赞数

分类专栏： css 文章标签： css 前端

本文链接： https://blog.csdn.net/u014497352/article/details/51010100

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几日在完成简单的网页布局任务时，遇到了 margin 边界叠加的问题，弄得稍稍有点头疼。自己也是前端小白，觉得更有效的学习方法，无非就是多练多做笔记，巩固知识。

几种常见的`margin`边界叠加

元素的顶边界与前一元素底边界发生叠加

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

理想效果：

实际效果：
元素的顶边界与父元素的顶边界发生叠加

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加

理想效果：

实际效果：
其他margin 边界叠加

请查看此篇文章

`margin` 边界叠加解决方案

透明边框border: 1px solid transparent ;
外层元素 padding
绝对定位 postion: absolute ;
外层 div overflow: hidden ;
内层 div 加 float: left; display: inline ;
外层 div 有时会用到 zoom: 1 ;

立减 ¥

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端开发：CSS相关的核心知识点

软贱开发攻城狮

09-30

1345

在前端开发过程中，有三驾马车组成：JS、CSS、HTML，JS负责页面交互，CSS负责页面样式，HTML负责页面结构，这三大块也是在实际开发中必备内容，关于三者所起到的作用不用说读者就知道。本文想要分享的是关于CSS相关的内容，尤其是在实际开发中比较常用且重要的知识点，总结分享一下，方便后期查阅使用。一、CSS的优先级和继承： 1.1 CSS的优先级：行内样式>ID选择器>类选择器>标签选择器。就近原则。

CSS（CSS3）知识点学习

于公子的博客

03-03

8291

CSS（CSS3）自我学习，知识点总结

参与评论您还未登录，请先登录后发表或查看评论

CSS 之margin知识点(必看)

09-24

下面小编就为大家带来一篇CSS 之margin知识点(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

边界重叠～！！！

weixin_34405332的博客

09-02

350

边界重叠边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 ...

元素的边界margin属性

张波的技术积累

01-08

1990

元素的边界用来分隔元素和与其相邻的元素。在CSS中，边界属性分为4个单侧边界和1个综合属性，即顶部边界属性(margin-top)，右侧边界属性(margin-right)，底部边界属性(margin-bottom)，左侧边界属性(margin-left)和边界综合属性(margin)。 margin-top用来定义元素顶部边界的显示效果，在顶部边界属性中，可以使用长度值、百分比值和au

CSS 外边距(margin)重叠及防止方法

yiyueqinghui的博客

07-11

1275

外边距重叠 1、外边距重叠时边距计算规则在规范文档中，2个或2个以上的块级盒模型，垂直相邻的margin会重叠。最终的margin值计算方法如下 margin同正，则取最大值； margin同负，则取最小值； margin一正一负，则取二者之和。 2、外边距重叠解决方案：外层元素margin边距用padding代替外层元素 overflow:hidden; 内层元素透明边框 border:1px solid transparent; 内层元素绝对定位 postion:absolut

CSS中margin边界叠加问题及解决方案(转)

weixin_30606669的博客

03-23

276

边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图： ◆元素的顶边界与前面元素的底边界发生叠加当一个元素包含在另一个元素中时（假设...

01.HTML和CSS基础知识总结（内附思维导图）

weixin_67140731的博客

04-02

1150

前端HTML和CSS基础知识总结，内附思维导图和开发软件的快捷键

幕客学习CSS3全面基础知识点

zoucanfa的博客

01-02

845

CSS基础什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览

CSS基础知识整理

菜鸟博客

11-05

2586

目录一、css基础1.选择器1.1标签选择器1.2类选择器1.3id选择器1.4后代选择器1.5子代选择器1.6并集选择器1.7交集选择器1.8hover伪类选择器1.9通配符选择器1.10结构伪类选择器1.10.1查找单个1.10.2查找多个1.10.3 根据类型查找1.11 类与id的区别1.11链接伪类选择器1.12焦点伪类选择器1.13属性选择器2.字体文本相关样式2.1字体样式2.1.1字体大小font-size2.1.2字体粗细font-weight2.1.3字体样式font-style2.1.

css margin边界叠加问题详谈

aic25820的博客

05-25

170

　　问题：给子元素一个margin-top值，其父元素会跟着往下走margin-top的值　　　　一、代码展示　　　　　　HTML 　　　　　　 <body> <div class="box"> <div class="content" id="content"></div> ...

12、margin边界、图片拼版及圆角表格制作知识

Learn All的博客

12-24

302

2.15 margin边界 Margin是边界，一个盒子的边界是4个。 Margin：10px；上、下、左、右全是10px Margin：10px 50px；第一个参数是上、下，第二个参数是左、右。 Margin：10px auto 50px；第一个是上，第二个是左右，第三个是下 Margin：10px 20px 30px 40px；顺序：上右下左（顺时针旋转）同理：padding后面参数的属性是一样的。例1：导航栏的CSS样式示例 <style type="text/css">

【CSS学习】CSS中margin边界叠加问题及解决方案

lk_wkqd的博客

06-15

515

你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。当一个元素出现

关于边界堆叠的概念及理解

weixin_30558305的博客

06-06

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。懒得抄了，记下网址。关于该问题的一些讨论，知乎：如何解决外边距叠加的问题？百度搜的的一个博客：CSS的margin边界叠加深度剖析collapsing-margin的W3C官方介绍：http://www...

html5文字用margin做重叠,css之margin 重叠现象

weixin_30932183的博客

06-03

238

1、写两个div，在上面div有 margin-bottom 的情况下效果是这样：html>margin重叠现象.top{height:100px;background:#795f98;margin-bottom:20px;}.bottom{height:100px;background:#7f9140;} 2、那如果只让下面的div有 margin-top 的情况下是怎样呢...

CSS中margin边界叠加问题及解决方案

weisuochengxuyuan的专栏

12-17

834

http://developer.51cto.com/art/201008/221940.htm 你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。 CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆

div+css[4]：css中边界属性margin

珍惜

08-19

446