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. 大数据新手之路三：安装Kafka

    Ubuntu16.04+Kafka1.0.0 1.下载kafka_2.11-1.0.0.tgz http://kafka.apache.org/downloads 2.解压到/usr/local/ka ...

  2. svn上传和下载项目

    上传:到项目文件的svn文件夹下——>右键——>SVN Commit...——>输入提交代码备注信息,以便同事查看时,是属于什么内容.这里可以选择哪些文件是要提交到代码仓库上, 下载 ...

  3. 第 3 章 镜像 - 010 - base 镜像

    base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 能称作 base 镜像的通常都是各种 Linux 发行版的 Docker 镜像,比如 Ubunt ...

  4. SQLSERVER 和 ORACLE的if not exist 用法

    sql server: if not exists (select 1 from TB_Procedure where Id='2018ZZZ') BEGIN insert into TB_Proce ...

  5. Spring Boot入门第一天：Hello, Spring Boot!

    原文链接 1. 新建一个Maven Web项目. 2. 配置pom.xml文件. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  6. 雷林鹏分享：C# 字符串（String）

    C# 字符串(String) 在 C# 中,您可以使用字符数组来表示字符串,但是,更常见的做法是使用 string 关键字来声明一个字符串变量.string 关键字是 System.String 类的 ...

  7. 利用adb安装apk

    下载adb 网上资源很多,资源自寻. 配置环境变量 先加变量,后加入path.网上很多,不赘述. 安装apk 打开cmd,确保adb已经连接设备 adb install -r <拖动文件至cmd ...

  8. 微信小程序获取腾讯经纬度，得到具体地址

    getCityNameOFLocation: function() { var that = this; wx.getLocation({ type: 'wgs84', // 默认为 wgs84 返回 ...

  9. bzoj2565: 最长双回文串 pam

    题意:找一个串中的最长连续两个回文子串长度 题解:建两个回文树,一个正着,一个反着,每次add之后last的长度就是后缀最长的回文串长度,然后两边加一遍即可 /******************** ...

  10. 【PowerDesigner】【9】禁止Name与Code同步

    问题:修改了某个字段的name,其code也跟着修改 步骤:Tools→General Options..→Dialog→取消勾选“Name to Code mirroring”复选框 参考博客: 1 ...