margin塌陷与BFC总结

【margin塌陷与BFC总结】的更多相关文章

margin塌陷与BFC总结

只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display:inline-block 4.overflow:hidden/scroll 关于触发方法还有一些table-cell之类的触发方法,但是已经很少用 BFC特性: 1.触发BFC的元素,内部元素不会影响到外部其他元素 2.BFC可以看到浮动元素(包括内部元素),文本元素也能看到浮动元素 (提一下flo…

触发bfc解决父子元素嵌套垂直方向margin塌陷问题

首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; } .inner{ width: 50px; height: 50px; …

margin塌陷与margin合并（margin），清除浮动

**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效,但会带着父级一起动(作者总结,官方定义自己查看).如: ```<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&quo…

Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

一. 什么是标准文档流文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文本流脱离出来显示. 标准文档流的围观现象有3种: 1.空白折叠现象:多个空格或者换行会被折叠成一个. 2.高矮不齐,底边对齐. 3.自动换行,一行写不完,自动换行. <!DOCTYPE html> <html lang="en"> <head…

学习笔记------------解决margin塌陷

首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位但是margin塌陷是在父级相对于浏览器定位时,子级没有相对于父级元素定位,就像父级的框框没有了,子级相对于父级就像是塌陷了解决方法:触发bfc (块级格式化上下文) 如何触发bfc? 1.position : absolute; 2.display : inline-block; 3.float 4.…

bug:margin塌陷

margin塌陷:两个嵌套的div,内部div的margin-top失效,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值. 弥补方法: 1.在父级div添加border-top:1px solid #rrggbb; 思考:采用这种解决方案,貌似会被产品经理揍死~~~,平白无故多了一像素,不能忍. 2.BFC:block format context 块级格式化上下文,创建了 BFC 的元素就是一个独立的盒子,不过只有 Block-le…