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. Study之2 Glance相关操作-devstack

    1,Glance的image是存储在backend中,backend配置在: /etc/glance/glance-api.conf.2, devstack默认:image 存放在控制节点本地目录 / ...

  2. 雷林鹏分享：C# 循环

    C# 循环 有的时候,可能需要多次执行同一块代码.一般情况下,语句是顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推. 编程语言提供了允许更为复杂的执行路径的多种控制结构. 循环语句允 ...

  3. for...in和for...of循环的区别

    使用for...in和for...of分别对Array,Set,Map做测试 var a=["A","B","C"]; var b=new ...

  4. Docker入门(CentOS7)

    1.docker安装yum -y install bash-completion     #tab键补齐包yum install net-tools -yyum -y install wgetwget ...

  5. Linq to XML 增删改查

    Linq to XML同样是对原C#访问XML文件的方法的封装,简化了用xpath进行xml的查询以及增加,修改,删除xml元素的操作.C#访问XML文件的常用类:XmlDocument,XmlEle ...

  6. hadoop ssh 端口-ssh-copy-id详解

    ssh-copy-id详解 http://www.blogdaren.com/post-1815.html 服务器时常需要配置无密码的登录方式,最一般的设置方式如下: 使用ssh-keygen和ssh ...

  7. 3 爬虫解析 Xpath 和 BeautifulSoup

    1.正则表达式 单字符: . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [-] \D : 非数字 \w :数字.字母.下划线.中文 \W : 非\w ...

  8. 微信小程序分享

    点击链接查看详情:(转发的路径的必须写正确) https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html

  9. Vue.js，select中的option用ajax想循环控制值的显示 v-model可以实现但提示报错，这是为什么？

    应该将v-model换成:value,因为v-model只能绑定一个值,无法绑定多个值 <select v-model="citys">       <optio ...

  10. Python操作excel的几种方式--xlrd、xlwt、openpyxl

    openpyxl xlrd xlwt   在处理excel数据时发现了xlwt的局限性–不能写入超过65535行.256列的数据(因为它只支持Excel 2003及之前的版本,在这些版本的Excel中 ...