html-2

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

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

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

link 方式：

@import方式：

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

  good

  link和@import的区别？
  答：

  1. 从属不同：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可以放在页面任何位置，一般情况下放在..标签中 ;但是@import必须放在标签内。

  二，文件路径…/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的字体大小相等?

  饥人谷

  饥人谷

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