盒模型和margin合并,margin塌陷问题
一、盒模型
1、基本概念:html中的大多数元素都是行级元素(inline)和块级元素(block)
2、块级元素:占满整行,可以改变宽高,块级元素中可以有其他块级元素和行级元素
常见的块级元素:div, p, h1-h6, address, form, table, ul, li, ol, output, canvas, header, video, audio
3、行级元素:不占满整行,不可以改变宽高,行级元素中只可以放行级元素和文字
常见的行级元素:a, span, strong, em ,b, i, input, select, label, button
4、行级块元素(inline-block):不占满整行,可以改变宽高:img
5、什么是盒模型:
所有的html元素都可以看做是盒子,在css中,"box model"这一术语是用来设计和布局的,css盒模型本质上是一个盒子,封装周围的html元素,它包括内容(content)、内边距(padding)、边框(border)和外边距(margin),盒模型允许在其他元素和周围元素边框之间的空间放置元素。
![](http://www.runoob.com/images/box-model.gif)
6、盒模型分两种:一种是w3c标准盒模型,另一种是ie6混杂模式盒模型
w3c标准盒模型:width(content)+ padding + border + margin
ie6混杂模式盒模型:width(content + padding + border) + margin
7、css3中给我们提供了可以设置哪一种盒模型的属性:
box-sizing:border-box(ie6混杂模式盒模型)
content-box(w3c标准盒模型)
inherit(继承父元素的盒模型)
二、margin合并
1、什么是margin合并
如上图所示,在123的div的margin-bottom为100px不变时,234的div的margin-top分别为80px,100px,120px,123和234之间的距离分别为100px,100px,120px
overflow:hidden
注:只有普通弄文档流的垂直外边距会发生margin合并问题,浮动流,绝对定位流不会发生
三、margin塌陷问题
1、什么是margin塌陷问题
如上图所示,wrapper与content绑在一起,当content的margin-top小于wrapper的margin-top,content并不下移,大于或等于wrappermargin-top时,以浏览器为顶与wrapper一起塌陷
2、margin塌陷:当两个盒子在垂直方向上设置margin值时,会发生塌陷现象
3、解决margin塌陷问题
利用bfc (block format content) overflow:hidden(溢出容器隐藏,父级)