一、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. 关于Mac终端故障一直出现 [进程已完毕]

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

  2. NanUI 0.4.4发布

    NanUI是一个基于ChromiumFX开源项目的.Net Winform界面库,ChromiumFX是Chromium Embedded Framework的.Net实现.众所周知,Chromium ...

  3. Django实战，小网站实现增删改查

    直接上代码 视图: from django.shortcuts import render,render_to_response, redirect from submit import models ...

  4. Xftp连接阿里云Linux，向Linux上传文件，Windows和Linux文件传输

    我之前是用SecureCRT连接阿里云Linux的,上传文件用的Alt+p快捷键,感觉不是很方便.后来朋友给我推荐了Xshell,感觉确实好用得很多. 传输文件用的是Xftp,今天在向我的个人网站发布 ...

  5. 496. Next Greater Element I

    You are given two arrays(without duplicates)nums1andnums2wherenums1's elements are subset ofnums2. F ...

  6. open-falcon(v0.2)安装grafana部署

    下载rpm wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.4.3-1.x86_64.rpm 本地 ...

  7. Thymeleaf引擎支持Multi Prefix

    最近团队的一个项目在重构,希望引入Thymeleaf减少页面端的代码复杂性.在重构过程中,发现html文件需要保存在多个不同的目录中,但Thymeleaf缺省的实现不支持这种方式. 1        ...

  8. php-redis 操作类 封装

    <?php /** * redis操作类 * 说明,任何为false的串,存在redis中都是空串. * 只有在key不存在时,才会返回false. * 这点可用于防止缓存穿透 * */ cla ...

  9. php-基于面向对象的MySQL类

    class sqlHelper{ private $conn; private $host = 'localhost'; private $user = 'root'; private $pwd = ...

  10. c# 了解c# 面向对象

    C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言.并定于在微软职业开发者论坛(PDC)上登台亮相.C#是微软公司研究员Anders Hejlsberg的最新 ...