【影响CSS的margin合并的几个属性】的更多相关文章

影响CSS的margin合并的几个属性

很多人知道,在CSS中存在Margin合并的现象,比如下代码: <style> div { margin:10px; height:100px; background:red; } </style> <body> <div></div> <div></div> </body> 在这里的两个div之间的margin值不是20px而是10px,那么需要怎么才能取消这种margin合并的现象呢?有很多个属性可以做到,…

CSS：布局的三个关键属性：float、position、display

最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子,看的是一头雾水.最终决定自学CSS. 在网上下载了一本电子书<CSS权威指南>第三版.用了3个钟头看完了这本书.看的时候专拣不知道的看.譬如CSS选择器(这些了,以前就知道,并且使用jQuery就是用的CSS的选择器).盒子模型了等,所以这些就不看的.另外在学习时,根据CSS参考手册(下载网址:h…

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

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

margin合并和浮动

1.父子元素margin塌陷问题子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中content属性为必需 <div id="father"> <div id="child"></div></div> #father{width: 100px;height: 100px;background-color…

CSS的margin属性：详解margin属性

在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗? 你知道什么是垂直外边距合并? margin在块元素.内联元素中的区别? 什么时候该用padding而不是margin? 你知道负margin吗? 你知道负margin在实际工作中的用途吗? 常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时…

margin塌陷和margin合并问题及解决方案

margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; background-color:red; margin-top:100px; } .box{ width:50px; height:50px; background-color:#eee; opacity:0.8; } </style> </head> <body > <…

小记css的margin collapsing

近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录下来,希望刚開始学习的人少走弯路. 从问题说起 先给出demo的源代码和截屏,给出一个直观的印象.代码例如以下: <!DOCTYPE html> <html> <head> <style type="text/css"> html { wid…

margin塌陷与margin合并（margin），清除浮动

**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效,但会带着父级一起动(作者总结,官方定义自己查看).如: ```<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&quo…

margin的两个有趣现象：margin合并和margin塌陷

margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置margin-top:50px, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title>…

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

边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: ◆元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: ◆元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿奇…