1.样式有几种引入方式? link
和 @import
有什么区别?
①css的引入一般有3种,分别为:
(1)外部资源引入
<link rel="stylesheet" type="text/css" href="xxx.css">
(2)内部style标签
<style type="text/css">
div
{
color: red; font-size:12px;
}
</style>
(3)内联style属性
<div style="color:red; font-size:12px;">123</div>
②
差别1:link
属于XHTML标签,而@import
完全是CSS提供的一种方式。
link
标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import
就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link
引用的CSS会同时被加载,而@import
引用的CSS会等到页面全部被下载完再被加载。
差别3:兼容性的差别。由于@import
是CSS2.1提出的所以老的浏览器不支持,@import
只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link
标签,因为@import
不是dom可以控制的。
2.文件路径../main.css 、./main.css、main.css、/main.css有什么区别?
- ../main.css表示上一级目录下的css文件;
- ./main.css和main.css表示当前目录下的css文件;
- /main.css表示磁盘根目录
3.console.log是做什么用的?
console 控制台
log 日志
意思是在控制台输出日志信息,控制台也叫开发者工具,是浏览器的一部分,便于开发者调试用的。
4.text-align有几个值,分别有什么作用?为什么text-align:justify没有效果?写截图说明区别。
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
①text-align的5个值:
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
如图所示,两段颜色为深绿色darkgreen的段落同属于class:"justify",都在css样式里对text-align设置了"justify"即段落两端对齐的属性,但第一个没有占满一行内容的深绿色段落是直接显示左对齐的样式,并没有显示"justify"的效果,因为它没有占满一行内容,只有左边对齐,右边无法和任何内容对齐,但是第二段深绿色的片段占了3行内容,可以看到应用了"justify"参数后它的左右两端都是对齐的。
5.px、em、rem分别是什么?有什么区别?如何使用?
IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;Firefox能够调整px和em,rem
-
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
-
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定的;em会继承父级元素的字体大小。所以我们在写CSS的时候,需要注意两点:
①body选择器中声明Font-size=62.5%;
②将你的原来的px数值除以10,然后换上em作为单位。
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 -
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小
-
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
6.对chrome 审查元素的功能做个简单的截图介绍。
chrome调试代码
网友评论