样式有几种引入方式? link和 @import有什么区别？
- 样式有三种引入方式
- 1.内联样式
<p style="background-color:red;">内联样式</p>
- 2.内部样式
<head>
<style>
p{
background-color:red;
}
</style>
</head>
- 3.外部样式
<head>
<style>
<link rel="stylesheet" href="test.css" type="text/css">
</style>
</head>
- 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可以控制的。
文件路径../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有四个值
- text-align:left; 文本左对齐，也是text-align的默认样式
- text-align:right; 文本右对齐
- text-align:center; 文本居中
-
text-align:justify; 改变字与字之间的间距：主要用于长文本段落使文本对齐美观。
text-align:justify效果
px、em、rem分别是什么？有什么区别？如何使用？
- px是绝对大小，em、rem是相对大小
- px表示像素单位，font-size:12px;表示字体为12像素。
- em与rem表示相对大小的单位
- font-size:1.2em;表示当前字体大小相对于父元素字体大小的1.2倍。
- font-size:1.2rem;表示当前字体大小相对于HTML(根节点)字体大小的1.2倍。（如果HTML未设置字体大小，在浏览器中默认的文字大小是16px）
对chrome 审查元素的功能做个简单的截图介绍
选中将要审查元素的工具
选中页面中将要审查的元素
选中后元素的代码将在开发者工具Elements选项中高亮显示
最右侧显示所选中元素的style样式
在审查界面中更改样式
可直接对此元素进行更改（优先级最高）
在此元素原样式下更改
![Uploading Paste_Image_805446.png . . .]
如下代码，设置 p为几 rem，让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
- 在浏览器中默认的文字大小是16px，font-size:62.5%;应该为10px。所以p为6rem可以让h1和p的字体大小相等
本博客版权归 杨然和饥人谷所有，转载需说明来源
