CSS像素

1. 样式有几种引入方式?link和@import有什么区别
   • 样式有几种引入方式
     • 外部引入样式表
       其中<link rel="stylesheet" href="#">标签就是用来引入外部的CSS文件
     • 内部的样式表
       在<style></style>两个标签中直接写入CSS代码
     • 内嵌在HTML代码中的样式
       例如，<p style="font-size: 12px;"><p>在HTML标签中的style属性中写入CSS代码。
   • link和@import有什么区别
     其中link是为HTML服务的，而@import是为CSS服务的，@import只能用在CSS环境中引入CSS文件，即在<style>@import url();</style>或者在CSS文件中加入。
2. 文件路径../main.css、./main.css、main.css有什么区别
   • ../main.css表示在上一级目录中的main.css文件
   • ./main.css表示在当前目录下的main.css文件
   • main.css也表示当前目录下的main.css文件
3. console.log是做什么用的
   console.log是控制台日志，作用是用来调试JS，可以把想要的信息呈现在控制台。相比aler()，console.log不会打断程序的运行，效率更高。
4. text-align有几个值，分别有什么作用
   text-align的值有:

left|right|center|jsutify

- `text-align`的值用来定义行内文字相对于父元素的对齐
- 应用于块级元素
- 是可以被继承的
- **并不能控制块元素对齐，就是不能用来给块元素居中定位**

其中left让内容相对于父元素左对齐，right让内容相对于父元素右对齐，center让内容相对于父元素居中，justify让内容相对于父元素两边对齐，中间文字的间隔平均拉大。

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

   • px
     px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。这边所指的像素是CSS像素，就是为了WEB编程所设计的像素概念。那为什么说CSS像素是相对的单位呢，因为例如一张width=300px的图，这张图是可以缩放的，但是它300像素的宽并不会改变，只不过当放大时一个CSS像素覆盖了多个设备像素或缩小时一个设备像素覆盖了多个CSS像素。
     CSS像素缩放
   • em
     相对单位，这个单位表示元素的font-size的计算值。如果用在font-size属性本身，它会继承父元素的font-size。意思是如果其他属性使用em这个单位，相对的是当前font-size的值，如果设置font-size属性，相对的是父元素font-size的值。
   • rem
     CSS3才出现相对单位，意思是root em，相对于的是根节点html的font-size大小。
     这些单位属于长度单位<length>，在使用过程中只要在<number>后加一个单位就可以了，例如px,em,rem

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

   
   Chrome审查元素123
   Chrome审查元素4
   Chrome审查元素5
   Chrome审查元素6
   

   图中的1区域主要用来HTML的调试HTML元素，2区域主要查看选定元素的CSS样式，3区域是控制台区域用来调试JS，4区域查看网站的原文件，可以做JS的断点调试，5区域查看所发出的网络请求，6区域查看cookies等。

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

        <h1>老虎爱吃母鸡</h1>
        <p>老虎爱吃母鸡</p>
        <style> 
            html { font-size: 62.5%; } 
            p { font-size: ?rem; }
            h1{ font-size: 60px; }
        </style>
   

当p为6rem时，h1和p的字体大小相等

task05