【margin属性以及垂直外边距重叠问题】的更多相关文章

margin属性以及垂直外边距重叠问题

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

__x__(22)0907第四天__ 垂直外边距重叠

外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外边距重叠 垂直相邻的两个 div,上面的 div 设置了 margin-bootom,遇到下面 div 设置的 margin-top,会发生重叠,产生一个较大的外边距 2. 父子元素 垂直外边距重合 父子元素 div 时,为子元素 div 设置上边距时,两个 div 都会发生向下偏移,此时父子元素的…

__x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

<div class="box1"> <tabl></table> <div class="box2"></div> </div> 原理1: <table> 将会隔离父子元素, 所以解决垂直外边距重叠问题方法1: .clearfix:before{ content:""; display:table; } 原理2:  解决高度塌陷方法2: .clearfix:af…

Margin的垂直外边距问题

做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div和父元素body一样高,并且距离<html>上边距50px,如下图(a): <!doctype html> <html> <head> <title></title> <meta charset="utf-8"&…

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的…

css盒子模型、垂直外边距合并

css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容区域的宽度后,再设置盒子的填充.边框.边距值,盒子在页面中实际占据的页面尺寸的计算是: 水平方向上::width+2*padding+2*border+2*margin, 垂直方向上::height+2*padding+2*border+2*margin, 不过需要注意的是行内元素,在不改变它的表现…

【css基础】垂直外边距的合并

近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小样例,效果图例如以下:红色的块margin-bottom为30px; 黄色的块的margin-top: 20px;最后的垂直的边距是为30px; 2. 当两个块级元素的外边距都小于0时,取绝值最大的那个作为两者之间的垂直边距. 请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-10px…

“margin塌陷” 嵌套盒子外边距合并现象

来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者都为正外边距以最大的外边距为准: 若存在负边距, 合并后的外边距为最大正外边距减去绝对值最大的负边距: 若无正外边距,则用0减去绝对值最大负边距. 2.父元素与第一个/最后一个子元素之间 如果块级元素的 margin-top/margin-bottom 与它的第一个/最后一个子元素的margin-t…

CSS 垂直外边距合并：规范、延伸、原理、解决办法

<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详解,总结如下: 规范: 8.3.1 Collapsing margins 计算方法: 如果外边距都是正数,取大的: 如果一个正数,一个负数,正外边距-负外边距的绝对值,相当于正外边距+负外边距: 都为负数,取外边距绝对值较大的: 如果相邻外边距有多个,要一起参与计算,不能分布计算:要注意,相邻的元素不一定非要…

CSS min-height不能解决垂直外边距合并问题

垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了. 当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了:当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现:而当父元素设定了min-height,并且…