持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情。

CSS

外部样式表：CSS保存在 .css文件中 内部样式表：将CSS放在style 标签里 内联样式：在HTML元素的style属性中添加。

link 和 @improt 的区别： 适用范围不同：@import 可以在html页面中使用，也可以在CSS文件中使用，用来将多个CSS 文件引入到一个 CSS文件；link只能引入的html页面 页面被加载时候，link引用的CSS 会同时被加载，@import 引用的css会等到页面被加载完之后才加载。

CSS用户界面属性 resize 规定元素如何被用户调整大小(horizontal 只允许调整元素的宽度、 vertical 只允许调整元素高度、both 宽高皆可) outline-offset 轮廓偏移 属性在轮廓与元素的边框之间添加空间。

vertical-align： middle 指定行内元素、行内块元素、表格的单元格的垂直对齐方式

CSS Hack 通过在 CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的

CSS Hack三种常见形式 1、属性Hack(比如IE6能识别 _ 和 * ，而Firefox 两个都不能识别) 2、选择符级Hack(比如IE6能识别 *html ，IE7 能识别 *+html) 3、IE条件注释Hack(只有在IE浏览器下才会执行)

meta viewport 是做什么用的，怎么写？

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

控制页面在移动端不要缩小显示。 canvas 提供一个绘制2D图形的画布

CSS3 新增

1、新增子代选择器：p:nth-child(n) {color: rgba(255, 255, 255, 0.5)}

2、弹性盒模型：display：flex

3、媒体查询：@media (max-width: 400px){color: skyblue}

4、字体属性：font-size 设置字体大小

5、边框圆角：border-radius

6、阴影：box-shadow

7、图像背景：border-image

8、transition 设置过渡动画: transition-duration 设置过渡时间 transition-property过渡效果 transition-delay过渡效果何时开始（延迟时间）

9、transfrom 转换：旋转 rotate(旋转度数) 移动translate(x, y) 缩放scale(x, y)

10、animation 动画: animation-name 设置动画名称 animation-duration 动画持续时间

11、渐变： linear-gradient：线性渐变    radial-gradient： 径向渐变

12、Grid栅格布局：display：grid grid-template-columns 和 grid-template-rows属性来定义网格中的行和列