margin塌陷

解决方法：

1、给父级顶加上一条线，不太合适。

2、bfc

block format context

设定bfc后，特定的盒子会遵循另一套语法规则，解决了margin塌陷

触发bfc元素

1）position:absolute;

2）display:inline-block;

3）float:left/right;

4）overflow:hidden; //溢出和隐藏

CSS--margin塌陷的更多相关文章

  1. css margin塌陷问题

    一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...

  2. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

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

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

  4. margin塌陷与margin合并（margin），清除浮动

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

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

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

  6. margin塌陷与BFC总结

    只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...

  7. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  8. 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. 6.margin塌陷问题

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

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

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

随机推荐

  1. java操作vaftpd实现上传、下载

    1.配置文件conf/vsftpd.properties (我是单独写了一个配置文件,你可以直接写在application中) vsftpd.ip=192.168.**.** vsftpd.user= ...

  2. Codeforces 1038 E - Maximum Matching

    E - Maximum Matching 思路: 欧拉图 定理:一个度数为奇数的点的个数小于等于2的联通图存在欧拉回路 对于这道题目的图,点的个数为4,所以最坏的情况下4个点的度数都为奇数,在这种情况 ...

  3. Unity Shader入门精要之 screen post-processing effect

    本篇记录了学习Unity Shader入门精要的屏幕后处理的一些知识点. OnRenderImage(RenderTexture src, RenderTexture dest) 以上函数是Unity ...

  4. compile FFMPEG under windows

    这个文章应该算是中文版最好的了.但是还有一些需要修正. 特别是winsock2的处理 win10 msys2 vs2015 ffmpeg3.2.2 编译 这个英文版的才是最好的 Building ff ...

  5. C语言逗号运算符和逗号表达式基础总结

    逗号运算符的作用: 1,起分隔符的作用: 定义变量用于分隔变量:int a,b输入或输出时用于分隔输出表列 printf("%d%d",a,b) 2,用于逗号表达式的顺序运算符 语 ...

  6. English trip V1 - B 5.Is It Cold Outside? 外面很冷？ Teacher:Corrine Key: weather

    In this lesson you will learn to talk about the weather. 本节课将学习到关于天气 课上内容(Lesson) 词汇(Key Word ) # 关于 ...

  7. MapReduce处理气象数据

    老师:MissDu 提交作业 1. 用Python编写WordCount程序并提交任务 程序 WordCount 输入 一个包含大量单词的文本文件 输出 文件中每个单词及其出现次数(频数),并按照单 ...

  8. 【PowerDesigner】【5】数据模型 CDM

    前言:各种箭头的含义其实我还是有点混乱,所以这里只做记录 参考博客: 1,Powerdesigner数据库建模--概念模型--ER图[转] - holycrap - 博客园https://www.cn ...

  9. 把javabean复制到另一个javabean 使用BeanUtils.copyProperties(a,b) 复制

    该方法对于两种不同的jar包有两种不同的意义 ,a,b通常是两个结构相似的javabean,注意:a,b里的定义类型名称必须一致才能复制 引用的是org.springframework.beans 则 ...

  10. java的同步实现

    在java编程中,经常需要用到同步,而同步的实现使用最多的就是synchronized关键字了. synchronized关键字涉及到“锁”的概念,首先先了解一下相关锁的知识. java的内置锁:每个 ...