1.样式有几种引入方式？link和@import有什么区别
有5种写入样式方式：
1.行内式，在html元素标签中使用style属性来规定样式。
<p style="color:red">行内式</p>
2.嵌入式，在head元素中使用style标签，对整个页面中的各个元素进行设置。
<head>
<style type="text/css">
p {
color: red;
}
</style>
</head>
3.链入外部样式，使用link标签来引入一个外部样式表，也就是css文件。
<head>
<meta charset="UTF-8">
<title>饥人谷</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
4.导入式，使用@import导入外部样式表。
<style type="text/css">
@import "demo.css";
</style>
link和@import有什么区别
- 最主要的区别：link是XHTML标签，除了加载css外，还可以定义RSS，定义rel链接属性等，@import属于css范畴，只能加载css。
- 加载顺序的区别：link引入css时，在页面加载时同时加载，@import需要在网页完全载入以后加载。所以说一直有一个观点就是为了提高web网页性能，让用户得到更快的页面显示，不要使用@import而去使用link。
- 兼容性的区别：link是XHTML标签，无兼容性的问题，@import是在CSS2.1提出的，低版本的浏览器不支持。
- 使用dom控制样式的区别：link支持使用javascript控制DOM去改变样式，而@import不支持。
2.文件路径.../main.css、./main.css、main.css有什么区别？
../main.css表示打开上一级目录下的main.css文件。
./main.css和main.css表示的意思是一样，都是打开当前目录下的main.css文件。
3.console.log 是做什么用的？
console.log的功能是在控制台打印出你想要的数据，相对于alert(),它不会打断你javascript程序的执行，是一种更好的javascript程序的调试方式。
关于console.log的使用以及javascript的调试还不是很了解，先分享一个博客Chome开发者工具不完全指南（二、进阶篇）,在以后的学习中再慢慢熟悉开发者工具。
4.text-align 有几个值，分别有什么作用？
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 把文本排列在左边 |
| right | 把文本排列在右边 |
| center | 把文本排列在中间 |
| justify | 实现两端对齐本文效果 |
| inherit | 规定应该从父元素继承text-align属性的值。 |
| 默认值 | 如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。 |
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
代码测试如下：
text-align测试
在测试的时候发现
text-align: justify;出现了问题，直接使用这段代码并没有生效。后来参考了大漠的这篇文章Text-align:Justify和RWD,使用伪类：after解决了问题。关于这段伪类代码我是这么理解的：使用伪类after创建了一个content属性为空白的内联块元素，由于这个元素的width为100%，它会导致一个换行符出现，这样一来它前面的内容就实现了两端对齐。
这种方法是文章中作者推荐的，更简洁更有语义。
5.px、em、rem分别是什么？有什么区别？如何使用？
- px，是一种像素尺寸，在html可以直接用来指定字体的大小，假设一个字体的高度为14像素，这说明字母的最低部分和最高部分之间有14像素。
- em,类似于百分数，是一个相对度量单位，使用em时，要指定一个比例因子，就像这样：
font-size:1.2em;
这表示该元素的字体大小是它父元素的字体大小的1.2倍。
- rem，是css3中增加的相对度量单位，是相对于根元素(即html元素)计算值的倍数。
注意：浏览器默认的字体大小是16px。
他们的区别在于px的值是固定的，而em、rem的值是相对的。em是相对于父元素，而rem是相对于根元素。
使用方法用一段代码表示：
字体方法
6.对chrome 审查元素的功能做个简单的截图介绍
chrome
7.如下代码，设置 p 为几 rem，让 h1 和 p 的字体大小相等?
题目
浏览器的默认字体大小是16px，所以html的字体大小是16*62.5%=10px，所以p为6rem情况下可以让h1与p的字体大小相等。
本教程版权归饥人谷_任磊和饥人谷所有，转载须说明来源。
网友评论