CSS基础

定位

相对定位

• 形影分离–为盒子添加效果还是作用在原来的位置，影子出去了，不脱标.

  相对定位用途

  • 微调元素
  • 绝对定位的参考（子绝父相）

绝对定位

• 脱标有三（float、absolute、fixed）

  脱离标准文档流后，就没有行内元素和块级元素之分了（原行内元素可设置宽高，无需设置display：block）

  • 如果用top来描述，其位置是相对与页面左上角
  • 如果用bottom来描述，其位置是相对与浏览器首屏页面的左下角
  • 子绝父绝、子绝父相、子绝父固都可以给儿子定位（子绝父相.父亲并无脱标.儿子在父亲范围内移动）
  • 子绝父相是相对于最近的定位元素
  • 绝对定位的儿子、无视参考点的padding，以border内侧为参考点

margin and padding

• 为子元素同时设置padding和margin，padding填充的是子元素的bg，margin填充的是父亲的bg

margin

何时用margin、padding？

隔开元素与元素用margin

• margin塌陷(only竖直方向)，即标准文档流中，竖直方向的margin不叠加，以较大的为准。
  • 在俩margin中间添加一个border即可消除塌陷现象

    margin：0 auto 居中的是盒子。（必要条件：1.标准流中 2.定宽）

    text-align：center 居中的是盒子中的文字

    margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个margin表达父子之间的距离。

padding

隔开元素与内容用padding

善于使用父亲的padding，而不是儿子的margin

• 如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了