# CSS

1.5 万字 CSS 基础拾遗（核心知识、常见需求） (opens new window)

# 核心知识

# 语法

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

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

# 规则

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

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

@charset @import @supports

link 和 @import 都能导入一个样式文件，它们有什么区别嘛？

link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS；
link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载；
link 没有兼容性问题，@import 不兼容 ie5 以下；
link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import 不可以。

# 层叠性

理解层叠性的时候需要结合 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

# 盒模型

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

# 视觉格式化模型

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

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

# 格式化上下文

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

# BFC

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

# BFC 渲染规则

内部的盒子会在垂直方向，一个接一个地放置
盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；

# 如何创建 BFC？

根元素：html
非溢出的可见元素：overflow 不为 visible
设置浮动：float 属性不为 none
设置定位：position 为 absolute 或 fixed
定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

# BFC 的应用

自适应两栏布局

应用原理：BFC 的区域不会和浮动区域重叠 清除内部浮动

计算 BFC 的高度时，浮动元素也参与计算

防止垂直 margin 合并

# 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);

# 清楚浮动

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

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

# 消除浏览器默认样式

# 长文本处理

overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap；（设置文字在一行显示，不能换行）
text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

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

# 水平垂直居中

CSS 水平垂直居中方案大全 (opens new window)

单行的文本、inline 或者 inline-block 元素；
固定宽高的块级盒子；
不固定宽高的块级盒子；

# 单行的文本、inline 或者 inline-block 元素

水平居中 text-align: center;

# 布局

# 两栏布局（边栏定宽主栏自适应）

float + overflow（BFC 原理）
float + margin
flex
grid

# 三栏布局（两侧栏定宽主栏自适应）

圣杯布局
双飞翼布局
float + overflow（BFC 原理）
flex
grid

# 多列等高布局

padding + 负 margin
设置父级背景图片

# 三行布局（头尾定高主栏自适应）

calc
absolute
flex
grid

← es6 Html →