盒模型¶

margin, boarder, padding

• margin
• boarder
• padding
• width, height

外边框塌陷 两个框彼此接触时，间距取两个相邻外边界的最大值而非两者之和。

相关属性¶

• margin, margin-top, margin-right, margin-bottom, margin-left
• padding, padding-top, padding-right, padding-bottom, padding-left

注意：

• 使用顺时针注记法时，多个值之间不需要空格。

浮动¶

• float: left | right 元素浮动到容器的左侧|右侧
• clear: left | right | both 清除浮动
• overflow

position: relative¶

使用position: relative并定义left, right, top, bottom等属性， 可以使元素move away from正常的文档流中应当在的位置。

h2 {
    position: relative;
    top: 10px;
} /* 将h2从原本文档流中的盒模型的top位置移远10px。注意视觉上h2是向着bottom移动。 */

position: absolute 相对于父元素的定位¶

left, top, right, bottom的含义同上。

positiom: fixed 相对于浏览器窗口的绝对定位¶

left, top, right, bottom的含义同上。

float属性¶

从正常的流中取出，并且向父容器的left或者right移动。

居中¶

水平居中 margin: auto。