html/css面试题-（2）

一：页面导入时，使用link和@import有什么区别

1. 来源：link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS。

2. 顺序：link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的（所以容易导致样式闪烁，即开始页面没有样式，突然会闪烁一下，然后就有了样式，就我个人比较喜欢link引用的方式）

3. js控制的差别：当页面需要使用javascript控制dom改变样式的时候，只能使用link标签，因为import不是js操作dom可以控制的。也不支持js操作dom来控制。

二;如何优化图像，图像格式的区别

优化图像:

1 .不用图片，尽量用css3代替。
2.使用矢量图 SVG 代替 位图 。
3.使用恰当的图片格式。如：jpeg ，gif ， png 。
内容图片—适合jpeg
修饰图片—适合用无损压缩的PNG
GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。
WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别：

矢量图：图标字体，如 font-awesome；svg
位图：gif,jpg(jpeg),png
区别：
　　1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
　　2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
　　3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

三：Html5. Css3 新特性

html5:
用于绘画的 canvas 元素 以及SVG
用于媒介回放的 video 和 audio 元素
拖拽(Drag 和 drop) 地理定位(Geolocation)
对本地离线存储的更好的支持
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。)

新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
新的 form 属性：autocomplete 、novalidate
新的 input 属性：

autocomplete、autofocus、form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

语义元素：有利于搜索引擎优化和快速查找
css3：

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

四：前端性能方面的优化

1.减少http请求
2.图片优化
3.内联脚本放后
4预加载和懒加载

五、垂直上下居中的方法

1.绝对定位
2.flex布局
3.table-cell

六、可以通过哪些方法优化css3 animation渲染

优化技巧

减少动画元素

减少动画元素，是动画性能优化中首先需要完成的。通过审查页面动画 DOM 元素结构，去除不必要的动画元素，减少元素的数量，相应地会减少布页面局和绘制的时间。

尽量使用 fixed、absolute 定位

对于动画元素，尽量使用用 fixed、absolute 定位方式，避免影响到其他节点重排。

尽量只改变transform和opacity

能用 transform、opacity 优先使用，其属性的改变不会发生重排和重绘。如位移操作的，可以使用translate 来实现，渐隐渐现效果可以使用 opacity 属性来实现。

恰当开启硬件加速效果

对动画元素应用transform: translate3d(0, 0, 0)、will-change: transform 等来开启硬件加速。通常开启硬件加速可以让动画变得更加流畅。但这里需注意，在不需要的时候需去掉避免过多的内存消耗。
原文参考

七、如何实现同一个浏览器多个标签页之间的通信

本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式。这里主要讲解用本地存储方式解决。即调用 localStorage、Cookie等本地存储方式。
1调用localStorage
在一个标签页里面使用 localStorage.setItem(key,value) 添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。

标签页1：

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>

标签页2：

<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>

2、调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

页面1：

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
document.cookie="name="+name;
});
});
</script>

页面2：

<script type="text/javascript">
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>

八、浏览器的存储技术有哪些

cookie：放在http请求头中，伴随数据传输而传输，数据传输大小有限制，有过期时间
localstorage：存储在本地，不会伴随数据传输，生命周期为永久
sessionstorage：浏览器中，浏览器关闭则消失，即使在同源浏览器中也不能共享
userdata：ie中用于浏览器存储技术
globalstorage：ff中用于浏览器存储

九、尽可能多的写出浏览器兼容性问题

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

1。不同浏览器的标签默认的外补丁和内补丁不同
问题：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方法：CSS里 *
备注：几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

---

2。设置较小高度标签（一般小于10px），在IE6，IE7，中高度超出自己设置高度
问题：IE6、7里这个标签的高度不受控制，超出自己设置的高度
解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

---

3。图片默认有间距
问题：几个img标签放在一起的时候，有些浏览器会有默认的间距。
解决方法：1.使用float属性为img布局，2.给img标签添加左浮动float：left；3.给img标签添加display：block；
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以使用float是正道。

---

4。div嵌套p时，出现空白行
问题 div中显示

文本

，ff、oprea、Chrome： top和 bottom都会出现空白行，但是在 ie下不会出现空白行。
解决方法 设置p的margin:0px，再设置div的padding-top和padding-bottom

---

5。min-height在IE6下不兼容
问题；ie6不支持min-height，min-width，height。width就是最小值。
解决方法：

1）min-height：value；
      _height：value；

2）min-height：value；
     height：auto！important；
     height：value；

---

6。块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）
解决方法：给float标签添加display：inline，将其转换为行内元素