2016-10-13任务五 HTML2作业

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

1.浏览器缺省设置
2.外部样式表
linke rel="stylesheet" type="text/css" href="index.css">
rel属性定义当前文档与被链接文档之间的关系。stylesheet是属性对应的值，意为文档的外部样式表。
type="text/css"告诉浏览器，这段标签内包含css或text，如果浏览器不识别css，会将代码识别成text.
href和src区别
3.内部样式表

内部样式表写在html的内。只对所在网页有效。
4.内联样式

段落内容

位于html元素内部，只对当前元素有效。

---

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不支持。

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

• ../main.css表示上一级目录的main.css文件
• ./main.css和main.css表示文件在当前目录下
• /main.css 表示该文件在根目录

console.log是做什么用的

   调试代码，在控制台中更改变量。在具备调试功能的浏览器上，window对象中会注册一个名为console的成员变量，指代调试工具中的控制台。通过调用该console对象的log()函数，可以在控制台中打印信息。和alert（）不同，alert()函数会阻断js程序的执行，console.log()尽在控制台打印相关信息。

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

text-align：left 表示文本排列到左边
text-align：center 表示本文居中
text-align：right 表示文本排列到右边
text-align：inherit 表示文本继承父元素text-align属性值进行排列
text-align：justify表示文本排列水平对齐

Paste_Image.png

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

px：像素值（chrome里面最小12px，小于12px没有效果）。
em：相对父元素的倍数大小，若父元素未声明，则追溯到上一级父元素。
ps：（任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。）

rem：相对html根节点（默认16px）倍数大小，若根节点未声明，则使用默认值16px。

Paste_Image.png

该例子中，div子元素2em追溯到上一级2em也就是4倍根节点，40px。2rem，相对于根节点2倍大小，并且根节点声明为10px，所以2em表现为20px。
表述有点糙，下次代码会写的更规范些

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

chrome审查元素

1.元素（elements）点击元素，在工具窗口下边，能显示chrome的html，css和dom对象，同时还能编辑这些元素
2.网络请求（network）了解一个网站的数据交互规则，可以看页面向服务器请求了哪些资源。以前通过network，下过视频
3资源（resources）可以调试js文件
4时间轴（timeline）他网页和程序作了一个具体性能分析，从加载资源到解析js脚本，都可以看到所损耗的时间。
5，解析（profiles)显示网页和网络利用程序的执行时间和内存使用情形。
6资源（resources)能对本地缓存中的数据进行确认和编辑
7css样式表
8事件监听器，9dom断点
10好像还是css样式表的一部分，显示的是盒子模型，相关知识可能下节课会学到

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

font-size: 62.5%,意思是默认16px的62.5%，计算下得知是10px，可推算rem=10px。所以设置p为6rem

代码

代码jsbin