1.样式有几种引入方式? link和 @import有什么区别
三种方式：
- 外部样式表
<link rel="stylesheet" type="text/css" href="less/all.css" /> - 内部样式表
<style type="text/css">
body{
color: #000;
font-size: x-large;
}
</style>
- 内敛样式表
<div style="font-size: 16px;text-align: center;">
内敛样式测试
</div>
ps:推荐使用第一种方式，css好维护一些，总体利大于弊
link和 @import区别
- link是XHTML标签，除了加载CSS外，还可以定义RSS、rel链接等其其它方面；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载，有可能出现闪的情况。
- link是XHTML标签，没有兼容性问题而@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式而@import不支持这么做。
ps：@import最优写法为(兼容浏览器最多)
@import url(style.css)
@import url("style.css") //从字节优化的角度来看更佳
2.文件路径../main.css 、./main.css、main.css有什么区别
- ../main.css 表示父目录路径
- ./main.css 表示当前路径
- main.css 表示当前路径，也表示当前路径文件
3.console.log是做什么用的
- js调试信息输出到控制台
- 可以输出js对象结构化的信息
- 不会阻断js程序运行
4.text-align有几个值，分别有什么作用
有5个值，分别为：
- left （默认值）实现元素中的文本左对齐
- center 实现元素中的文本居中对齐
- right 实现元素中的文本右对齐
- justify 实现元素中的文本两端对齐
- inherit 从父元素继承 text-align 属性的值
5.px、em、rem分别是什么？有什么区别？如何使用
- px、em、rem分别是
px像素是一种相对长度单位，相对于显示器分辨率
em也是一种相对长度单位，是相对于其父元素来设置字体大小
rem也是一种相对单位长度，相对于根元素<html>的单位 - 区别&使用
px为单位是比较方便，而且一致又稳定和精确，但是是固定的。但存在当用户在浏览器中浏览我们开发的网页时，他重新设置了浏览器的字体大小时，会使我们的网页布局被打乱，从而影响到布局。
em是相对于其父元素来设置字体大小的，灵活方便，但也存在一个麻烦的问题，进行任何元素设置，都有可能需要了解他父元素的大小，当我们多次使用时，就会存在潜在的错误风险。
rem借鉴两者的优点，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的潜在风险
6.对chrome 审查元素的功能做个简单的截图介绍
B9FA36FA-C427-4156-B7AA-0BD91AC2B82B.png
7.如下设置p为几个rem，让h1和p的字体大小相等？
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
由于浏览器默认字体大小是16px，h1的字体大小是60px，根据rem的计算规则可得知 p的rem值＝60/(16*62.5%)=6。
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
