一、margin合并

　　css经典bug  两个块级元素 分别设置 margin-bottom 和 margin-top 并不能达到预期效果

  <style>

    .up{

      width: 200px;

      height: 50px;

      background: blue;

      margin-bottom: 50px;

    }

    .down{

      width: 200px;

      height: 50px;

      background: pink;

      margin-top: 50px;

    }

  </style>

</head>

<body>

  <div class="up"></div>

  <div class="down"></div>

</body>

上面代码的最终效果   中间的距离 并不是margin-top + margin-bottom　　　　而是      两者 中取大的那个 的值      就像 合并到了一

解决方法

　　给 up 和 down 都加上父级  并给父级设置  overflow：hidden

　　

margin塌陷

　　wrapper 包裹 box   wrapper的margin-top和box的margin-top 取最大值 且 box 紧紧贴纸 wrapper的人上边  并不是 box相对wrapper 取 margin-top

  <style>

    .wrapper{

      width: 200px;

      height: 200px;

      background: rgb(228, 143, 143);

    }

    .box{

      width: 50px;

      height: 50px;

      margin-top: 20px;

      border: 1px solid blue;

    }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="box"></div>

  </div>

</body>

　　

解决方法 

　　　　1.利用給父级添加 border 来触发  bfc效果 

　　　　　　类似子集看不见父级的边界  添加一个  border 来解决  但改变 父级的样式 (舍去)

　　　　2.利用給父级添加 overflow 属性触发 bfc 

bfc

　　block format context　　块级格式化上下文

　触发bfc 的方法  

　　　　postion: absolute;

　　　　display: inline-block;

　　　　overflow: hidden;

　　　　float:left/right

盒模型 bug 与触发 bfc的更多相关文章

  1. CSS 盒模型、解决方案、BFC 原理讲解--摘抄

    PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...

  2. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  3. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  4. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  5. 十分钟复习CSS盒模型与BFC

    css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...

  6. 神奇的盒模型（BFC）

    上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...

  7. 那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？

    HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...

  8. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  9. 盒模型與BFC

    盒模型 基本概念 什么是 CSS 盒模型?相信大部分人都能答出这个问题来,那就是 标准模型 + IE 模型 标准模型: IE 模型 很明显 在 标准盒子模型中,width 和 height 指的是内容 ...

随机推荐

  1. mysql数据表最高速迁移,mysql的存储引擎为:myisam

    本文链接:http://blog.csdn.net/u010670689/article/details/41346689 需求: 开发产品过程中,有个项目分支,数据库须要带数据拷贝,可是表的数据非常 ...

  2. 关于Mac终端故障一直出现 [进程已完毕]

    终端已打开就出现以下信息.无法输入不论什么的命令 Last login: Mon Aug 18 10:00:36 on ttys000 [进程已完毕] 原因:不知谁改动了 终端->偏好设置-&g ...

  3. 01_GIT基础、安装

     1 为什么选择GIT 分布式,强调个体 公共server压力和数据量都不会太大 速度快.灵活 随意两个开发人员之间能够非常easy的解决冲突 离线工作 每日工作备份 能够吃懊悔药 2  GIT基 ...

  4. ZOJ ACM 1204 (JAVA)

    毕业好几年了,对算法还是比較有兴趣,所以想又一次開始做ACM题.俺做题比較任意,一般先挑通过率高的题来做. 第1204题,详细描写叙述请參考,ZOJ ACM 1204 1)难度分析 这个题目,基本的难 ...

  5. String类为什么要用final修饰（面试回答）

    String是所有语言中最常用的一个类.我们知道在Java中,String是不可变的.final的.Java在运行时也保存了一个字符串池(String pool),这使得String成为了一个特别的类 ...

  6. mysql新建数据库，并设置charset为utf8，使用utf8_general_ci字符集校验结果

    一. 实现功能 有时候在linux服务器端, 会在mysql命令行中, 创建数据库, 今天讲一下怎么在创建数据库时, 把charset设置为utf8,collate设置为utf8_general_ci ...

  7. xCode8以及iOS10 的新特性

    其他:ios10中 适配问题(1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8.UserN ...

  8. 关于C++函数返回局部对象的详细分析

    以前一直挺好奇的,C++是怎么在函数内返回一个局部对象的.因为按照我之前的想法,函数返回一个基本类型的值是通过存放到ecx实现的(关于浮点不了解),但是局部对象又是比较大的,很明显不能使用寄存器作为通 ...

  9. Hybris 项目工程配置

    1.控制台页面进入platform目录 cd F:\hybris640\hybris\bin\platform 并运行 setantenv.bat 生成对应的ant. 2.运行 ant moduleg ...

  10. Windows as a Service（1）—— Windows 10服务分支

    前言 作为公司的IT管理员,管理全公司Windows 10操作系统的更新一直是工作中的头疼之处.微软提供了很多方法来帮助我们管理公司的Windows 10更新,比如Windows Server Upd ...