一、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. iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说

    UIKit Dynamic是iOS7 新增的一组类和方法.可赋予UIView逼真的行为和特征,不须要写动画效果那些繁琐的代码,让开发者可以轻松地改善应用的用户体验.一共同拥有6个可用于定制UIDyna ...

  2. 快速序列化组件MessagePack介绍

    简介 MessagePack for C#(MessagePack-CSharp)是用于C#的极速MessagePack序列化程序,比MsgPack-Cli快10倍,与其他所有C#序列化程序相比,具有 ...

  3. 【python】函数返回值

  4. asp.net mvc 下拉列表

    第一步:新建一个格式化下拉列表的公共类文件 using System; using System.Collections; using System.Collections.Generic; usin ...

  5. HTML基础教程-段落

    HTML 段落 段落是通过 <p> 标签定义的. <p>This is a paragraph</p> <p>This is another parag ...

  6. XE10 clientDataset 访问 DataSnap 服务端报错问题，锲而不舍找方法，终于解决了

    1. 开发环境说明:win 10 下安装了XE10.2和Delphi7 2.按照网上datasnap 三层与使用xe10 自带的samples 的例子,访问数据库都要报莫名的地址错误,这个太不人性化: ...

  7. Kotlin——最详细的数据类、密封类详解

    在前面几个章节章节中,详细的讲解了Koltin中的接口类(Interface).枚举类(Enmu),还不甚了解的可以查看我的上一篇文章Kotlin--接口类.枚举类详解.当然,在Koltin中,除了接 ...

  8. hibernate核心API使用

    1.Configuration 加载核心配置文件,核心配置文件名称和位置固定,否则会找不到 2.SessionFactory对象一个项目只创建一个,大家公用 根据配置文件和映射关系创建表 由于要创建表 ...

  9. Python 初体验

    2017的最后一天,在QC的谆谆教诲下,我终于写(背)了九道题,对Python的基本语法有了一个大致了解. 1.A+B+C 就是为了练输入,line=input().split()  录入列表,分割开 ...

  10. 转:IT巨头纷纷“卡位” 智能语音成人机交互入口必争之地

    http://www.cs.com.cn/xwzx/hwxx/201707/t20170712_5368595.html 随着物联网的迅速发展,作为重要接口的智能语音技术已成为国内外IT巨头的必争之地 ...