<!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. LeetCode OJ 121. Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  2. Java I/O 操作的一些基本知识

    1.文件类:File ,也是唯一的单独的文件类.可以对文件进行操作.其方法有:exists(),delete(),isDirectory(),createNewFile(),getName(),get ...

  3. xampp 搭建 web mac上

    1.安装 2.修改数据库密码,删除phpmyadmin  ,用navicat 控制数据库 3.修改/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhos ...

  4. Python从json中提取数据

    #json string:s = json.loads('{"name":"test", "type":{"name": ...

  5. TCP/IP 和HTTP 协议基础知识

    来源:http://www.myhack58.com/Article/60/63/2014/50072.htm 相信不少初学手机联网开发的朋友都想知道Http与Socket连接究竟有什么区别,希望通过 ...

  6. js 总结累计大全

    1选择  select  获取val text   更改其他class值 <script type="text/javascript"> $(function(){ $ ...

  7. python 字符转换

    我们所看到的“明文字符串”,都是经过编码(比如ASCII.Uncoded.UTF-8.GB-2312等)后呈现在我们面前的. 文本中“3082”想要“所见到所得”到内存中处理,必须decode('he ...

  8. gridControl 部分属性

    DEVexpress GridControl 属性设置 2013年11月22日 ⁄ 综合 ⁄ 共 18319字 ⁄ 字号 小 中 大 ⁄ 评论关闭 1. 如何解决单击记录整行选中的问题 View-&g ...

  9. TD配置安装方式

    TD服务器搭建及配置指南 第一:安装前的环境准备 系统需安装IIS作为web服务器(停止IIS的smtp服务). 选择SQL Server2000作为数据库.Win2003需安装SP3. 以管理员登陆 ...

  10. html 任意表格

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8" />   ...