div给了margin,上下还重叠了

2024-10-17

上下margin重叠传递问题

我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部分总结到这里啦~ 下面的几个部分应该是margin重叠问题的所有情况了: 1.两个普通元素上下的margin会合并为一个margin,哪个大选哪个! 两个浮动元素不会出现margin传递的问题,依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值

垂直margin为什么会重叠

之前看到的post中有这样的一个问题:垂直margin为什么会重叠?我可以说出solve,但是说不出why. 在stackoverflow上找到了一个很好的解释:margin的定义不是让元素移动xxpx,而是这个元素的旁边必须有xxxpx的的空白. 得到了这个解释之后,想一下“为首个子元素添加20px的上边距,父元素竟跟着子元素下沉了”这个问题,再思考一下解决方法.给父元素添加overflow开启一个BFC,或者给父元素增加padding.border之类,这样的做法使元素的旁边边界不是上一个盒

CSS外边距margin上下元素重叠

CSS外边距margin上下元素重叠转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终的mar

margin百分比，重叠和auto

一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下, 若书写模式变成纵向的时候,其参照将会变成包含块的高度. 二. margin重叠 1. 通常特性 block水平元素(不包括float和absolute元素) 不考虑wr

DIV+CSS：Margin和Padding属性[转载]

margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom.margin-left,控制块级元素之间的距离,它们是透明不可见的. Padding: 包括padding-top.padding-right.padding-bottom.padding-left,控制块级元素内部,content与border之间的距离. 例子h2: h2 { font-s

文本溢出后，隐藏显示"..."和margin边距重叠

一.隐藏加省略单行文本: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行文本: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //是几行就填几二.边距重叠如果有两个div <div class="d1"

css中设置div水平居中，margin:0px auto无用的情况

在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置width时,解释器不知道你的宽度,当然就不会居中.就会到左边去,所以设置width就好了.

css中设置div水平居中，margin:0px auto没用的情况

在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置width时,解释器不知道你的宽度,当然就不会居中,就会到左边去,所以设置width就好了. http://blog.csdn.net/liang5630/article/details/39030799

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签

深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性. 重叠 margin重叠又叫margin合并,发生这种情况有两个前提 1.只发生在block元素上(不包括float.absolute.inline-block元素) 2.只发生在垂直方向上(不考虑writing-mode) [相邻的兄弟元素] margin重叠效果展示: item1 和

margin 碰到过的重叠问题

双倍margin 稍微记录一下,因为常忘 float + margin,实际边距会变成设置值的双倍. 解决办法是将元素设为 display:inline 最好要了解 IE的 haslayout 问题垂直方向的margin重叠以前一直知道相邻的两个块元素在垂直方向margin重叠问题. 但是没有考虑过父元素和第一个子元素的重叠情况代码如下: <div class="wrap"> <div class="one">margin 2

IE下div使用margin:0px auto不居中的原因

IE下div使用margin:0px auto不居中的原因一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明文本居中,即[ Copy ] [ Run ] [ Save

转载：IE下div使用margin:0px auto不居中的原因

转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body&

2016/2/25 1， margin auto 垂直方向测试无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向上margin:auto;无效. auto会自动适应各种宽度的屏幕.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子

div覆盖div DIV相互重叠如何解决

div覆盖div,出现div与div盒子之间产生重叠覆盖现象,而内容没有出现覆盖重叠现象原因与解决方法.DIVCSS5通过CSS图文案例介绍产生原因与解决方法.DIV与DIV覆盖原因与解决方法. 可能您遇到过上下结构的布局,下面DIV内容重叠上面DIV内容上,也可能下面内容覆盖掉上面DIV布局,形成DIV与DIV覆盖重叠现象;您也可能遇到过相邻的两个DIV盒子发生重叠覆盖现象,这些是什么问题如何解决? 接下来DIVCSS5通过案例来演示这两种兼容性DIV覆盖重叠现象问题,并解释原因与解决方法.

margin 重叠问题深入探究

margin 重叠问题 Margin Collapse 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(重叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距重叠. MDN-外边距重叠重叠的结果: 1.两个相邻的外边距都是正数时,重叠结果是它们两者之间较大的值. 2.两个相邻的外边距都是负数时,重叠结果是两者绝对值的较大值. 3.两个外边距一正一负时,重叠结果是两者的相加的和. margin 重叠本质上的问题还是 B

使用 margin 让div块内容居中

问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为自动 auto. <style> div{ width:300px; margin:0 auto; } </style> </head> <body> <div>The money come back!</div> </body>

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

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终

css margin重叠

父子元素margin(垂直方向)重叠解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性: 给父元素添加边缘属性,如padding.border: 同级元素margin(垂直方向)反向重叠同级元素margin反向重叠时,元素之间的距离为两个margin值中较大的那个. 因解决办法较少且兼容性较差,在具体编码中,应尽量避免这种情况的出现. 水平方向margin无重叠现象.一般只有块级元素会有margin重叠的问题.

margin纵向重叠

速记: 如p的纵向 margin 是 16px,那么两个之间纵向的距离是多少?-- 按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px. 因为纵向的 margin 是会重叠的,如果两者不一样大的话,大的会把小的"吃掉",也就是p1+p2=max(p1--->margin,p2--->margin) 本文学习自:https://www.cnblogs.com/ww01/p/9184026.html

div给了margin,上下还重叠了

热门专题