样式有几种引入方式? link和@import有什么区别？
样式有三种引入方式：
- 外部样式表
当多个页面有通用样式时，用外部样式表比较好，复用度高，便于修改。外部样式表用link标签引入。
<link rel="stylesheet" type="text/css" href="style.css">
- 内部样式表
在页面样式较少，并且是当前页面的独有样式的情况下，建议用此方法。优点是减少网络加载请求，读取速度快。内部样式表在页面head里面用<style>标签定义。
<html>
<head>
<meta charset="utf-8">
<title>这是一个范例</title>
<style>
.mydiv{
width:800px;
height:100px;
border:1px #ccc solid;
}
</style>
</head>
<body>
<div class="mydiv">hello</div>
</body>
</html>
- 内联样式表
一般情况下不推荐使用。当有某个容器有特殊样式的特殊情况下，可适当选择此方法。直接写在标签内部。
<body>
<div style="border:1px #ccc solid;">hello</div>
</body>
link和@importde的区别：
- link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
- 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
文件路径../main.css、./main.css、main.css、/main.css有什么区别？
- ../main.css表示上一级目录的main.css文件；
- ./main.css表示当前目录的main.css文件；
- main.css表示当前目录的main.css文件
- /main.css表示根目录下的文件main.css
console.log是做什么用的？
开发调试过程中用的，它会把信息展示在控制台上，比alert()更方便一些。
text-align有几个值，分别有什么作用？写截图说明区别
- left：让文本居左排列。
- center：让文本居中排列。
- right：让文本居右排列。
- justify：实现文本两端对齐的效果。
-
inherit：规定应该从父元素继承属性的值。
代码截图
显示效果截图
px、em、rem分别是什么？有什么区别？如何使用?
- px是相对长度单位，是相对于显示器屏幕分辨率而言的。它的大小是固定的。
- em是相对单位，它的值不固定， 会继承父级元素的字体大小。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- rem也是相对单位，它与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
如何使用：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
单位转换工具
对chrome 审查元素的功能做个简单的截图介绍
chrome截图介绍
如下代码，设置 p为几 rem，让h1和p的字体大小相等?
设置p的字体为6rem时，h1和p的字体大小相等。
因为html的字体是62.5%，即10px，？x10=60，所以答案是6rem。
本教程版权归作者和饥人谷所有，转载须说明来源！
网友评论