HTML知识点2
一、样式有几种引入方式? link 和 @import有什么区别？
有三种方式引入样式：
1、外部样式表
当样式需要被应用到很多页面的时候，可以使用外部样式表，通过更改一个文件来改变整个站点的外观。
<link rel="stylesheet" type="text/css" href="basic.css">
2、内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。
<style type="text/css">
body{background-color:green;}
p{font-size:10px;}
</style>
3、内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
<p style="boder:1px solid white;border-radius:4px">段落</p>
link和@import的区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- ink支持使用Javascript控制DOM去改变样式；而@import不支持。
二、文件路径../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是做什么用的？
- console.log主要用于对JavaScript程序调试，相比于alert()，console.log仅在控制台中打印相关信息，不会阻断JavaScript程序的执行。
- 兼容没有控制台的浏览器。对于缺少调试控制台的老版本浏览器，window中的console对象并不存在，可以人为定义console对象，并声明该console对象的log函数为空函数；这样当console.log()语句执行时，这些老版本的浏览器将不会做任何事情。
- 使用参数。console.log()可以接受变量并将其与别的字符串进行拼接，也可以接受变量作为参数传递到字符串中，其具体语法与C语言中的printf语法一致。console.log("%s is %d years old.", people, years)
四、text-align有几个值，分别有什么作用？写截图说明区别？
text-align值及作用：
- left：把文本排列到左边。默认值：由浏览器决定。
- right：把文本排列到右边。
- center：把文本排列到中间。
- justify： 实现两端对齐文本效果。
-
inherit：规定应该从父元素继承 text-align 属性的值。
区别截图：
（1）
Paste_Image.png
结果：
Paste_Image.png
Paste_Image.png
结果：
Paste_Image.png
五、px、em、rem分别是什么？有什么区别？如何使用？
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
区别：使用时px是像素值，用PX设置字体大小时，比较稳定和精确，em会继承父级元素的字体大小，会根据基准来缩放字体的大小，值并不是固定的。Rem是相对于根元素<html>，来缩放字体大小。
使用：除了IE6-IE8，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。考虑兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
六、对chrome 审查元素的功能做个简单的截图介绍？
Paste_Image.png
七、如下代码，设置 p为几 rem，让h1和p的字体大小相等?
Paste_Image.png
根元素设定字体大小为62.5%*16px=10px；
h1 60px=6em=？rem；根元素既为6rem。
本教程版权归作者和饥人谷所有，转载须说明来源！
