1. 样式有几种引入方式? link 和 @import有什么区别？
- 外部样式表：指在html文件的head标签中，使用link引用另一个css文件中定义的样式。当样式需要被应用到多个页面的时候，外部样式表将是理想的选择。
<html>
<title>renwu5</title>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body></body>
</html>
- 内部样式表：指在html文件的head标签内声明样式。当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<html>
<title>renwu5</title>
<head>
<style>
p {
color:red;
font-size:10px;
}
</style>
</head>
<body>
<p>css样式</p>
</body>
</html>
- 内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
<html>
<title>renwu5</title>
<head>
</head>
<body>
<p style="color: #fff">css样式</p>
</body>
</html>
- @import导入式：
<style type="text.css">
@import url("style.css");
</style>
** link 和 @import有什么区别？**
- 根本的区别。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可以控制的。
2. 文件路径../main.css 、./main.css、main.css有什么区别?
- ../main.css：指上一级目录下的文件
- ./main.css：指当前目录下的文件，“./”也可以省略
- main.cs?s：指当前目录下的文件
3. console.log是做什么用的?
主要是方便调式javascript用的，因为它可以看到页面中输出的内容。相比alert而言：它能看到结构话的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。还有就是console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
4. text-align有几个值，分别有什么作用？
text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。它的值有：left、center、right、justify、inherit。
left:实现文本居左显示
文本居左
center:实现文本居中显示
文本居中
right:实现文本居右显示
文本居右
justify:实现文本两端对齐
两端对齐
inherit:规定应该从父元素继承 text-align 属性的值
5. px、em、rem分别是什么？有什么区别？如何使用？
px，是一种像素尺寸，在html可以直接用来指定字体的大小，假设一个字体的高度为16像素，这说明字母的最低部分和最高部分之间有16像素。
em,类似于百分数，是一个相对度量单位，使用em时，要指定一个比例因子，如：font-size:1.2em;
这表示该元素的字体大小是它父元素的字体大小的1.2倍。这个单位过于灵活，只要有一个父单位被改变，此单位就会随之改变，所以一般来说用的少一些。
rem，是css3中增加的相对度量单位，是相对于根元素(即html元素)计算值的倍数。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
6. 对chrome 审查元素的功能做个简单的截图介绍
截图
7. 如下代码，设置 p为几 rem，让h1和p的字体大小相等?
代码
浏览器的默认字体大小为16px,那么HTML字体大小为：62.5%×16=10px，10×？=60px,所以当p为6rem时,p 和h1字体大小相等。
本教程版权归本人和饥人谷所有，转载须说明来源
网友评论