<!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. linux 安装与启动nginx

    linux系统为Centos 64位 一.去http://nginx.org/download/上下载相应的版本下载nginx-1.8.0.tar.gz(注:还有更高版本的). 二.解压 tar -z ...

  2. android打包大小笔录

    版本 4.6.1 1-1  游戏完整包的大小 1-2 1级代码压缩 1-3 2级代码压缩 1-4 3级代码压缩 2-1 删除核心战斗的部分资源 2-2 2级代码压缩 3-0 删除外部UI的资源  剩下 ...

  3. 【实验室笔记】C#上位机学习笔记

    用C#编写上位机,基本流程是[1]串口配置,[2]串口发送数据,[3]串口接收数据. [1]串口配置 串口的属性配置包括: No.1串口端口号 No.2串口波特率 No.3串口数据位 No.4串口停止 ...

  4. zookeeper的安装及集群配置

    1.解压 2.修改配置文件 cp zoo_sample.cfg zoo.cfg vim zoo.cfg dataDir=/usr/local/zookeeperData 其余采用默认 参数说明: ti ...

  5. ASP.NET中application对象的用法（面试题）

    ASP.NET中application对象的用法 本文导读:Application对象是HttpApplicationState类的一个实例,Application状态是整个应用程序全局的.Appli ...

  6. python&MongoDB

    1 #!/usr/bin/python 2 #-*- coding:utf-8 3 import pymongo 4 connection=pymongo.MongoClient() 5 tdb=co ...

  7. POJ 3737/三分

    题目链接[http://poj.org/problem?id=3737] 题意:给出一个圆锥的表面积,求最大的体积,并输出最大体积的时候的圆锥的高度和底面积. 方法一: 根据定理:圆锥的表面积一定的时 ...

  8. C# 中的局部static变量

    其实这问题没什么可讨论的,C#不支持局部静态变量. 但还是想了一下C#为什么不支持局部静态变量,以下均是个人想法. C++和C支持局部静态变量,也就是在一个函数的内部声明一个静态变量,这种变量的特定如 ...

  9. Android中的Fragment页面切换和selector选择器

    效果如图: 提示:下面是用的整个的图片 下面看代码: //--------------------这是主页面布局文件----------------------- <?xml version=& ...

  10. tmux commands

    最近在学Linux,用到tmux这个命令,看到很多快捷键的介绍,个人觉得不太好用,因此把几个常用的命令记录下来,以便以后学习和使用. 常用tmux commands: tmux ls         ...