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. Android布局文件的载入过程分析:Activity.setContentView()源代码分析

    大家都知道在Activity的onCreate()中调用Activity.setContent()方法能够载入布局文件以设置该Activity的显示界面.本文将从setContentView()的源代 ...

  2. 通过C语言程序改动控制台的背景和前景颜色

    本文主要解说怎样通过C语言来改动dos背景和前景颜色.我们首先来看一下dos的背景颜色的属性. 打开開始菜单,点击执行,弹出执行对话框.输入cmd,回车. (打开dos控制台) 在命令提示符界面下,输 ...

  3. UML之序列图

    一 序列图概述: 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸. 横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存 ...

  4. AIX 软件包结构

    AIX installp软件包结构  1. usr部分 2. / (root)部分 3. share部分    AIX 为了实现在客户机 / 服务器环境下安装的灵活性将安装包划分为 usr 部分 .r ...

  5. Firefox 浏览器有用的插件

    1.Undo Closed Tabs Button或Undo Closed Tabs Button (revived) 恢复关闭的标签页 2.NetVideohunter Video Download ...

  6. js预编译和函数执行

    javascript 执行过程 1.语法检测(有没有基本的语法错误,例如中文,关键字错误...)2.词法分析(预编译) (1)创建全局GO(global object)对象 (2)对var声明的变量进 ...

  7. Spring Cloud学习笔记【三】服务消费者Feign

    Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...

  8. Linux 下查看某进程的线程数

    1.查看文件 /proc/${pid}/status2.pstree -p ${pid}3.输入 top -bH -d 3 -p ${pid}top -H手册中说:-H : Threads toggl ...

  9. struts.xml配置action没用,任意href自动跳到主页,在action中print没用?????

    今晚弄了好久都搞不清楚,晕死我了. 上网找也没找到解决办法. 然后看了Build Path.好吧,有几个没用的jar包,remove之.我去,马上正常了,具体原因未知. 总结:删除jar包不代表Bui ...

  10. 将yyyyMMdd格式的字符串转成日期DateTime格式

    1.DateTime dt= DateTime.ParseExact("20110720", "yyyyMMdd", Thread.CurrentThread. ...