样式的引入方式，link 和 @import的区别

1.外部引入式
使用link标签或者@import标签从外部引入后缀名为.css的样式文件，语法分别是：

@import url(路径+###.css);```

2.嵌入式
把样式写在当前<style></style>标签内，语法是：
```<style>p {color:red; text-align:center;}</style>```

3.内联式
在所要添加样式的开始标签内添加样式（不能在结束标签添加），语法为：
```<p style="color:yellow,font-size:20px">我是P标签内容</p>```

link 和 @import的区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用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 是在当前目录的根目录寻找 css文件

# console.log的作用
用于调试代码，在控制台中更改变量。

# text-align的用法
共五种：
> text-align：left 表示文本排列到左边
text-align：center 表示本文居中
text-align：right 表示文本排列到右边
text-align：inherit 表示文本继承父元素text-align属性值进行排列
text-align：justify表示文本排列水平对

![4.PNG](https://img.haomeiwen.com/i2772338/5848bbb2cadd04e2.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#  px、em、rem
- px（Pixel），代表像素。
- em为相对长度单位，所有未经调整的浏览器都符合: 1em=16px。em为相对父级元素的单位大小而产生变化。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em。
- rem也为相对长度单位，但只为相对根元素的单位大小产生变化。

# chrome 的审查元素功能


![5.PNG](https://img.haomeiwen.com/i2772338/3146e42416e117c0.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)