样式有几种引入方式?
- 外部样式 link(链接)和@import（导入）
<link rel="stylesheet" type="text/css" href="css./index.css"> - 内部样式（标签内部）
<styletype="text/css">p{color:red;}</style> - 内联样式（html元素内部）
<p style="color:red">这里文字是红色。</p>
link 和 @import有什么区别
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
1. link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表
文件路径../main.css 、./main.css、main.css有什么区别
1. ../main.css 表示选择上层目录的main.css
2. ./main.css 表示选择了当前目录的main.css
3. main.css和./main.css相同
console.log是做什么用的
主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构话的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到：
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}
它有网页的各种提示。
text-align有几个值，分别有什么作用
text-align的值有四个：
- left : 左对齐
- right: 右对齐
- center: 水平居中
- justfy: 两边对齐
px、em、rem分别是什么？有什么区别？如何使用
px单位
px（像素），国内网站相对来说用得比较多，任意浏览器的默认字体高都是16px。
em单位
em才是真正的“相对单位”，它不是一个具体的数值，而是相对于父元素的属性计算出来的大小，一般移动终端布局用em比较合适。
rem单位
rem单位是CSS3中新增的一个相对单位，只不过它要比em单位强大一些，因为它是集相对大小和绝对大小的 优点于一身，也就是说它除了有px，pt 的绝对大小属性外，还具备了em的相对大小属性。为什么呢？因为rem这个单位是相对于根元素HTML的。而如果我们想修改大小，只需修改根元素HMTL 的大小就可以了。除了IE8及更早的版本个，目前所有的主流浏览器均支持此属性。
对chrome 审查元素的功能做个简单的截图介绍
如下代码，设置 p为几 rem，让h1和p的字体大小相等?
答案：6em
一般62.5%是10px。了解到这样做的目的是为了响应式的考虑
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: 6rem;
}
h1{
font-size: 60px;
}
</style>
对chrome 审查元素的功能做个简单的截图介绍
google调试.jpg
代码
设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333
设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="
font-family:"微软雅黑"；
font-size:16px;
line-heigth:1.5em;
color:#333;
">
<p style="
color:#000;
text-indent: 2em;
line-height:1.5em;
">text
</p>
</body>
</html>
网友评论