盒模型 bug 与触发 bfc
一、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的更多相关文章
- CSS 盒模型、解决方案、BFC 原理讲解--摘抄
PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...
- 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- 十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
- 神奇的盒模型（BFC）
上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...
- 那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？
HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...
- CSS盒模型的深度思考及BFC
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...
- 盒模型與BFC
盒模型 基本概念 什么是 CSS 盒模型?相信大部分人都能答出这个问题来,那就是 标准模型 + IE 模型 标准模型: IE 模型 很明显 在 标准盒子模型中,width 和 height 指的是内容 ...
随机推荐
- json与xml的比较
l 可读性: JSON和XML的可读性都很好,XML略占上风. l 可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. l 编码难度 XML有丰富的编码工具 ...
- Windows环境下部署Tomcat服务器图文教程
Tomcat是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP程序的首选. 本文将详细介绍在Windows环境下 ...
- 在windows平台使用Apache James搭建邮件服务器以及使用C#向外网发送邮件
首先环境搭建: 1.下载安装JDK,并且配置环境变量 2.下载Apache James ,下载解压之后的目录如图 双击bin下边的run.bat批处理文件安装James 服务,提示如下信息说明安装成功 ...
- vue.js使用webpack发布，部署到服务器上之后在浏览器中可以查看到vue文件源码
webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...
- Asynchronous vs synchronous client applications（MQTT）
来自我的CSDN博客 想查看英文原文的请点击原文网址.在上两篇翻译中,Homejim我给大家分别翻译了同步客户端应用程序和异步客户端应用程序.本人对这两个的区别也有困惑,因此将paho下的这个比较 ...
- html5中将图片的绝对路径转换成文件对象
html5中将图片的绝对路径转换成文件对象 将图片的绝对路径转换成base64编码,请看这篇文章 我们先来理解基本知识点: 1. 理解HTML5中的FileList对象与file对象. 在HTML5中 ...
- 智能合约语言 Solidity 教程系列5 - 数组介绍
写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解, 如果你还不了解,建议你先看以太坊是什么 本文前半部分是参考Solidity官方文档(当前最新版本: ...
- 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- iOS Swift--UIImageView UIImage
1.UIImageView + UIImage Demo import UIKit class UIImageViewViewController: UIViewController { var ...
- S7-200和S7-300profibus-DP通信
一.S7-200CN的cup可以通过EM277接入DP网络 二.CPU315-2DP做主站,S7-200CUP做从站 三. 通信题目 四.硬件组态 1.主站的DP组态,地址为2 2.EM277作为从站 ...