CSS

CSS 是什么

Cascading Style Sheets

用来定义页面元素的样式

• 设置字体和颜色

• 设置位置和大小

• 添加动画效果

CSS 是如何工作的

CSS 基础

属性选择器

<input type="password" value="123456" /><style>    input[type="password"] {        color: blue;    }</style>

颜色

rgb hsl rgba / hsla

字体

font-family 使用建议：

• 字体列表最后写上通用字体族

• 英文字体放在中文字体前面（英文字体中一般不包含中文字体）

文字

• text-align:justify (最后一列字母对齐)

• letter-spacing:2px 字符间距

• word-spacing:2px 单词间距

• text-indent:2px 文字缩进

• white-space: normal | nowrap | pre | pre-wrap | pre-line 显示格式

布局

• 常规流行级块级表格布局 flexgrid

• 浮动

• 绝对定位

！！！百分比相对于容器 宽度

overflow: visible | hidden | scroll

overflow-wrap

verticle-align

行级排版上下文

只包含行级盒子的容器会创建一个 IFC（Inline Formatting Context）

IFC 排版规则：

• 盒子在一行内水平摆放

• 一行放不下时，换行显示

• text-align 决定一行内盒子的水平对齐

• verticle-align 决定一个盒子在行内的垂直对齐

• 避开浮动（float）元素

块级排版上下文

某些容器会创建一个 BFC（Block Formatting Context）

• 根元素

• 浮动、绝对定位、inline-block

• flex grid

• overflow 不是 visible

• display: flow-root

BFC 排版规则：

• 盒子从上到下摆放

• 垂直 margin 合并

• BFC 内盒子的 margin 不会与外面的合并

• BFC 不会和浮动元素重叠

Flex Box

之前写的一篇文章

一篇文章带你快速学会Flex布局 - 掘金 (juejin.cn)

Grid

阮一峰老师的 Grid 布局

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)