css是什么

CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。

（1）width

• 指定content-box的宽度
• 取值为长度、百分比、auto
• auto由浏览器根据其他属性确定
• 百分比相对于容器content-box的宽度

（2）height

• 指定content-box的高度
• 取值为长度、百分比、auto
• auto由内容计算而来
• 百分比相对于容器content-box的高度
• 容器有指定高度时，百分比才能生效

（3）padding

• 指定四个方向的内边距
• 百分比相对于容器的宽度

（4）border

• 指定容器边框粗细、样式和颜色

（5）margin

• 指定四个方向的外边距
• 取值可以是长度、百分比和auto
• 百分比相对于容器的宽度
• 使用margin: auto;可以使容器水平居中

选择器优先级

首先选择器的优先级按照以下顺序由低到高排序，级数越高的规则优先级越高。

• 0级 通配符（*）、选择符和逻辑组合伪类
• 1级 标签选择器
• 2级 类、属性选择器和伪类
• 3级 ID选择器
• 4级 内联style
• 5级 !important

布局

行级排版上下文 IFC

只包含行级盒子的容器会创建一个IFC：Inline Formatting Contex

IFC内排版规则：

• 盒子在一行内水平摆放
• 一行放不下时，换行显示
• text-align决定一行内盒子的水平对齐
• vertical-align决定一行内盒子的垂直对齐
• 避开浮动元素

块级排版上下文 BFC

某些元素会创建一个BFC：Block Formatting Contex

• 根元素
• 浮动、绝对定位、inline-block
• Flex子项和Grid子项
• overflow值不是visible的块盒
• display: flow-root

BFC内的排版规则：

• 盒子从上到下摆放
• 垂直margin合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠

FlexBox

FlexBox是什么：

可以控制子级盒子的

• 摆放的流向和顺序
• 宽度和高度
• 水平和垂直方向的对齐
• 是否允许折行

FlexBox的属性：

• flex-direction：控制子元素的流向
• justify-content：控制子元素的水平对齐方式
• align-items：控制子元素的垂直对齐方式
• order：控制子元素的排列顺序

Flexibility

可以设置子元素的伸展，当容器有剩余空间时，子元素伸展；否则，子元素收缩。

• flex-flow：有剩余空间的伸展能力
• flex-shrink：剩余空间不足时的收缩能力
• flex-basis：没有伸展或收缩时的基础长度

Grid布局

float 浮动