盒模型

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