1.src与href的区别:
href表示超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系，src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。
<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。
<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="common.css" rel="stylesheet" />
</head>
<body>
<script src="js.js"></script>
</body>
</html>2.link 与@import区别:
两者都是外部引用CSS的方式，但是存在一定的区别：
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题,@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；而@import不支持。
3.display和visibility及opacity的区别:
一、空间占据
display: none; 是彻底消失，不在文档流中占位，浏览器也不会解析该元素
visibility:hidden; 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
opacity: 0；在空间占据上和visibility一致
二、子元素继承
display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 1使其重新显示
三、事件绑定
display:none 的元素都已经不在页面存在了，因此无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件无法触发；
opacity: 0元素上面绑定的事件是可以触发的
四、过渡动画
transition对于display 肯定是无效的；
transition对于visibility 是无效的；
transition对于opacity 是有效。
<style>
div {
width: 100px;
height: 100px;
background-color: blueviolet;
transition: opacity .5s linear;
}
div:hover {
opacity: 0.2;
}
</style>五、计时器计数
visibility: hidden不会影响计数器的计数
4.BFC
BFC是什么：(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
通俗一点的方式解释:BFC 可以简单的理解为某个元素的一个 css 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。
BFC作用：
1.自适应两栏布局
2.可以阻止元素被浮动元素覆盖
3.可以包含浮动元素——清除内部浮动
4.分属于不同的BFC时可以阻止margin重叠
5.CSS Sprites
CSS Sprites原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites优点/缺点
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点
在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂；
CSS Sprites在开发的时候比较麻烦，通过photoshop或其他工具测量计算每一个背景单元的精确位置，难度不大，但是很繁琐；
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片.如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
6.优雅降级和渐进增强
渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
7.transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的变化。
8.请列举几种隐藏元素的方法
visibility:hidden;
这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在
opacity: 0;
CSS3属性,设置0可以使一个元素完全透明， 但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件， 那么点击该区域，也能触发点击事件的
position: absolute;
设置-一个很大的 left负值定位，使元素定位在可见区域之外
display: none;
元素会变得不可见，并且不会再占用元素位置。会改变页面布局。
transform: scale(0);
将-个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。
2121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
