问答题

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

浏览器缺省设置
外部样式表

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

内部样式表（在标签内部）

<style tyle="txt/css">
        p {
             background-color: bule;
}
</style>

内联样式表

<p style="border: 1px solid #fff;">xx</p>

link和@import的区别？

link标签语法：
<link rel="stylesheet" type="txt/css" herf="./xxx.css">```
***

@import语法：
.css中为： @import url(./css)
.html中为：<style>
@import url(./css)
</style>```

两者区别

区别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是做什么用的?

调式javascript。你可以看到你在页面中输出的内容。
相比alert他的优点是：

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

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

left	左对齐
rigth	右对齐
center	中间对齐
justify	两端对齐(没尝试成功)

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

px : 像素 (pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em和rem都是相对单位。em是相对于父节点的字号来计算。rem只相对根节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px;
重要：rem是css3属性，ie678不支持rem属性,需要做兼容处理。
如何使用？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html {
            font-size: 30px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <h1>px、em、rem如何使用？
    <p style="font-size: 2em;">猜猜我等于多少px{继承父级h1(h1默认为2em)所以我是120px}
    </p>

<p style="font-size: 2rem;">猜猜我等于多少px（根元素为30px，所以我是60px）
</p>
<p style="font-size: 16px;">猜猜我等于多少px（16px就是16px）

</p>


</html>