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](http://upload-images.jianshu.io/upload_images/2215361-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](http://upload-images.jianshu.io/upload_images/2215361-64a3c7eac8b80c51.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
ps : firefox同样可以模拟移动设备,选项---开发者----响应式设计视图。