css样式

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

1.外部样式
在head部分加入<link rel="stylesheet" type="text/css" href="my.css"/>,引入外部的css文件，样式与结构分离，易改版维护
2.内部样式
在head部分加入
<style type="text/css"> div{margin: 0;padding: 0;border:1px red solid;} </style>
从而在html中直接添加css样式
3.内联样式
直接在页面的标签里加<div style="border:1px red solid;">内联样式</div>，通用性差，用在效果特殊的地方
4.@import方法
<style type="text/css"> @import url(my.css); </style>
link 和 @import区别：
1.link属于XHTML标签，@import是CSS提供的一种方式。link标签除了可以加载CSS外，还可以定义RSS，定义hrel连接属性等，@import只能加载CSS
2.加载顺序上，当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS 会等到页面全部被下载完再被加载
3.兼容性方面,@import是CSS2.1提出,老的浏览器不支持，只有在IE5以上的才能识别
4.link支持使用Javascript控制DOM去改变样式；@import不支持

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

../main.css表示上一级目录下的main.css文件
./main.css、main.css表示当前目录下的css文件

三.console.log是做什么用的

用于调试JS代码，看到在页面中输出的内容，alert弹出一个对象是(object object),console能看到对象的内容，并且console不会像alert一样打断页面的操作

四.text-align有几个值，分别有什么作用

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

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

1.px:相对长度单位，相对于显示器屏幕分辨率而言的
2.em：相对测量单位，相对于当前对象内文本的字体尺寸。em会继承父级元素的字体大小
3.rem：css3新增相对长度单位，相对HTML中的根元素。通过只修改根元素就成比例地调整所有字体大小

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

审查.png

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

6rem.png
浏览器默认字体大小16px，则html中font-size为16*62.5%=10px，p应该设置为60px/10px，即6rem