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. Nginx 性能调优

    原文地址:http://nginx.com/blog/tuning-nginx/ Tuning NGINX for Performance Nginx 性能调优 NGINX is well known ...

  2. vue2.0-elementUI

    main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import ...

  3. Whats the difference between git reset --mixed, --soft, and --hard?

    https://stackoverflow.com/questions/3528245/whats-the-difference-between-git-reset-mixed-soft-and-ha ...

  4. HDU 4372 Count the Buildings

    Count the Buildings Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  5. linux下chm阅读器

    推荐使用Okular这个软件,Okular是一个pdf阅读器,但是对chm文件支持很好.

  6. 学习NLP:《自然语言处理原理与技术实现(罗刚)》PDF+代码

    自然语言处理技术已经深入我们的日常生活.我们经常用到的搜索引擎就用到了自然语言理解等自然语言处理技术.自然语言处理是一门交叉学科,涉及计算机.数学.语言学等领域的知识. <自然语言处理原理与技术 ...

  7. 5G时代即将到来,有线网络WiFi会消失不见吗?

    说到WiFi大家都不陌生了,特别是智能手机出现后,WiFi发展的速度更是可以用“神速”来形容,几乎到处都有WiFi覆盖.以致于现在大家无论去到哪里,往往第一句话就是问“这里有没有WiFi?”或者“Wi ...

  8. TCP的可靠性 窗口滑动 拥塞控制

    看这篇文章: http://www.cnblogs.com/woaiyy/p/3554182.html 窗口滑动,如下图: 流量控制 流量控制方面主要有两个要点需要掌握.一是TCP利用滑动窗口实现流量 ...

  9. 高速改动android系统默认日期方法

    高速改动android系统默认日期方法 在android系统的设备上,都有一个默认的開始日期,看过非常多设备,有些设备在没有联网的时候没有同步到系统时间的时候,竟然默认的还是1970年的日期.也见过有 ...

  10. PostgreSQL递归查询实现树状结构查询

    在Postgresql的使用过程中发现了一个非常有意思的功能,就是对于须要相似于树状结构的结果能够使用递归查询实现.比方说我们经常使用的公司部门这样的数据结构.一般我们设计表结构的时候都是相似以下的S ...