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

样式引入方式共三种：

外部样式表：
<link rel="stylesheet" type="text/css" href="index.css">；
内部样式表：
<style type="text/css">
.inside {
background-color: #0f0;
font-size: 2em;
}
</style>
内联样式表：
<p style="font-size:3rem; background-color:#00f"></p>
如图，下面分别三种引入方式实例显示：

样式的三种引入方式

link 和 @import有什么区别：
link：它是html的标签，除了调用.css外还可以调用.js等外部数据，它引入的内容复用性好，缺点是调用的代码数据较庞大时浏览器加载时间会长一点,所以适合用在多个元素共用同一个样式表时使用；
调用方式：<link rel="stylesheet" type="text/css" href="???.css">
@import：它放置在内部样式表中，属于css的标签，只能调用.css文件,相对link调用少一次网络请求，响应较快。
调用方式：@import url(???.css)

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

.css文件为外部样式文件，放在不同文件目录有不同的路径调用方式

"../main.css"：为调用html文件上一目录的main.css样式文件；
"./main.css"和"main.css":都为调用html文件当前目录的main.css样式文件，后者省略"./";

三. console.log是做什么用的

用于调试页面程序，可以在审查元素调试时看到你在页面中输出的内容。
它的作用类似alert（），但是相对于alert（）他的优点是：

它能看到结构化的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的全部内容，
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

四.text-align有几个值，分别有什么作用

共有4个值：left（靠左）、center（居中）、right（靠右）、justify（两端对齐，窗口变小同样自动换行）
下面为text-align属性运行效果显示：

text-align演示

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

px、em、rem都为font-size的值的单位：
px：直接单位（像素），相对于屏幕分辨率来计算其字体所占像素值；
em：相对单位，其值相对其父元素来确认每em占的像素值，父元素未声明则继续往上一级父元素确认，若任然未声明则依次确认直到根节点（html）；
rem：相对单位，其值相对根节点（html）来确认每rem占的像素值，若根节点未明确声明则默认为1rem=16px；

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

chrome审查元素

七.如下代码，设置 p为几 rem，让h1和p的字体大小相等?

   <h1>饥人谷</h1>
   <p>饥人谷</p>
    <style>
      html{
font-size: 62.5%;
      }
      p{
font-size: ?rem;
     }
         h1{
font-size: 60px;
          } 
     </style>

计算结果为6rem：计算方式，html默认字体大小为16px，内部样式表再将html设置覆盖为16*62.5%=10px=1rem，那么P的字体大小应设置为6rem=60px；
如图：实际运行也为6rem；