Skip to content

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) - 掘金

居中

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

  margin: 0 auto;
  vertical-align: middle;

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

  /* posistion... */
}

css 变量

css

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

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

sass

scss
$light: #000000;

.theme {
  color: $light;
}

sass mixin

scss
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
scss
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

透明隐藏

display:none

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

opacity:0

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

visibility:hidden

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

transform:scale(0,0)