一.样式有几种引入方式? link 和 @import有什么区别
样式有三种引入方式
1.内部引入
<style>
p{
background-color: yellow;
}
</style>
注：写在head标签里
2.内联式
<p style="border: 3px solid #fff; border-radius: 3px;">内容</p>
注：写在具体的元素标签里
3.外部引入（link, import）
<link rel="stylesheet" href="index.css">
@import url(./index.css);
注：写在head标签里
link与import区别
1.link会在页面显示之前全部加载完，import是在文件读取完之后才加载。在网络环境差的情况下，import的使用可能会出现瞬间没有样式，而后再会刷出有样式的页面。
2.@import可能低版本的浏览器会有不支持的情况。
3.使用dom控制样式时的差别。当使用js控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4.大部分都通用的地方，用link来做比较适合，import用到具体的元素样式里，更为灵活
二.文件路径../main.css 、./main.css、main.css、/main.css有什么区别
../ 是指上一级目录 ./是当前目录
- ../main.css 上一级目录
- ./main.css 当前目录
- main.css 当前目录
- /main.css 根目录
三.console.log是做什么用的
console.log: 打印日志。主要用于调试信息。console.log能将json格式里的具体数据打印出来，非常便于调试
四.text-algin
text-align: left; //左对齐
text-align: right; //右对齐
text-align: center; //居中对齐
text-align: justify; //两端对齐
再来看看justify属性。一般情况下，在全英文或者全中文的时候，使用justify是很好用的，但是突然我想写一段有中文英文等的文字之后，发现justify并没有起作用了，准确说是英文起作用，但是中文确没有起作用。这是为什么呢？因为justify这个属性起作用的原理就是把每个单词中的空格做伸缩，来达到对齐效果。此时，英文中检测到有空格，但是中文并没有空格，所以对中文不起作用了。要解决这个问题，可以借助js代码先在文本中添加空格，然后再删除空格来实现。"这里是文本的啊".split("").join(" ") 具体代码如下：
html:
<p id="txt">Life is a horse, and either you ride it or it rides you.人生像一匹马，你不驾驭它,它便驾驭你。</p>
js:
var txt = document.getElementById("txt");
txt.style.textAlgin = "justify";
txt.style.letterSpacing = "-.15em"; //根据不同字体可设置不同的值
txt.innerHTML = txt.innerHTML.split("").join(" ");
五.px,em,rem
px:具体的像素数值单位，不受任何影响。
em:相对单位，相对于父元素一倍的大小。如果父元素还有嵌套，则根据父元素所受到的大小变化。
rem:相对于html的根元素一倍的大小。只受html根元素的影响。
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。
