html-2

2016-08-27 本文已影响0人 kingBirds

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

答：在html文件中，css样式一共有三种引入方式。

外部样式表，有两种方法：
a. 使用<b>link</b>引入（最常用，推荐使用）；b.使用@import引入。
举例说明：

link 方式：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
@import方式：
<head> <style type="text/css" media="screen"> @import url("mystyle.css"); </style> <head>

内部样式表，放入<b><style></b>标签内部；
举例说明：

<head> <style> h1 {color:red;} p {margin-top:20px;} body {background-image:url("images/123.gif");} </style> </head>

内嵌样式表，直接放入html元素标签内部；
举例说明：

<body> <p style="color:red; font-size:18px">good</p> </body>

link和@import的区别？
答：

从属不同：link是HTML标签，除了加载CSS外，还可以定义RSS，定义rel连接属性等其他事务；@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以某些网页在打开的时候只出现文字，没有排版和样式，而等@import加载以后才会重新渲染。
link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。@import只有在IE5以上的才能识别，而link标签无此问题。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
ink可以放在页面任何位置，一般情况下放在<head>..</head>标签中 ;但是@import必须放在<style>@import url(index2.css);</style>标签内。

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

答：

…/main.CSS是上级目录中的main.CSS文件
./main.CSS与main.CSS是当前目录中的main.CSS文件
/main.css:当前文件的根目录下的文件main.css

三，console.log是做什么用的 ?

答：用来分析和调试的一个JS函数，在浏览器的开发工具控制台中使用，改变参数值，调试页面。

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

text-align:center/文本水平居中对齐
text-align:right/文本右对齐
text-align:left/文本左对齐
text-align：justify/文本两端对齐
text-align：inherit/从父元素继承text-align属性
截图说明：

文本对齐属性

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

px为像素，相对长度单位，像素是固定大小的单元，一个像素等于电脑屏幕上的一个点。
em是相对大小单位，em是相对于父元素的属性而计算的.如2em，则是父级元素的2倍大小。
rem是相对大小单位，和根元素的尺寸大小一致，例如2rem，则是根元素尺寸的2倍大小。
参考详细资料

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

chrome审查元素

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

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

<h1>饥人谷</h1> <p>饥人谷</p> <style> html{ font-size: 62.5%; } p{ font-size: ?rem; } h1{ font-size: 60px; } </style>

答：设置为6rem。
计算方法：浏览器默认大小为16px，则html大小=16 x 62.5%=10px。h1=60px。rem 是相对于跟节点大小的倍数。即p=6 x 10px=60px。