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

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

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

一.隐藏加省略 单行文本: 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"…

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

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是相邻边界宽度中最大的值 如果出现负边界,则在最大的正边界中减去绝对值最大的负边界 如果没有正边界,则从零中减去绝对值最大的负边界 最终的margin值计算方法如下: a.全部都为正值,取最大者: b.不全是正值,则都取绝对值,然后用正值减去最大值: c.没有正值,则都取绝对值,然后用0减去最大值.…

两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是正值,则都取绝对值,然后用正值减去最大值:c.没有正值,则…

在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overflow: auto; width: 300px; height: 500px; border: 2px solid #6666FF; } .box{ width: 100px; height: 100px; font-family: "simhei"; } .top{ margin-bot…

   盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置. margin属性可以用来指定盒子外边框的大小,有两种方法设置外边距:第一种单独属性分别设置四个方向的外边距,第二种是使用简写属性同时设置多个方向的外边距(注意顺序),margin 属性接受任何长度单位,可以是像素px.英寸in.毫米mm或 em 一.单独属性设置各个方向外边距 盒子有四个方向的外…

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