css是什么？

答案：层叠样式表是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

语法

• 选择器{ 属性名：属性值； }
• @语法（不常用）

文档流

1. inline元素：这个元素的流动方向是从左到右，宽度为内部inline元素宽度的和，不能用width指定宽度，高度由line-height间接决定于height无关.
2. block元素：这个元素的流动方向是从上到下，并且每个block元素都需要另起一行。block默认自动计算宽度，可以用width指定具体宽度，高度右line-height间接觉得，可以设height。
3. inline-block：流动方向也是从左到右，但结合了两者的特点，宽高可由width和height决定。

盒模型

• contnet-box:以内容为边界的盒模型
• border-box:以边框（border）为边界的盒模型（content+pdding+border）
• 我们一般优先使用border-box(谁用谁知道)

布局

1. float布局(需要兼容IE9以下时使用)：

在子元素上加上float:left和width;在父元素加上.clearfix

2. flex布局（目前最常用的布局）

具体参考flex mdn

3. grid布局（需要兼容最新浏览器时使用）

前端戒律

必须给设计稿才开始写代码!

定位

一个div的五层定位

定位元素（Z-index>0）

内联子元素（一般是文字）

浮动元素

块级子元素

broder

background

定位元素（Z-index<0）

由下至上就是DIV块中各级元素的上下位置

浏览器渲染原理

• 根据HTML构建HTML树
• 根据CSS构建CSS构建CSS树
• 将两颗树合并渲染成一颗树（render）
• Layout布局：文档流、盒模型、位置和定位
• Paint绘制：将边框颜色、背景颜色、文字颜色和阴影等画出来
• Compose合成

CSS动画的两种做法

1. transition

作用：补充中间帧 语法：transition:属性 时长 过渡方式 延迟；

• 可以用逗号分隔两个不同的属性
• 可以用all代表所有属性
• 过渡方式一般有：linear（线性）、ease(非线性)

2.animatation

语法：animatation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；