css基础

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

答：样式有外部样式表、内部样式表和内联样式。
link和 @import的区别：

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

2.文件路径../main.css 、./main.css、main.css、/main.css有什么区别？

../main.css 当前目录的上一级目录找 main.css；
./main.css 当前目录找 main.css；
main.css 当前目录找 main.css;
/main.css 相对于根目录找 main.css

3.console.log是做什么用的？

主要是方便调式javascript用的，可以看到在页面中输出的内容。相比于alert()，console.log仅在控制台中打印相关信息，不会阻断JavaScript程序的执行。
console.log能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
兼容没有控制台的浏览器。对于缺少调试控制台的老版本浏览器，window中的console对象并不存在，可以人为定义console对象，并声明该console对象的log函数为空函数；这样当console.log()语句执行时，这些老版本的浏览器将不会做任何事情。
console.log()可以接受变量并将其与别的字符串进行拼接，console.log()还可以接受变量作为参数传递到字符串中，其具体语法与C语言中的printf语法一致。

4.text-align有几个值，分别有什么作用？写截图说明区别

答：text-align的值及作用：

值	作用
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

截图：

无标题.jpg

5.px、em、rem分别是什么？有什么区别？如何使用？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位（root em，根em）。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。(参考文档)
区别：使用时px是像素值，用PX设置字体大小时，比较稳定和精确，em会继承父级元素的字体大小，会根据基准来缩放字体的大小，值并不是固定的。Rem是相对于根元素，来缩放字体大小。
使用：除了IE6-IE8，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。考虑兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。

6.对chrome 审查元素的功能做个简单的截图介绍

无标题.png

Elements：页面元素，可以进行编辑，保存后实时查看页面效果；
Console：此功能是模拟js控制台，直接写代码，查看结果；
Sources：查看加载本页面所调用的资源，如js，css，php等；
Network：查看js模拟的http请求；
Timeline：查看页面性能，页面渲染速度的；
Profile：主要测试加载文件速度参考；
Resources：查看加载页面所用的资源，链接的数据库，域名下保存的cookie信息等；
styles：可以查看页面样式。

7.如下代码，设置 p为几 rem，让h1和p的字体大小相等？

饥人谷
饥人谷

设置P为6rem,可以让h1、p的字体大小相等。