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

①css的引入一般有3种，分别为：
（1）外部资源引入

<link rel="stylesheet" type="text/css" href="xxx.css">

（2）内部style标签

<style type="text/css">
div
{ 
color: red; font-size:12px; 
} 
</style>

（3）内联style属性

<div style="color:red; font-size:12px;">123</div>

②
差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

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

• ../main.css表示上一级目录下的css文件；
• ./main.css和main.css表示当前目录下的css文件；
• /main.css表示磁盘根目录

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

console 控制台
log 日志
意思是在控制台输出日志信息,控制台也叫开发者工具,是浏览器的一部分，便于开发者调试用的。

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

①text-align的5个值：

justify差异

如图所示，两段颜色为深绿色darkgreen的段落同属于class:"justify",都在css样式里对text-align设置了"justify"即段落两端对齐的属性，但第一个没有占满一行内容的深绿色段落是直接显示左对齐的样式，并没有显示"justify"的效果，因为它没有占满一行内容，只有左边对齐，右边无法和任何内容对齐，但是第二段深绿色的片段占了3行内容，可以看到应用了"justify"参数后它的左右两端都是对齐的。

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

IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem

• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

• em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的；em会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意两点：
  ①body选择器中声明Font-size=62.5%；
  ②将你的原来的px数值除以10，然后换上em作为单位。
  重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

• rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

• 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

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

chrome调试

代码

代码