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. (转)Lua的table库函数insert、remove、concat、sort详细介绍

    原帖链接:http://www.jb51.net/article/64711.htm#comments 有增注标识的地方为额外注释,非原帖内容. 函数列表:(增注:只能用于数组!) table.ins ...

  2. Codeforces 444 C - DZY Loves Colors

    C - DZY Loves Colors 思路: 分块,复杂度有点玄学,和普通分块不同的是在这个块被一次染色的时候暴力染整个块. 代码: #pragma GCC optimize(2) #pragma ...

  3. python - selenium 2 升级到最新版本

    python - selenium 2 升级到最新版本 之前一直用的是selenium 2.48 .firefox36 而实际用户的浏览器可能都有自动更新功能,所以版本基本上是最新的.所以这次专门做了 ...

  4. POP3、SMTP和IMAP介绍和设置

    什么是POP3.SMTP和IMAP? 参照:http://help.163.com/09/1223/14/5R7P6CJ600753VB8.html 用于 Outlook 的 POP 和 IMAP 电 ...

  5. win10 java环境变量

    https://jingyan.baidu.com/article/fd8044fa2c22f15031137a2a.html

  6. 雷林鹏分享：XMLHttpRequest 对象

    XMLHttpRequest 对象 XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpRequest 对象是开发者的梦想,因为您能够: ...

  7. hdu-6035 Colorful Tree

    题目意思是计算所有路径(n*(n-1)/2)经过的不同颜色的数目和. 这个数目和可以转化为每种颜色经过的路径数目的求和,而这个求和又等价于颜色总数*n*(n-1)/2-没有经过某种颜色的边的数量的求和 ...

  8. P2375 [NOI2014]动物园

    考虑kmp. 这个题的主要问题就在于怎样使复杂度是正确的O(n). 可以先预处理一个数组cnt[]表示不考虑不能相交这个限制,有多少个border. 这个东西其实也就是fail树上的深度. 然后考虑怎 ...

  9. 前端Vue之vue的基本操作

    1.1 vue.js的快速入门使用 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中 ...

  10. New task CodeForces - 788E (线段树优化dp)

    比较套路的一个题, 对每个数维护一颗线段树来转移就好了. #include <iostream> #include <algorithm> #include <cstdi ...