1.使用padding

2.给父级使用border

3.给父级添加属性 overflow:hidden

4.浮动

5.定位{absolute,fixed}

6.伪元素代码

.parent:before{
content: "";
display: table;
}

父子margin塌陷的更多相关文章

  1. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  2. margin塌陷与margin合并(margin),清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  3. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  4. 6.margin塌陷问题

    当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...

  5. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  6. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  8. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  9. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

随机推荐

  1. C语言typedef struct具体解释

    在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...

  2. hdu 思维风暴

    点击打开链接 偶然在杭电上看到的题目,数学题.好像是一道六年级奥赛题目,反正我是没有想出来,也知道往那上面想.就是找不到规律啊.学习了网上的方法, 这道题须要求出来多添加的点,就是与之前每条边添加的点 ...

  3. C++学习笔记11-面向对象2

     1.  仅仅能初始化直接基类 一个类仅仅能初始化自己的直接基类.直接就是在派生列表中指定的类.假设类C 从类B 派生,类B 从类A 派生,则B 是C 的直接基类.尽管每一个C 类对象包括一个A 类部 ...

  4. Java基本数据类型及字节

    1.基本类型可以分为三类,字符类型char,布尔类型boolean以及数值类型byte.short.int.long.float.double.数值类型又可以分为整数类型byte.short.int. ...

  5. Noip 2016 Day1 题解

    老师让我们刷历年真题, 然后漫不经心的说了一句:“你们就先做做noip2016 day1 吧” ...... 我还能说什么,,,,,老师你这是明摆着伤害我们啊2333333333 预计分数:100+2 ...

  6. 分享一个vue中的vue-Resource用法

    //引入 <script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.js" type="text ...

  7. FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有。

    FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有. 1: man 在线查询 man ls2: ls 查看目录与档案 ls -la3: ln 建立链接文件 ln -f ...

  8. 【J-meter】参数及相应数据中文显示乱码问题

    参考资料: http://www.51testing.com/html/00/130600-1360743.html http://www.cnblogs.com/fengpingfan/p/5851 ...

  9. javascript 将时间戳格式化

    <script>function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().repl ...

  10. js插件---评分插件Rating如何使用

    js插件---评分插件Rating如何使用 一.总结 一句话总结:form下的input和a标签,input记录值,a标签显示样式 12 <form data-am-rating> 13 ...