问答：

---

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

1. 外部样式表 写一个.CSS文件 然后用<link href=“index.css” type=“text/css” rel=“stylesheet”>进行引用。
2. 内部样式表（位于标签内部）<style type=“text/css”>p{color: red;}</style>
3. 内联样式（在html元素内部）<p style=“color:red; font-size:14px;”>hello</p>

link和@import有什么区别：外部引用CSS两种方式link和@import的方式分别是：
XML/HTML代码
<link rel=“stylesheet” rev=“stylesheet” href=“CSS文件” type=“text/css” media=“all” />
XML/HTML代码

          <style type=“text/css” media=“screen”>
          @import url(“CSS文件”);
          </style>

两者都是外部引用CSS的方式，但是存在一定的区别：

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文件。

3、console.log是做什么用的？

用于调试的时候，在控制台看到输出内容。
简单来说就是用于在chrome中进行javascript调试，通过console控制台输出js结果，查看js命令的输出情况
例如：
代码：console.log(1):
效果如下：

展示效果

4、text-align有几个值，分别有什么作用？为什么text-align:justify没有效果？写截图说明区别？

left 左对齐（默认left）
right 右对齐
center 居中对齐
justify 两端对齐
inherit 继承父元素对齐方式代码如下：

代码展示

• 为什么text-align:justify没有效果？

如下:
两个 你好！没有显示出justify的功能，因为文字长度太短，而大段的文字（红框处）就显示出了justify的效果，使文字两端对齐，大段的文字得以美观

justify效果测试 网页效果

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

px 像素。浏览器默认字体最小像素为12px；
em 相对单位。相对于父级元素的像素大小而决定大小;
rem 相对单位。相对于根节点html设置的像素大小而决定大小。
一般，都使用px决定像素大小；
em一般用于首行缩进或是设置行高；
rem较多用于移动端页面设置字体大小。

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

如图所示

---

代码：

展示如下：我是代码