css基础

一.样式有几种引入方式? link 和 @import有什么区别

样式有三种引入方式
1.内部引入

注：写在head标签里

2.内联式

内容

注：写在具体的元素标签里

3.外部引入（link, import）

 @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有什么区别

../ 是指上一级目录 ./是当前目录

1. ../main.css 上一级目录
2. ./main.css 当前目录
3. main.css 当前目录
4. /main.css 根目录

三.console.log是做什么用的

console.log: 打印日志。主要用于调试信息。console.log能将json格式里的具体数据打印出来，非常便于调试

四.text-algin

title

text-align: left;    //左对齐
text-align: right;   //右对齐
text-align: center;  //居中对齐
text-align: justify; //两端对齐

title

再来看看justify属性。一般情况下，在全英文或者全中文的时候，使用justify是很好用的，但是突然我想写一段有中文英文等的文字之后，发现justify并没有起作用了，准确说是英文起作用，但是中文确没有起作用。这是为什么呢？因为justify这个属性起作用的原理就是把每个单词中的空格做伸缩，来达到对齐效果。此时，英文中检测到有空格，但是中文并没有空格，所以对中文不起作用了。要解决这个问题，可以借助js代码先在文本中添加空格，然后再删除空格来实现。"这里是文本的啊".split("").join(" ") 具体代码如下：
html:

Life is a horse, and either you ride it or it rides you.人生像一匹马，你不驾驭它,它便驾驭你。
 

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 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。

六.chrome审查元素

title