1. CSS的全称是什么?
CSS（CasCading Style Sheet）全称层叠样式表。
2. CSS有几种引入方式? link 和@import 有什么区别?
- 内联样式
<p style="border: 1px solid red; text-align: center;">
- 内部样式表
<style>
body {
margin: 0;
}
</style>
- 外部样式表
<link rel="stylesheet" type="text/css" href="index.css">
// 其中type="text/css"可省略
- 导入样式
@import url(bluish.css); //可写在内部样式表中，也可写在外部样式表中
link和@import的区别：
1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
3. 以下这几种文件路径分别用在什么地方，代表什么意思?
css/a.css
相对定位，代表当前目录下的css目录下的a.css文件
./css/a.css
相对定位，等价于css/a.css
b.css
相对定位，代表当前目录下的b.css文件
../imgs/a.png
相对定位， 代表当前目录的上一级目录下的imgs目录下的a.png文件
/Users/hunger/project/css/a.css
绝对定位，代表本地文件夹下a.css文件地址
/static/css/a.css
网站路径，当前服务器根目录下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png
网络路径，通过HTTP协议获得8-1.png图片资源
4. 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
①把本地图片上传至某网站，生成一个线上地址，然后在js.jirengu.com中加载
②在本地打开服务器，通过localhost加载这个图片。再将图片放在js.jirengu.com(自己测试时可这样使用）
5. 列出5条以上html和 css 的书写规范
html:
参考http://codeguide.bootcss.com/
- 布尔型属性可以在声明时不赋值。
<input type="text" disabled> - 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
- 不要省略可选的结束标签
- HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
css:
参考https://github.com/fex-team/styleguide/blob/master/css.md
- 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
- >、+、~ 选择器的两边各保留一个空格。
- 属性选择器中的值必须用双引号包围。
- [建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
- url() 函数中的路径不加引号。
background: url(bg.png); - url() 函数中的绝对路径可省去协议名。
background: url(//baidu.com/img/bg.png) no-repeat 0 0; - RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()
- 属性书写顺序
- Formatting Model （布局方式、位置）相关属性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model （尺寸）相关属性包括：border / margin / padding / width / height 等
- Typographic （文本相关 ）相关属性包括：font / line-height / text-align / word-wrap 等
- Visual （视觉效果）相关属性包括：background / color / transition / list-style 等
6. 截图介绍 chrome 开发者工具的功能区
chorme开发者工具面板一共包括：Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits几个板块（如下图所示）
- Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
- Sources:断点调试JS。
- Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
- Performance:性能监控
- Memory:内存调试工具
-
Application:记录网站加载的所有资源信息，包括存储数据（Local -
Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。 - Security:判断当前网页是否安全。
- Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
