样式有几种引用方式？link和<span color="red">@import</span>有什么区别？

样式引入方式有三种：

１.外部引入样式如<link rel="stylesheet" href="styles/style.css">
　２.内部样式表样式如<styletype="test/css" > body,p,h2 {margin: 0px;padding: 0px;}</style>
　３.内联样式如<p style="color:red;font-size:14px">字体红色，字大14px</p>
link与@import二者都是引入外部文件,他们的区别是:
　 1:link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
　2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
　3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

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

• ../main.css:意思是转到上一级目录，然后找到main.css文件；
• ./main.css:意思是在当前目录中找到main.css文件：
• main.css与./main.css效果一样，只是加“.”显得更规范一点。

console.log是做什么用的?

它是一个拥有输出记录功能的命令，可以从你自己的web页面上调用，然后以最快的方式转储尽可能多的信息到控制台上，从而能更醒目地让你意识到你的javascript下一步需要做什么。
&nbsp；console.log提供的功能远不止这些，还可以在它的控制台中做更多的事。如果给log传递的是一个对象或者数组、HTML元素等，控制台将会显示为一个超链接，点击它就可以查看该元素的详细信息了。相较于“alert”，console可以更为直观，更为简洁的展示比较详细的信息。

text-align: justify是什么？

&nbsp；text-align是描述文本对齐方式的一个属性，常见的值有left、right、center。

• 值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。简单一点的说，就是强行两端对齐（多行文字），行中字与字间距会适当调整。

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

• px:像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。因此，相对与一台机器，px就是一个绝对的单位，设定了多少就是多少。
• em：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

注意：em的值不是固定的，只有在父级没有设定大小的时候才跟着浏览器默认字号走，如果父级设定了大小，它会在父级的基础上添加相应的倍数（1em=1倍，1.5em=1.5倍），因此，如果父级元素设定大小后，子级假如设定为1.2em（即父级的1.2倍），如果它的子级再设置1.2em，就会变为1.21.2=1.44em。这是一个相对的关系。*

• rem：针对跟节点（HTML）进行倍数的升降，这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

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