1. 样式有几种引入方式?
- 外部样式表
<link rel="stylesheet" type="text/css" href="main.css">
<!-- 外部样式表 -->```
- 内部样式表
<style type="text/css">
body {
background: #fff;
}
</style>
- 行内样式表
<body style="background:#fff;">
</body>
- 导入
```
@import url("test.css")
```
##2. link 和 @import有什么区别?
1. 范畴不同
link是HTML标签,除了加载CSS之外,还可以定义其他如RSS事务;@import属于CSS范畴,只能加载CSS;
2. 加载顺序不同
link引入CSS时,在页
面加载时同时加载,而@import需要页面完全载入以后加载;
3. 兼容性差别
link是XHTML标签,因此无兼容问题,而@import是CSS2.1提出的(IE5以上才能识别),因此低版本的浏览器不兼容;
4. 是否支持JS DOM改变
link支持使用JavaScript控制DOM改变CSS样式,@import不支持
5. 权重不同
link方式样式的权重高于@import样式的权重
##3. 文件路径../main.css 、./main.css、main.css、/main.css有什么区别?
文件路径| 区别
:------------:|:------:
../main.css|上级目录的main.css
./main.css|当前目录的main.css
main.css|当前目录的main.css
/main.css|根目录的main.css
##4. console.log是做什么用的?
用来调试JS,输出到控制台比alert()方便一些。
## 5. text-align有几个值,分别有什么作用?为什么text-align:justify没有效果?写截图说明区别
text-align用来设置文本的对齐方式,常用的有4个值
1. left 向左对齐
- right 向右对齐
- center 居中对齐
- justify 两侧调整对齐
- inherit 规定应该从父元素继承 text-align 属性的值。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-9fb9d8062b070d2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
## 6. px、em、rem分别是什么?有什么区别?如何使用?
1. px:是Pixel的缩写,像素,是指基本原色素及其灰度的基本编码.
2. em:单位名称为相对长度单位,相对于当前对象内文本的字体尺寸.
3. rem:是相对单位,是相对HTML根元素.
值 |区别
------| ------
px| px为相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的;
em| em为相对长度单位。相对于当前对象内文本的字体尺寸;
rem| rem可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem(除了IE8及更早版本外),如果要考虑兼容性,那就使用px,或者两者同时使用。国外的大部分网站能够调整的原因在于其使用了em作为字体单位。
##7. 对chrome 审查元素的功能做个简单的截图介绍?
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-b1944747ce9b92ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)