0%

CSS 入门(一)

0x00 盒模型

盒模型分为两种,标准模式和怪异模式,他们的定义如下:

标准模式: (box-sizing: content-box)
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )

怪异模式: (box-sizing: border-box)
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )

怪异模式是 IE 5.x 6.x 中的标准盒模型,虽然叫做怪异模式,但是这种模式的布局模型更符合我们的直觉,所以一般都会将 box-sizing 属性设置为 border-box

example:

content-box

div { box-sizing:content-box; width:200px; height:200px; background:blue; padding:10px; border:5px solid lightblue }

border-box

div { box-sizing:border-box; width:200px; height:200px; background:blue; padding:10px; border:5px solid lightblue }

0x01 边距合并

情况1:
当一个元素出现在另一个元素的上面时,第一个元素的下外边距会与第二个元素的上外边距合并,合并后的边距为两个边距中较大的值。

example:

div1
div2
1
2
3
4
5
6
.div1 {                             .div1 {
width:30px; width:30px;
height:30px; height:30px;
margin-bottom:20px; margin-top:10px;
background:lightgreen; background:lightblue;
} }

连个 div 的上边距都合并为 20px 了,既两个边距中较大的值。

情况2:
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),
它们的上和/或下外边距也会发生合并。
example:

1
2
3
4
5
6
.outter {                           .inner {
width:80px; width:30px;
height:80px; height:30px;
margin-top:20px; margin-top:30px;
background:lightgreen; background:green;
} }

整体的上边距都合并为 30px 了,既两个上边距中较大的值。

情况3:
空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并
Alt text

如果这个外边距遇到另一个元素的外边距,它还会发生合并
Alt text

例外情况:
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

0x02 定位

浏览器中只有两种定位的层次,普通流和非普通流。相对定位的元素会被放置在普通流中,浮动和绝对定位的元素都不会被放入普通流中。

在流中的块级元素会按照从上到下的顺序一个个排列。元素之间的距离根据垂直方向的外边距计算而得。

在流中的行内元素会在行中水平布置。水平方向的间距不会影响行内框的高度,行内框的高度只能通过行高来设置。

position 为 absolute 的时候,元素会从普通流中脱离,普通流中不会再包含这个元素的空间。此时偏移属性参照的是离自身最近的相对定位祖先元素,如果没有相对定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

position 为 fixed 时,和 absolute 一样,只是包含块被指定为视窗本身。

绝对定位元素的默认 top 值是最近一个已经定位元素的底部坐标。