CSS 笔记

CSS 优先级

基础

• 使用 !important 的声明比没有使用的优先级更高

选择器优先级

• ID > 类 | 伪类 | 属性 > 元素 | 伪元素 > 通配符
• 组合子(+, >, ~, ' ') 和 否定伪类(:not()) 对特异性没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

来源优先级

• 自定义样式 > 浏览器样式 > 继承样式

引用优先级

• 行内样式 > 外部样式、内部样式
• 外部样式、内部样式出现的位置靠后的优先级更高
• 同等情况下，定义位置靠后的优先级更高

参考

• https://developer.mozilla.org...

postion 属性

四象值未定义，即：top、left、bottom、right 未定义或者属性值 auto

• static 文档流。默认值
• relative 相对定位。相对于四象值未定义时位置定位

• absolute 绝对定位。

  • 如果四象值未定义，那么依然处于文档流，只是不占空间
  • 否则，脱离文档流，相对于最近的非 static 属性的父级元素（包含 html）定位

• fixed 固定定位。

  • 如果四象值未定义，那么依然处于文档流，只是不占空间
  • 否则，脱离文档流，相对于浏览器窗口定位

• stricy 粘性定位。

  • 如果四象值未定义，那么依然处于文档流。
  • 否则

  其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
  设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
  如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
  如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。
  达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

参考

• http://web.jobbole.com/90352/
• https://developer.mozilla.org...

BFC 与浮动

• http://www.w3cplus.com/css3/d...