HTML2

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

• 样式有四种引入方式，分别为：
• 外部样式表

• @import url("xxx")
  使用@import要记住始终要把@import放在样式代码的最前面，否则可能不会起作用。@import可以和link嵌套使用，比如说有两个样式：index.css和index2.css，index.css通过link插入到页面中，然后index.css中通过@import规则来引入index2.css；@import也可以和link并行使用。下面举个并行使用的例子：

• 内部样式表（位于标签内部）

• 内联样式（在html元素内部）

段落

四种引入方式

当然这些引入方式各有各的特点，各有各的优势和使用的场景。比如说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。

效果

八.代码

1. 设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333。
2. 设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
   Github的源代码链接git
   
   

   代码
   
   
   

   效果