一、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. iWeb峰会（HTML5峰会）2015年7月19日上海站会后感想

         上周日专门从南京跑到上海參加了iWeb峰会(HTML5峰会),感觉这一天去的挺值的.几个演讲都挺精彩,干货不少啊.       总体感觉随着2014年HTML5标准的终于定稿,最近HTML5 ...

  2. Github-karpathy/char-rnn代码详解

    Github-karpathy/char-rnn代码详解 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2016-1-10 ...

  3. 在IDEA中实战Git(转载自)

    转载自:http://blog.csdn.net/autfish/article/details/52513465 工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组 ...

  4. 使用Flink时遇到的问题（不断更新中）

    1.启动不起来 查看JobManager日志: WARN org.apache.flink.runtime.webmonitor.JobManagerRetriever - Failed to ret ...

  5. 《金领简历：敲开苹果、微软、谷歌的大门》【PDF】下载

    <金领简历:敲开苹果.微软.谷歌的大门>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196331 内容简介 <金领简历:敲开 ...

  6. iOS 视频开发学习

    原文:浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我 ...

  7. linux集群批量执行命令

    因为工作需要,需要修改集群中机器的配置,一台一台的修改太浪费时间,就想能不能通过自动化脚本批量执行命令,尝试写一个,自己shell不熟悉,写的有点渣渣 if [ "$#" -ne ...

  8. AntData.ORM框架 之 读写分离

    环境准备 准备2台机器配置好Master Slaver模式 我是用vmware 2台虚拟机配置的.有需要请联系. Master:192.168.11.130 Slaver:192.168.11.133 ...

  9. bzoj 2298: [HAOI2011]problem a

    Description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) Input 第一行一个整数n ...

  10. Swift学习第一天--面向过程

    //: Playground - noun: a place where people can play import UIKit //---------------------- Hello wor ...