一、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. Android百分比布局成功导入及简单使用

    最近学习第一行代码第二版这本书,里面有介绍百分比布局的使用,经过一番摸索,终于是成功导入了百分比布局 就是这样,appcompat是25.3.1,那么百分比布局percent也是25.3.1 这样便是 ...

  2. SAP RFC介绍：关于sRFC，aRFC，tRFC，qRFC和bgRFC

    大概八月份的时候做过一个有关两个SAP系统的财务集成的项目,使用到了RFC(Remote Function Call)技术.因为之前有着医疗-CRM相关接口开发的经验,以为自己对RFC很熟悉了,做起来 ...

  3. Android Activity生命周期详细解析

    概况 讲Android Activity那怎么都绕不过这张图,这篇文章也是围绕这幅图详细分析. 背景 假设这是你的APP,以此为背景,下面的每个part请结合上图理解. #Case 1 当按下app启 ...

  4. 西门子flexable创建画面

    一.wincc flexable 创建画面包括以下四点 二.具体操作 1.组态画面模板 1)使用该模板的画面包括该模板的所有组件,一个模板也是一个画面 2)给模板上添加一个文本域如下图,则画面1也会显 ...

  5. geoserver安装部署步骤

    方式一:直接在geoserver官网下载zip源代码解压包,直接部署在tomcat里面运行geoserver: 方式二:下载安装包方式 以GeoServer2.8.5版本为准,安装之前必须要保证你机子 ...

  6. 网络实时流量监控工具iftop---转

    网络实时流量监控工具iftop 分类: LINUX 1.安装依赖软件库 [root@localhost ~]# yum install libpcap libpcap-devel ncurses nc ...

  7. Linux第五节随笔 /file / vim / suid /sgid sbit

    三期第四讲1.查询文件类型与文件位置命令 file 作用:查看文件类型(linux下的文件类型不以后缀名区分) 语法举例: [root@web01 ~]# file passwd passwd: AS ...

  8. 安装supervisord

    一:简介 supervisord是一个进程管理工具,提供web页面管理,能对进程进行自动重启等操作. 优点: - 可以将非后台运行程序后台运行 - 自动监控,重启进程 缺点: - 不能管理后台运行程序 ...

  9. 自动化测试辅助工具（Selenium IDE等）

    本随表目录 Selenium IDE安装和使用 FireBug安装和使用 FirePath安装和使用   Selenium IDE安装 方式一:打开Firefox-->添加组件-->搜索出 ...

  10. java环境配置教程jde,jre

    控制面板--所有控制面板项--系统--高级系统设置--环境变量 JAVA_HOME = D:\java\jdk CLASSPATH = .;%JAVA_HOME%\lib;%JAVA_HOME%\li ...