<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{padding:0;margin:0;}

        #b{margin-top:30px;margin-left:20px;width:200px;height:200px;background:pink;}

        #a{margin-top:30px;margin-left:20px;width:100px;height:100px;background:black;}

    </style>

</head>

<body>

<div id="b">

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

</div>

</body>

</html>

却得到：问题来了：为什么子黑和父红没有上边距呢

解决：为红块设置：上下border或者上下padding，或者！设置 overflow:hidden;

　　

css2--collapse的更多相关文章

  1. web前端CSS2学习2017.6.17

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...

  2. CSS2实用知识点详解

    CSS相关知识回顾目录 CSS2选择器 假选择器的使用 属性选择器的使用 边框设置 背景设置 字体设置 文本属性 a标签假选择器使用 列表设置 表格设置 鼠标设置 单位设置 隐藏显示 位置设置 清除浮 ...

  3. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  4. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  5. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  6. css2 [lang|=en] 误区

    [lang|=en] w3c说明:css2选择器,选择以en开头的的lang属性. w3c的这个解释是有误区的,en开头,但是en后面必须要有-,也就是说是选择的是en-开头

  7. CSS2中基本属性的介绍

    这是继上一篇的选择器的总结,对css2基本属性的小结!

  8. CSS2样式中选择器的介绍

    这里主要是对css2中的选择器进行了一下总结!

  9. 关于由CSS2.1所提出的的BFC的理解与样例

    今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满 ...

  10. Bootstrap 折叠（Collapse）插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...

随机推荐

  1. 猎奇过后，VR还有什么能让用户买单？

    VR乍到之时,声如迅雷,来势汹汹却转瞬而逝. 能够在市场激起千层浪,大抵是因其强势地撩起了不少好奇心者,而随着这个热闹周围聚拢层层的围观者,自然吸引了更多人驻足. 但围观之下,好奇心不会转化为购买率. ...

  2. String or binary data would be truncated 解决办法

    原因: 一般出现这个问题是因为数据库中的某个字段的长度小,而插入数据大 解决: 找到相应字段,修改表结构,使表字段大小相同或大于要插入的数据

  3. RedHat下Bugzilla的安装和配置

    Bugzilla 是一个开源的缺陷跟踪系统(Bug-Tracking System). OS:RedHat Linux 软件类型:开源 架构:B/S server端模块开发语言:perl(c/c++) ...

  4. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 解决UIButton 连续点击重复响应事件问题

    经常会遇到重复点击某个按钮 事件被响应多次的情景, 有时候可能对程序本身并没有什么影响 , 可有时候偏偏需要限制button响应事件直接的间隔 . 方法一 : 标记 1 . 利用空闲enable属性来 ...

  6. [HTML/HTML5]7 使用列表

    7.1  在Web页面中使用有序.无序.定义列表 (1)有序列表 有序列表中的每一个列表项之前,都以一个数字或字母作为编号. <ol> <li>树莓</li> &l ...

  7. loadrunner关联——对服务器返回的数据选择性提交

    在跟进项目的过程中,才体会到自己之前闷头看书再写小小的测试程序验证的学习方式很没有效率,知道动态关联,却也只是会参数化式的动态关联,这种关联是我们预先知道要提交的数据而进行的关联:更高一级的可能就是使 ...

  8. 第一种SUSE Linux IP设置方法

    第一种SUSE Linux IP设置方法ifconfig eth0 192.168.1.22 netmask 255.255.255.0 uproute add default gw 192.168. ...

  9. js 表单验证

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function i ...

  10. 转网页WB.ExecWB控件打印方法

    网页WB.ExecWB控件打印方法 2010-02-01 12:48 代码: <table width="100%" cellpadding="1" on ...