css基础
2016-08-02 本文已影响0人
Lily的夏天
1.样式有几种引入方式? link和 @import有什么区别？
答：样式有外部样式表、内部样式表和内联样式。
link和 @import的区别：
- 1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- 2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- 3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- 4.link支持使用Javascript控制DOM去改变样式；而@import不支持。
2.文件路径../main.css 、./main.css、main.css、/main.css有什么区别？
- ../main.css 当前目录的上一级目录找 main.css；
- ./main.css 当前目录找 main.css；
- main.css 当前目录找 main.css;
- /main.css 相对于根目录找 main.css
3.console.log是做什么用的？
- 主要是方便调式javascript用的，可以看到在页面中输出的内容。相比于alert()，console.log仅在控制台中打印相关信息，不会阻断JavaScript程序的执行。
- console.log能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
- 兼容没有控制台的浏览器。对于缺少调试控制台的老版本浏览器，window中的console对象并不存在，可以人为定义console对象，并声明该console对象的log函数为空函数；这样当console.log()语句执行时，这些老版本的浏览器将不会做任何事情。
- console.log()可以接受变量并将其与别的字符串进行拼接，console.log()还可以接受变量作为参数传递到字符串中，其具体语法与C语言中的printf语法一致。
4.text-align有几个值，分别有什么作用？写截图说明区别
答：text-align的值及作用：
| 值 | 作用 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
截图：
无标题.jpg
5.px、em、rem分别是什么？有什么区别？如何使用？
- px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- rem是CSS3新增的一个相对单位（root em，根em）。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。(参考文档)
区别：使用时px是像素值，用PX设置字体大小时，比较稳定和精确，em会继承父级元素的字体大小，会根据基准来缩放字体的大小，值并不是固定的。Rem是相对于根元素<html>，来缩放字体大小。
使用：除了IE6-IE8，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。考虑兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
6.对chrome 审查元素的功能做个简单的截图介绍
无标题.png
Elements：页面元素，可以进行编辑，保存后实时查看页面效果；
Console：此功能是模拟js控制台，直接写代码，查看结果；
Sources：查看加载本页面所调用的资源，如js，css，php等；
Network： 查看js模拟的http请求；
Timeline：查看页面性能，页面渲染速度的；
Profile：主要测试加载文件速度参考；
Resources：查看加载页面所用的资源，链接的数据库，域名下保存的cookie信息等；
styles：可以查看页面样式。
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的字体大小相等。
