1、元素分为块级元素和行内元素,
块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题。行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且垂直方向的margin和padding都是无效的。
2、display
display可以取值为none,inline,inline-block,block,inherit以及table相关的属性,如table,table-cell等,display属性规定元素应该生成的框的类型。
3、float
float可以取值none(默认),left,right,inherit。float浮动是在与原位置在同一水平线上进行向左或向右浮动,会脱离文档流,所以不会撑开父元素的高度,非浮动元素的同辈元素的排版会与浮动元素发生覆盖,但是非浮动元素的内文字会被挤走。
4、position
position可以取值static(默认),relative,absolute,fixed和inherit。static处于正常流,按元素的html排版布局,left,right,top,bottom和z-index无效。relative也是处于文档流中,但它按照自身原来的位置进行定位,进行定位的时候其它元素的位置保持不变,也就是说变得只有它自己。absolute是绝对定位,相对于最近的一个不为static的父元素进行定位,如果没有则相对于根元素html,如果没有设left或者top,则它也会脱离文档流,但是会呆在原来的位置。absolute的定位是相对于父元素的padding定位的,但是不包括border,不管box-sizing是border-box还是content-box。fixed相对于视口(viewport)进行绝对定位,也就是相对于浏览器的窗口,不会随着文档的移动而移动,IE6不支持fixed。
5、相互影响
(1)如果display为none,这是就不产生盒子,所以会忽略position和float,否则
(2)如果position的值为absolute或fixed,float会被转换为none,display会按下表进行转换,否则继续
设置值 | 计算值 |
inline-table | table |
inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block | block |
其他,如list-item | 同设定值 |
(3)如果position不是绝对布局,这时,如果float不为none或者该元素是跟元素,则依旧按上表进行转换。
(4)否则如果,position不是绝对布局,并且float为none不浮动,且不是跟元素,display就取设置值。
6、margin,overflow,padding和position,display,float的影响,其实都是一些BFC的知识,理解了BFC就好了。
(1)position,display,float不会影响padding。
(2)如果父元素设置了overflow为hidden或auto,那么就会消除float不会撑开父布局的问题。
(3)position的定位是相对于父元素的padding进行定位的。
(4)margin外边距的合并问题会受overflow,position,float,以及display的影响。
(5)overflow不一定可以隐藏position:absolute的元素,如果后代元素的包含块是整个视区(通常指浏览器内容可视区域,可以理解为body元素)或者是该容器(定义了overflow的元素)的父级元素时,则不受影响。所以,要想彻底剪裁它的所有子元素,它不但要有overflow:hidden,而且还要作为所有子元素的包含块(position定位)。
相邻的外边距会合并为一个外边距,这里的相邻意味着两个或多个外边距没有被非空内容,padding,border或clear隔开,并且位于普通流中。计算方法,如果都是正值,则取最大者,如果都是负值,取绝对值最大者,如果一正一负,则相加。
相邻的盒模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠。
设置了overflow属性的元素和它的子元素之间的margin不会被折叠。
设置了绝对定位(position:absolute)的盒模型,垂直margin不会被折叠。
设置了display:inline-block的元素,垂直margin不会被折叠。