前端基础（问答2）

---

keywords：引入样式、资源路径、console.log、文本对齐、单位、chrome审查元素。

---

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

样式引入大致分为内部样式和外部样式：
1、行内式：在html的元素标记中使用style属性。
<p style='color:red'>这是行内式<p>
2、嵌入式：在head元素中使用<style>标记，包含一个样式。
<style type="text/css">
p{
color:red
}
</style>
3、链接式：使用<link>元素，为HTML指定一个外部样式表。
<link ref='stylesheet' type='text/css' href='main.css'>
4、导入式：
<style type='text/css'>
@import （main.css）
</style>

5、浏览器的默认样式。
关于link和@import的区别，在网上查了下资料，发现很多人对link和@import的认识可能并不正确。stackoverflow上有人问了同样问题Differnce between link and @import 。总的来说，与@import相比，link具有明显的性能（加载速度）优势。
主要观点如下：
1、@import会增加一次roundtrip，延长页面加载时间；
2、使用@import，在IE中可能引起页面加载顺序改变（比如JS在css之前加载，可能出现一些问题），导致样式表需要更长时间加载，让人感觉页面渲染很慢。(yahoo!也提到在@import在IE中的表现如同在页面底部使用link)

我想以现在的网络速度和浏览器而言，@import和link的差别实在可以忽略吧。
参考：don't use @import
ps：程序问题尽量使用英语关键字google。

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

main.css和./main.css表示本目录下的样式表，../main.css表示上一级目录下的样式表。

• console.log是做什么用的。

目前对console.log还不了解，只有整体印象：在控制台展示信息，调试js，可以省不少麻烦。
收藏一篇博文：小谈chrome调试命令:console.log的使用

• text-align有几个值，分别有什么作用。

Text-align 是字体样式的属性，用来设置文本的对齐方式，它有4个值，分别为：
left 左对齐、right 右对齐、center 居中、justify 两端对齐。
这里要强调text-align这个属性：

text-align:justify(不处理最后一行文本，单行文本既是第一行也是最后一行)```
本以为两端对齐没有特别之处，却发现单行文本两端对齐没有想象中的简单，仅仅用`text-align:justify`无法实现。

![单行文本两端对齐.PNG](https://img.haomeiwen.com/i2215361/630432b7960738fe.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

参考资料：
[Text-align:Justify和RWD](http://www.w3cplus.com/css/text-align-justify-and-rwd.html)
[CSS3 justify:](http://demo.doyoe.com/css3/justify/)
[What is the difference between display: inline and display: inline-block?](http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block)
[css实现两端对齐的3种方法（必看）](http://www.cnblogs.com/PeunZhang/p/3289493.html)
- #### px、em、rem分别是什么？有什么区别？如何使用？
使用px为单位可以按像素指定字体大小，如果设置一个字体的高度为14px，这说明字母的最低部分和最高部分之间有14像素。任何浏览器的默认字体大小都是16px。
em类似百分数，是一个相对度量单位。使用em时，要指定一个比例因子。可以这样使用：
        font-size :1.2em
假设你使用em来指定< h2>标题的大小。＜h2＞标题的大小将是父元素字体大小的1.2倍。
rem仍然是相对度量单位，但与em不同的是，rem是相对html根元素的大小。
例如以下代码：
       <h1>饥人谷</h1> 
       <p>饥人谷</p> 
       <style>
        html{ 
        font-size: 62.5%;
         } 
        p { 
        font-size: ?rem; 
         } 
        h1{
         font-size: 60px; 
         } 
        </style>
默认字体16px，html元素设为16px*62.5%=10px,所以?=6。
- #### chrome和firefox审查元素的使用。
chrome和firefox的开发者工具非常相似，因为最近firefox比较顺手，就记录下firefox的dev tools的简单用法。

![firefox捕获.PNG](https://img.haomeiwen.com/i2215361/64a3c7eac8b80c51.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
ps : firefox同样可以模拟移动设备，选项---开发者----响应式设计视图。