<!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. CDOJ 1270 Playfair(模拟)

    题目链接 Playfair is a kind of substitution cipher.And the encryption role is simple.In general,there ar ...

  2. 关于c++中方法名前面的双冒号

    #include "iostream" using namespace std; template <typename T> void swap(T &a, T ...

  3. 使用 NSUserDefaults 读取和写入自定义对象

    众所周知,NSUserDefaults只能保存诸如NSArray.NSDictionary.NSData.NSNumber等基本数据类型,如果我们强制保存自定义的类,就会出现这个错误:Attempt ...

  4. Tcp Socket非阻塞recv

    最近看了许多关于网络编程的资料,自己小记一下,以方便以后查找. 什么是阻塞socket,什么是非阻塞socket.对于这个问题,我们要先弄清什么是阻塞/非阻塞.阻塞与非阻塞是对一个文件描述符指定的文件 ...

  5. Linux RCU机制详解

    关于rcu的几点声明: 1:RCU使用在读者多而写者少的情况.RCU和读写锁相似.但RCU的读者占锁没有任何的系统开销.写者与写写者之间必须要保持同步,且写者必须要等它之前的读者全部都退出之后才能释放 ...

  6. HDU 5543 Pick The Sticks

    背包变形.与普通的背包问题不同的是:允许有两个物品可以花费减半. 因此加一维即可,dp[i][j][k]表示前i个物品,有j个花费减半了,总花费为k的情况下的最优解. #pragma comment( ...

  7. crontab定时任务以及其中中文乱码问题

    一.小例子 1.写个测试文件 2.将文件权限变为可执行文件 3.在crontab文件中写定时任务 格式: 分/时 * * * 用户名 可执行文件路径 >> log文件路径 2>&am ...

  8. ssh proxy配置

    在.ssh目录下新建config文件,并添加以下内容: Host 10.100.101.123 ProxyCommand=nc -X 5 -x [proxyip:proxyport] %h %p

  9. Java is Pass-by-Value!

    Java is strictly pass-by-value. which means, when you pass a variable to a method, the method will j ...

  10. UIView animateWithDuration 使用详解

    在ios4.0及以后鼓励使用animateWithDuration方法来实现动画效果.当然,以往的begin/commit的方法依然使用,下面详细解释一下animateWithDuration的使用方 ...