样式有几种引入方式? link和 @import有什么区别?
样式引入方式：
//外部样式表
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
//内部样式表
<style type="text/css">
p{
color:red;
}
</style>
//内联样式
<p style="color:red;">测试</p>
两种都是外部引用CSS的方式，差别在：
1.link是XHTML标签，除了引用CSS外还可以定义rel链接属性等，而@import是CSS提供的一种方式，只能引用CSS。
2.link引用CSS时，会在页面载入同时加载，而@import则会在页面完全载入完毕再加载。
3.link是CSS2.1提出的，老版本的浏览器会有兼容问题。
4.当用JavaScript改变DOM样式时，只有link支持。
文件路径../main.css、./main.css、main.css有什么区别？
../main.css：在目录上一级寻找main.css。
./main.css,main.css：在当前目录下寻找main.css。
console.log是做什么用的？
console.log主要是用来调试JavaScript用的。可以看到对象中的内容，并且不会弹出窗口打断操作。
text-align有几个值，分别有什么作用？
text-align:left;//文本左对齐
text-align:right;//文本右对齐
text-align:center;//文本居中
text-align:justify;//文本两端对齐
text-align:inherit;//从父元素继承文本属性的值
px、em、rem分别是什么？有什么区别？如何使用？
px：固定大小像素；
em：相对于父元素的像素大小，如果父元素没有设置则逐级向上查找；
rem：相对于根节点<html>的像素大小。
对chrome 审查元素的功能做个简单的截图介绍
Paste_Image.png
Paste_Image.png
如下代码，设置 p为几 rem，让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: 6rem;
}
h1{
font-size: 60px;
}
</style>
浏览器的默认字体大小为16px,而根节点<html>的font-size设置为62.5%，所以<html>字体大小为10px,所以应设为6rem。
网友评论