HTML2

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

样式引入方式：

//外部样式表
<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
//内部样式表
<style type="text/css">
  p{
      color:red;
 }
</style>
//内联样式
<p style="color:red;">测试</p>

两种都是外部引用CSS的方式，差别在：
1.link是XHTML标签，除了引用CSS外还可以定义rel链接属性等，而@import是CSS提供的一种方式，只能引用CSS。
2.link引用CSS时，会在页面载入同时加载，而@import则会在页面完全载入完毕再加载。
3.link是CSS2.1提出的，老版本的浏览器会有兼容问题。
4.当用JavaScript改变DOM样式时，只有link支持。

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

../main.css：在目录上一级寻找main.css。
./main.css,main.css：在当前目录下寻找main.css。

console.log是做什么用的？

console.log主要是用来调试JavaScript用的。可以看到对象中的内容，并且不会弹出窗口打断操作。

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

text-align:left;//文本左对齐
text-align:right;//文本右对齐
text-align:center;//文本居中
text-align:justify;//文本两端对齐
text-align:inherit;//从父元素继承文本属性的值

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

px：固定大小像素；
em：相对于父元素的像素大小，如果父元素没有设置则逐级向上查找；
rem：相对于根节点<html>的像素大小。

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

Paste_Image.png

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

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

浏览器的默认字体大小为16px,而根节点<html>的font-size设置为62.5%，所以<html>字体大小为10px,所以应设为6rem。