1.样式有几种引入方式？ link 和 @import 有什么区别？
CSS有3种引入方式：
- 外部样式表
在<head>标签里面引入外部.css文件：
<link rel="stylesheet" type="text/css" href="css/task5.css">
优势:文件可控制多个页面；易改版、便于维护；减少代码量、代码简洁规范易于分工协作；有效利用缓存机制。
劣势：外部引入中的href属性会给服务器造成请求的压力。
- 内部样式表
在<head>标签中添加<style>标签引入:
<style type="text/css">
body {
color: red;
}
</style>
这种方式的缺点是只对当前页面有效,不便于维护.不过像方式1那样加载外部文件需要时间如果有少量的,只在本页面使用的css时推荐这种方式.
- 内联样式表
直接在该标签上引入：
<p style="color: red;">内联样式表</p>
这种方式只对当前元素有效
link 和 @import的区别:
1. link语法
<link href="CSS地址" rel="stylesheet" type="text/css" />
2. @import语法
- 在html中
<style>
@import url(css文件路径);
</style>
- 在css中
@import url(css文件路径);
区别
<link>是html标签，只能放在html源码中；而后者可以看作css样式，可以放在html中的<style>标签中和在css文件中。而且在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）。
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载;
而@import引用的CSS 会等到页面全部被下载完再被加载。
简而言之，推荐用<link>
2.文件路径 ../main.css 、 ./main.css 、 main.css 有什么区别？
../表示当前文件的上级文件夹,./表示当前文件所在的文件夹。
./main.css和main.css都代表当前目录的main.css文件。
../main.css代表上一级目录的mian.css文件。
3.console.log 是做什么用的？
主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。
相比alert他的优点是：
1.alert() 输出的结果是一个模态消息框 (model message box) ,必须有用户干预才能结束,而 console.log() 会直接将结果输出到控制台
2.JavaScript 的基本类型是数值类型,字符串类型,布尔类型, null 和 undefined ,除此之外所有其他类型都是对象.对于简单类型, alert() 和console.log() 都能输出结果.而对于对象类型, alert() 会弹出 [object object] ,且并不能输出对象内部的值, console.log() 却可以做到
拓展阅读：
4.text-align 有几个值，分别有什么用？
主要有 left , right , center , justify这几个值。
left: 行内内容向左侧边对齐
right: 行内内容向右侧边对齐
center: 行内居中
justify: 文字向两侧对齐
拓展阅读：
5.px、em、rem、分别是什么？有什么区别？如何使用？
- px : 像素 (pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em : em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
特点：- em的值并不是固定的；
- em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
- rem : root em，rem是CSS3新增的一个相对单位。
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
**注意：** 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。 对于需要适配各种移动设备，使用rem。
拓展阅读：
6.对 chrome 审查元素的功能做个简单的截图介绍？
1.png
网友评论