亮亮的笔记本

# CSS (opens new window)

# 核心知识

# 语法

一个属性与值的键值对被称为声明

声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了 CSS 规则集

# 规则

当网页满足某种规则的时候的效果

  • @namespace 告诉 CSS 引擎必须考虑 XML 命名空间。
  • @media, 如果满足媒体查询的条件则条件规则组里的规则生效。
  • @page, 描述打印文档时布局的变化.
  • @font-face, 描述将下载的外部的字体。
  • @keyframes, 描述 CSS 动画的关键帧。
  • @document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)

@charset @import @supports

# 层叠性

理解层叠性的时候需要结合 CSS 选择器的优先级以及继承性来理解。比如针对同一个选择器，定义在后面的声明会覆盖前面的；作者定义的样式会比默认继承的样式优先级更高。

# 选择器

# 基础选择器

  • 标签选择器：h1
  • 类选择器：.checked
  • ID 选择器：#picker
  • 通配选择器：*

# 属性选择器

# 组合选择器

  • 相邻兄弟选择器：A + B //A 后面的一个 B
  • 普通兄弟选择器：A ~ B //A 后面所有的 B
  • 子选择器：A > B // A 下面一级的 B
  • 后代选择器：A B //A 下面的 B

匹配标签属性

a[href='https://baidu.com']

# 伪类

  • 条件
  • 行为
  • 状态
  • 结构

# 伪元素

::before ::after

伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变

# 优先级

  • 10000：!important；
  • 01000：内联样式；
  • 00100：ID 选择器；
  • 00010：类选择器、伪类选择器、属性选择器；
  • 00001：元素选择器、伪元素选择器；
  • 00000：通配选择器、后代选择器、兄弟选择器；

# 继承性

一定是那些不会影响到页面布局的属性

  • 字体相关
  • 文本相关
  • 列表相关
  • 其他属性

# 文档流

# 脱离文档流

  • float
  • position：absolute
  • position：fixed

# 盒模型

box-sizing

content-box：标准盒模型

border-box：IE 盒模型；padding 算在宽度里面

# 视觉格式化模型

盒子类型由 display 决定，同时给一个元素设置 display 后，将会决定这个盒子的 2 个显示类型

  • outer display type（对外显示）
  • inner display type（对内显示）

# 格式化上下文

大概说的是页面中的一块渲染区域，规定了渲染区域内部的子元素是如何排版以及相互作用的。

# BFC (opens new window)

块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

# BFC 渲染规则
  • 内部的盒子会在垂直方向，一个接一个地放置
  • 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；
# BFC 的应用
  • 包含内部浮动: 让浮动内容和周围的内容等高，解决子内容浮动塌陷问题
  • 排除外部浮动：创建双栏布局
  • 阻止外边距重叠
# IFC

# 层叠上下文

# 值和单位

vh vw em rem px

# 颜色体系

  • 颜色关键字 //red black
  • transparent 关键字 // 设置透明颜色 border 实现三角 增加点击区域
  • currentColor 关键字 // 会取当前元素继承父级元素的文本颜色值或声明的文本颜色值
  • RGB 颜色 // 十六进制符号 #ff0000aa; 函数符 rgba(255, 0, 0, 0.67)
  • HSL 颜色 // color: hsla(0, 100%, 50%, 67%);

# 常见需求

# 自定义属性

:root {
  --theme-color: red;
}

h1 {
  color: var(--theme-color);
}

# 1px 边框解决方案

设备像素比=物理设备像素/逻辑像素

transform: scaleY(0.5);

vant 1px 实现方式 (opens new window)

# 清楚浮动

浮动造成的父元素高度坍塌问题。

通过 BFC 来清除 通过 clear 来清除

# 消除浏览器默认样式

# 长文本处理

  • overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）

  • white-space: nowrap；（设置文字在一行显示，不能换行）

  • text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

vant ellipsis 实现方式 (opens new window)

文本溢出截断省略 (opens new window)

# 水平垂直居中

CSS 水平垂直居中方案大全 (opens new window) CSS 实现水平垂直居中的 10 种方式 (opens new window)

# 布局

# 两栏布局（边栏定宽主栏自适应）
  • float + overflow（BFC 原理）
  • float + margin
  • flex
  • grid
# 三栏布局（两侧栏定宽主栏自适应）
  • 圣杯布局:通过 float 搭建布局+margin 使三列布局到一行上+relative 相对定位调整位置
  • 双飞翼布局:双飞翼布局是通过 float+margin，没有使用相对定位
  • float + overflow（BFC 原理）
  • flex
  • grid
# 多列等高布局

  • padding + 负 margin

  • 设置父级背景图片

# 三行布局（头尾定高主栏自适应）
  • calc
  • absolute
  • flex
  • grid

# Flex (opens new window)

# 容器的属性

  • flex-direction 定义主轴方向
  • justify-content 定义主轴对齐方式
  • align-items 定义副轴对齐方式
  • flex-wrap 定义是否换行
  • flex-flow flex-direction 属性和 flex-wrap 属性的简写形式
  • align-content 属性定义了多根轴线的对齐方式

# 项目的属性

  • order 排列顺序
  • flex-grow 定义项目的放大比例
  • flex-shrink 属性定义了项目的缩小比例
  • flex-basis 先占领空间
  • flex flex-grow, flex-shrink 和 flex-basis 的简写

    flex:1 其实就是 flex: 1 1 0%占领剩余空间

  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性

# grid (opens new window)

# 参考文章

← 执行上下文 →