CSS

position

属性值	描述
absolute	绝对定位，脱离文档流，与外部元素影响，相对于 static 以外第一个父元素
fixed	绝对定位，脱离文档流与外部元素影响，相对于浏览器窗口
relative	相对定位，相对于正常位置
static	默认
inherit	继承
sticky	粘性

选择器优先级

!important 内联样式
选中器中给定的 ID 属性值
选择器中给定的类属性值，属性选择或伪类
选择器中给定的元素选择器和伪元素
结合符和通配符选择器对优先级没有任何贡献

盒模型

区别在内边距和边框，box-sizing: content-box | border-box;

BFC

块级格式化上下文，BFC 内部的元素与外部元素互不影响

BFC 创建方法

• 根元素或其它包含它的元素；
• 浮动 (元素的 float 不为 none)；
• 行内块 inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的 display: table-cell，HTML 表格单元格默认属性)；
• overflow 的值不为 visible 的元素；
• 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)；

BFC 作用

避免 margin 重叠
避免 margin 坍缩
清除浮动，防止父元素高度坍缩
不会与其他 float 重叠，（BFC 内部仍会重叠）
学习 BFC (Block Formatting Context) - 掘金

居中

.center {
  text-align: center;
  line-height: 100%;

  margin: 0 auto;
  vertical-align: middle;

  display: flex;
  justify-content: center;
  align-items: center;

  /* posistion... */
}

css 变量

css

:root {
  --light: #000000;
  --dark: #ffffff;
}

.theme {
  color: var(--light);
}

sass

$light: #000000;

.theme {
  color: $light;
}

sass mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

透明隐藏

display:none

• 会改变布局，回流
• 子元素无法显示
• 绑定事件无法触发

opacity:0

• 子元素会继承，无法显示
• 绑定事件可以触发

visibility:hidden

• 子元素会继承，可重新显示
• 绑定事件无法触发

transform:scale(0,0)