1.样式有几种引入方式？ link 和 @import 有什么区别？
样式的写法有五种，其中一种是浏览器的缺省设置也就是默认样式。其他四种引入方式分别为：link（链入外部样式表），@import （导入外部样式表），内置样式表以及内联样式表。
① link（链入外部样式表）
在 <head> 部分加入 <link type="text/css" rel="stylesheet" href="./index.css">，引入外部的 CSS 文件。
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用 <link> 标记链接到这个样式表文件，这个 <link> 标记必须放到页面的 <head> 区内。
这个例子表示浏览器从 index.css 文件中以文档格式读出定义的样式表，其中 type="text/css" 表示这个信息的类型是 "text/css" 。换句话说，这是一个 CSS 样式表。在 HTML5 中，不再需要这个属性（可选）。rel="stylesheet" 此属性指定了 HTML 文件与所链接的文件之间的关系。我们要链接到一个样式表，这里使用值 "stylesheet"。href="index.css" 是文件所在的位置。
这里需要注意的细节就是 href="./index.css"，"./" 表示当前路径下的 index.css，这是可以不加的，而拓展开来，若是这种情况 href="../index.css" 则就代表为上一级的目录下的文件。
② @import （导入外部样式表）
导入外部样式表是指在内部样式表的 <style> 里导入一个外部样式表，导入时用 @import，例：<style> @import url(index.css); </style>
③ 内置样式表
在<head>部分加入<style type="text/css"> p{color:red;} </style>，也就是在 <head> 中的 <style> 里添加相关的样式声明，这种方法适用于加入的样式不是通用的，只适用于该文件，其优势相对来说在于减少一次加载即网络请求。
④内联样式表
直接在页面的标签里加<p style="border: 1px solid #fff; border-redius: 4px;">段落</p>，该方法使得样式的属性内容直接跟在将要修饰的文字标记里。而其中的 <style> 只是标签中的一个属性。
link 和 @import 有什么区别？
① link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性，等，@import 就只能加载 CSS 了。
② link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
③ link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。
④ link是 XHTML 标签，无兼容问题；@import 是在 CSS2.1提出的，低版本的浏览器不支持。
2.文件路径 ../main.css、./main.css、main.css 有什么区别？
./main.css 中的 "./" 表示当前路径下的 main.css，这是可以不加的，也就是说 ./main.css = main.css 。而拓展开来，若是这种情况 ../index.css 则就代表为上一级的目录下的文件。
3. console.log 是做什么用的？
console.log 可以方便你调式 javascript，另你可以看到你在页面中输出的内容。
我们在编辑器中输入
<script>
console.log(100);
console.log(101);
console.log(102);
var obj = {
name: "hunger",
age: 100
};
console.log(obj);```
在控制台的审查元素中我们就可以看到下面的信息：
这使得我们可以很清晰的看到我们在页面中输出的内容，方便调试。
console 不会像 alert 一样打断你页面的操作，而且 alert 不会输出你的内容，不方便调试。
#####4. text-align 有几个值，分别有什么作用？
text-align 有五个值，分别是 `text-align:center`，`text-align:left`，`text-align:right`，`text-align:justify`，`text-align:inherit`
text-align 属性规定元素中的文本的水平对齐方式。
`text-align:center` 把文本排列到中间，`text-align:left` 把文本排列到左边。默认值：由浏览器决定，`text-align:right` 把文本排列到右边，`text-align:justify` 实现两端对齐文本效果，`text-align:inherit` 规定应该从父元素继承 text-align 属性的值。
#####5. px、em、rem 分别是什么？有什么区别？如何使用？
① px 像素（Pixel），用 PX 设置字体大小，像素 px 是相对于显示器屏幕分辨率而言的。
② em 是相对长度单位，相当于当前对象内文本字体尺寸，如果当前对行内文本的的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸来设置。
③ rem 使用时仍然是相对大小，但相对的只是 HTML 根元素，通过它就可以只修改根元素来成比例地修改调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
他们的区别在于：
① em 和 rem 的值不是固定的，px 是相对固定的。
② em 会继承父级元素的字体大小，但 rem 不会继承父级元素的字体大小，只相对 HTML 根元素。
我们可以看下面这个例子：
<html>
<head>
<meta charset="utf-8" />
<style>
html {
font-size: 30px;
}
</style>
</head>
<body>
<h1>这里是标题<h1>
<div class="mydiv" style="font-size: 2em;">我是div
<p style="font-size: 2em;">我是子元素em</p>
<p style="font-size: 2rem;">我是子元素rem</p>
<p style="font-size: 12px;">我是子元素px</p>
</div>
</body>
</html>```
从这个缩略的代码区块我们可以看到我们人为设置的 html 根元素字体大小是 30px，其中 h1 的默认样式是 2em，所以它的值为 2 X 30px=60px，而 div 中的 em 因为 em 会继承父级，而上面有 h1，所以“我是子元素em” 的字体大小 60 X 2=120px。div 中的 rem 只会继承根目录的字体大小，所以“我是子元素rem”的字体大小为 30 X 2=60px，最后一个“我是子元素px”的字体大小为12px。
6.对chrome 审查元素的功能做个简单的截图介绍
chrome 审查元素.jpg
7.如下代码，设置 p 为几 rem，让 h1 和 p 的字体大小相等?
题目.png
答案为6rem。因为浏览器默认为 1em=16px 。而这里 html 设置为
font-size: 62.5%; ，所以 em 的值变为 16*62.5%=10px。所以 p 中 ？=6 即可让 h1 和 p的字体大小相等。
网友评论