一.样式有几种引入方式? link和 @import有什么区别?
- 样式有四种引入方式，分别为：
- 外部样式表
<link rel="stylesheet" type="text/css" href="./index.css" >
- @import url("xxx")
使用@import要记住始终要把@import放在样式代码的最前面，否则可能不会起作用。@import可以和link嵌套使用，比如说有两个样式：index.css和index2.css，index.css通过link插入到页面中，然后index.css中通过@import规则来引入index2.css；@import也可以和link并行使用。下面举个并行使用的例子：
<link rel="stylesheet" type="text/css" href="./index.css" >
<style>
@import url("css/index2.css");
</style>
- 内部样式表（位于标签内部）
<style>
p<
color: white;
font-size: 20px;
>
</style>
- 内联样式（在html元素内部）
<p style="border: 1px solid #fff; border-radius:4px; "
>
段落
</p>
四种引入方式
当然这些引入方式各有各的特点，各有各的优势和使用的场景。比如说link比较适用于大量共有的样式，这样就能提高代码的复用性，而在style里面引入就能减少网络的请求。所以可以根据情况选用恰当的引入方式。
- link和@import的区别主要有：
- 从根本上来说link属于html标签，而@import则属于css提供的一种方式，IE5不支持。link除了调用css外还可以声明页面链接属性和目录等等，而@import
就只能调用css。 - link和@import的机制也是不同的。link是在加载页面前把css加载完毕，而@import则是读取完文件后再加载。
- 如果使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
一般来说不建议使用@import。
二.文件路径../main.css 、./main.css、main.css有什么区别？
“..”表示的是上层目录，而“.”表示的是当前目录。所以“../main.css”表示的是当前文件所在的上层目录的main.css样式文件，而“./main.css”和“main.css”当前目录的main.css文件。
三.console.log是做什么用的？
console.log一般用于代码调试的时候，可以把信息（数字和字符串都可以）展示在控制台，便于调试。相比于alert会方便很多，因为alert每次调试都会弹出来，而且无法显示字符串，不便于调试。
四.text-align有几个值，分别有什么作用?
| 值 | 作用 |
|---|---|
| left | 把文本排到左边 |
| right | 把文本排到右边 |
| center | 把文本排到中间 |
| justify | 两端对齐 |
| inherit | 规定应该从父元素继承text-align属性的值 |
代码
实现效果
五.px、em、rem分别是什么？有什么区别？如何使用?
px表示绝对大小，而em和rem表示相对单位。
px：像素值（chrome里面最小12px，小于12px没有效果）。
em：相对父元素的倍数大小，若父元素未声明，则追溯到上一级父元素。
rem：相对html根节点（默认16px）倍数大小，若根节点未声明，则使用默认值16px。
code
size
六.对chrome 审查元素的功能做个简单的截图介绍。
审查元素基本功能介绍
审查元素简单介绍
Sources一般用于断点调试，在开发遇到问题时比较常用，所以做个详细介绍。
审查元素-Sources
七.如下代码，设置 p为几 rem，让h1和p的字体大小相等?
问题
html默认的font-size为16px，16*0.625=10px，所以html根节点的大小为10px。而rem就是相对于根结点的大小，如果要使h1和p的大小相等，p应该为6rem。
效果
八.代码
- 设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333。
- 设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
Github的源代码链接git
代码
效果
网友评论