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. <山月记>:中岛敦 -选段

    因为害怕自己并非明珠而不敢刻苦琢磨,又因为有几分相信自己是明珠,而不能与瓦砾碌碌为伍,遂逐渐远离世间,疏避人群,结果在内心不断地用愤懑和羞怒饲育着自己懦弱的自尊心.世上每个人都是驯兽师,而那匹猛兽,就 ...

  2. tchart2

  3. validateRequest 相关的作用

    在 Web 应用程序中,要阻止依赖于恶意输入字符串的黑客攻击,约束和验证用户输入是必不可少的.跨站点脚本攻击就是此类攻击的一个示例.其他类型的恶意数据或不需 要的数据可以通过各种形式的输入在请求中传入 ...

  4. android -------- Data Binding的使用 ( 五) include

    Data Binding的中 include 标签的使用 inclune使用和原来一样,但要如何使数据也在 include中使用呢? 先看看我的布局文件 include的布局文件,也要使用 <l ...

  5. Python PIL模块笔记

    利用python pil 实现给图片上添加文字 图片中添加文字#-*- coding: utf-8 -*- from PIL import Image,ImageDraw,ImageFont ttfo ...

  6. springboot(十九)使用actuator监控应用

    微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...

  7. Matlab-8：松弛迭代法（SOR）

    function [x,n,flag]=sor(A,b,eps,M,max1) %sor函数为用松弛迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常数向量 %eps为精度要求 % ...

  8. python-爬虫-Beautifulsoup模块

    一 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...

  9. hdu-6435

    Problem J. CSGO Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others ...

  10. WDA基础十：OVS搜索帮助的使用

    对于WDA来说,常用的搜索帮助有OVS,标准SH,Interface view等.今天来说说两种常用的OVS的使用: 一:普通字段,表字段的搜索帮助(在创建节点的时候指定搜索帮助OVS,或者后面加上去 ...