本教程版权归小圆和饥人谷所有，转载须说明来源

问答

1. 样式有几种引入方式? link 和 @import 有什么区别?

• 行内样式表

style=" "

• 内部样式表

<style></style>

• 外部样式表

<link rel=" " stylesheet=" " href=" ">

• 导入

@import url("test.css")

link 和 @import的区别

• 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

2. 文件路径 ../main.css、/main.css、main.css、/main.css有什么区别?

• ./main.css 为上一级目录的main.css文件
• ./main.css 为当前目录下的main.css文件
• main.css 为当前目录下的main.css文件
• /main.css 为根目录下的main.css文件

3. console.log是做什么用的

用于调试javascript；在网络控制台打印输入的信息；能看到结构化的信息。

4. text-align有几个值，分别有什么作用？写截图说明区别

| 值 | 描述 |
| -----|:----:| ---- |
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |

Paste_Image.png

5. px、em、rem分别是什么？有什么区别？如何使用?

• px：是Pixel的缩写，像素，是指基本原色素及其灰度的基本编码
• em：单位名称为相对长度单位，相对于当前对象内文本的字体尺寸
• rem：是相对单位，是相对HTML根元素

区别

• px为相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的；
• em为相对长度单位。相对于当前对象内文本的字体尺寸；
• rem可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

使用

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem（除了IE8及更早版本外），如果要考虑兼容性，那就使用px,或者两者同时使用。国外的大部分网站能够调整的原因在于其使用了em作为字体单位。

6. 对chrome 审查元素的功能做个简单的截图介绍

Paste_Image.png