(一)框模型
框模型也叫做盒子模型,规定了4个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin),模型图如下所示:
content :即通常元素的width和height围绕而成的box;
padding:当其宽度为0时,和contentbox边界重合;
border:当宽度为0时,和padding边界重合;
margin:当宽度为0时,和border边界重合;
1、content、padding、border的背景一般由background属性设置,background默认填充区域为content+padding+border。margin部分的背景总是为透明即transparent。
2、margin、padding、border都分上下左右,如'margin-top', 'margin-bottom', 'margin-left', 'margin-right'分别表示上margin、下margin、左margin、右margin,也可统一由一个margin属性定义上下左右margin。
3、margin,padding,border取值:<length>(注意要有单位)、<percentage>、auto;
注意:margin可以为负值,但是border和padding不能为负值
4、margin、padding、border统一属性由不同数量的value组成时:
body { margin: 2em} /* all margins set to 2em */
body { margin: 1em 2em} /* top & bottom = 1em, right& left = 2em */
body { margin: 1em 2em3em } /* top=1em, right=2em, bottom=3em, left=2em */
body { margin: 1em 2em 2em3em } /* top=1em, right=2em, bottom=3em, left=2em */
(二)margin、padding、border特性使用
特性 |
| |
margin相关属性 | 一般上述4个属性对所有元素都有效,但margin-top和margin-bottom对行内元素无效。 | |
padding相关属性 | 对任何元素有效 | |
border相关属性 | 对任何元素有效 | |
| border-width | 取值:thin/medium/thick,或<length> 此特性会受border-style的影响,一般浏览器会默认设置为border-width=3px p { border-color: black; border: solid; }/*最终border-width为3px*/
|
| border-style | 取值:none(border-width会置0)、hidden(border-width会置0)、dotted、solid、dashed、double、groove、ridge、inset、outset。 默认值为none即不显示,所以要想显示border必须不能设为none或者hidden。 |
| border-color | 取值为<color>或者为transparent(即透明,但可能有宽度),当此特性没有设置时,浏览器一般会将其设置为black;当元素有color属性且border-color没有设置,则浏览器会设置border-color的值为color的值(当border-style为groove/ridge/inset/outset除外)。 p { color: black; border: solid; }/*最终border为黑色*/
|
| border/border-top/border-bottom/border-left/border-right属性可以同时设置border-width、border-style、border-color,但可能会发生覆盖。 举例1: p{border: solid red}等价于 p { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } 举例2: p { border: solid red;/*此时border-left:solid red*/ border-left: double;/*覆盖前面定义,此属性同时设置了border-width,border-style、border-color*/ color: black; }/*border-left为double black,其他为solid red*/ |
(三)margin层叠(collapsing margins)
1、概念:
若两个或多个块级元素(它们之间可能是/也可能不是相邻兄弟元素)的垂直方向上的外边距毗邻,则它们的外边距最终会层叠为一个外边距。
原文:The adjoining margins of two or more boxes (which might or might notbe siblings) can combine to form a single margin。2、外边距毗邻的条件
- 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开;
- 都处于普通流(即in-flow,即非浮动和position为“absolute”/“fixed”的元素),且在相同的block formatting context;
- 都属于垂直方向上的外边距,包括以下几种:
- top margin of a box and topmargin of its first in-flow child
- bottom margin of box and topmargin of its next in-flow following sibling
- bottom margin of a last in-flow child andbottom margin of its parent if the parent has 'auto' computed height
- top and bottom margins of a box that does not establish a new blockformatting context and that has zero computed 'min-height', zero or 'auto'computed'height', and no in-flow children(自身 margin-bottom 和 margin-top 相邻,只能是自身内容为空,height为0或auto,垂直方向上没有border、padding)
3、外边距层叠发生几个原则:
- 只有垂直方向上的margin会发生层叠,水平方向上的margin永远不会发生层叠
- 浮动元素、inline-block 元素、绝对定位元素的 margin 不和垂直方向上其他元素的 margin 折叠
- 创建新块级格式化上下文的元素(包括Floats,absolutely positioned elements(即position为“absolute”和“fixed”), block containers (such as inline-blocks,table-cells, and table-captions) that are not block boxes,block boxes with 'overflow' other than 'visible'),不和它的子元素发生 margin 折叠
- 若层叠的margin中有任何margin和另一个margin毗邻,则此层叠margin也和那个margin毗邻
- 毗邻的margin不一定是sibling或ancestor的关系
4、外边距层叠情景
(摘自w3c官网标准中的BOX MODEL: http://www.w3.org/TR/CSS2/box.html)
- Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
- Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
- Margins of inline-block boxes do not collapse (not even with their in-flow children).
- The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
- The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
- The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
- A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
5、折叠后margin的计算
- 参与折叠的 margin 都是正值,则取其中 margin 较大的值为最终 margin 值;
- 参与折叠的 margin 都是负值, 则取的是其中绝对值较大的;
- 参与折叠的 margin 中有正值也有负值,则先取出负 margin 中绝对值中最大的负margin,然后,和正 margin 值中最大的 margin 相加;
- 毗邻的 margin 要一起参与计算,不得分步计算;
关于计算规则的最后一点,举一个复杂的实例:
<div style="margin:50px 0; background-color:green; width:50px;">
<div style="margin:-60px 0;">
<div style="margin:150px 0;">A</div>
</div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
<div style="margin:-120px 0;">
<div style="margin:200px 0;">B</div>
</div>
</div>
错误的计算方式:
算 A 和 B 之间的 margin,分别算 A 和其父元素的折叠,然后与其父元素的父元素的折叠,这个值算出来之后,应该是 90px。
依此法算出 B 的为 80px;然后,A和B折叠,margin 为 90px。
正确的计算方式:
将其 margin 值分为两组: