<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #box{ background:red;}

 #div{width:200px;height:200px;background:blue;margin:100px;}

 #footer{height:50px;background:yellow;}

 /*

     margin传递，子元素的上下margin会传递给父级

 */

 </style>

 </head>

 <body>

 <div id="box">

     <div id="div"></div>

 </div>

 <div id="footer"></div>

 </body>

 </html>

margin传递，子元素的上下margin会传递给父级的更多相关文章

  1. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  2. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

  3. 行内元素的上下margin 和 img元素的上下margin

    行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...

  4. 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  5. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. css子元素的margin-top为何会影响父元素

    详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...

  7. 子元素应该margin-top为何会影响父元素【转】

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...

  8. 为什么子元素设置margin-top会作用在父元素上？

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

随机推荐

  1. iostransitiontranslate闪屏问题总结

    webkit在绘制页面时会将结构分为各种层,当层足够大时就会变成很大的平铺层.这样一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了,这对渲染速度来说相当的重要.webkit ...

  2. UNIX基础--用户和基本账户管理

    账户类型 系统账户 系统账户运行服务. 系统用户是那些要使用诸如DNS. 邮件, web等服务的用户. 使用帐户的原因就是安全: 如果所有的用户都由超级用户来运行, 那它们就可以不受约束地做任何事情. ...

  3. Openjudge-计算概论（A）-DNA排序

    描述: 给出一系列基因序列,由A,C,G,T四种字符组成.对于每一个序列,定义其逆序对如下: 序列中任意一对字符X和Y,若Y在X的右边(不一定相邻)且Y < X,则称X和Y为一个逆序对. 例如G ...

  4. 使用SpringMVC时，配置DispatcherServlet注意的url-pattern的问题

    url-pattern配置时注意: <!--springMVC配置--><servlet> <servlet-name>springMVC</servlet- ...

  5. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  6. 基于ZooKeeper的分布式Session实现

    1．   认识ZooKeeper ZooKeeper—— “动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始丛林里,心惊胆颤的被 ...

  7. Flask -- 会话

    会话session 在不同请求间存储特定用户的信息.它是在 Cookies 的基础上实现的,并且对 Cookies 进行密钥签名.这意味着用户可以查看你 Cookie 的内容,但却不能修改它,除非用户 ...

  8. 清除浮动clearfix

    css用clearfix清除浮动 更多2013/11/4 来源:css学习浏览量:11901 学习标签: css clearfix 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟 ...

  9. 浅析PageRank算法

    很早就对Google的PageRank算法很感兴趣,但一直没有深究,只有个轮廓性的概念.前几天趁团队outing的机会,在动车上看了一些相关的资料(PS:在动车上看看书真是一种享受),趁热打铁,将所看 ...

  10. INI文件的写入与读取

    INI文件的写入与读取 [节名]         '[]中的节名对应此API的第一参数 Name=内容      'Nmae对应此API的第二参数 API的第三参数是没有取到匹配内容时返回的字符串; ...