html/css(1)

1.居中

1.容器水平居中 margin：0 auto;
2.元素水平居中 text-align：center；
3.元素水平垂直居中
 1）使用定位和需要定位的元素的margin减去宽高的一半
父盒子设置：position：relative
Div设置： width: 150px;height: 150px;position： absolute；top： 50%；left： 50%；  margin-top: -75px; margin-left: -75px;     
 2）使用CSS3的transform：不需要元素宽高，有css3兼容性
父盒子设置：position：relative
Div设置： position： absolute；top： 50%；left： 50%；transform： translate(-50%，-50%)；                         

2.解决HTML5/css3兼容性

 <!--[if IE]>
 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
 < ![endif]-->

CSS3中-moz、-ms、-webkit和-o分别代表什么意思    
1、-webkit-：代表safari、chrome浏览器私有属性  
2、-moz-：代表FireFox浏览器私有属性    
3、-o-：代表opera浏览器私有属性
4、-ms-：代表IE浏览器私有属性
-webkit-transition:width 2s; /* Safari and Chrome */
-moz-transition:width 2s; /* Firefox 4 */
-o-transition:width 2s; /* Opera */
-ms-transition:width 2s; /*ie */

3、position几个属性的作用？

position的常见四个属性值：relative， absolute， fixed， static。
一般都要配合"left"、 "top"、 "right" 以及 "bottom"属性使用。
1）Static：默认值，处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明） 。
2）Relative：相对定位，可将其移至相对于其正常位置的地方，它偏移的top，right，bottom，left的值
都以它原的位置为基准偏移。注意relative移动后的元素在原来的位置仍占据空间。
3）Absolute：绝对定位，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了
position属性，并且position的属性值为absolute 或者relative，那么就会依据父容器进行偏移。如果其父
容器没有设置position属性，那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占
位置。
4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，
元素都会留在那个位置。它始终是以body为依据的。 注意设置fixed属性的元素在标准流中不占位置

4、px，em，rem的区别？

1）px像素（Pixel），绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是
计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设
置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3）rem是CSS3新增的一个相对长度单位，使用rem为元素设定字体大小时，相对的是HTML根元素。
4）区别：IE无法调整那些使用px作为单位的字体大小，em和rem可以缩放，rem相对的只是HTML根
 元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地
调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

5、有一个导航栏在chrome里面样式完好？在IE里文字都聚到一起了，是哪个兼容性问题？

用了display：flex属性，在ie10以下都是无效的。

6、标签上title与alt属性的区别是什么?

Alt 当图片不显示时，用文字代表。 Title 为该属性提供信息。

7、描述cssreset的作用和用途？

Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

8、解释csssprites，如何使用？

Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。
一定注意请求数据的坐标xy记得是负值

9、清除浮动的几种方式？

1. 父级div定义 height 
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。简单、代码少、容易掌
握，但只适合高度固定的布局. 
2. 结尾处加空div标签 clear：both 
原理：在浮动元素的后面添加一个空div兄弟元素，利用css提高的clear：both清除浮动，让父级div能自
动获取到高度，如果页面浮动布局多，就要增加很多空div，让人感觉很不好.
3. 父级div定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用. 
4. 父级div定义伪类：after 和 zoom /*清除浮动代码*/ 
.clearfix:after{ 
content：""；
display：block；
visibility：hidden； 
height：0； 
line-height：0； 
clear：both； 
} 
.clearfix{zoom：1}
原理：IE8以上和非 IE 浏览器才支持：after，原理和方法2有点类似，zoom(IE 专有属性)可解决 ie6，
ie7浮动问题， 推荐使用，建议定义公共类，以减少 CSS代码。 
5.双伪元素法：
.clearfix：before，.clearfix：after { 
content： ""； 
display： block；
clear： both； 
} 
.clearfix { zoom： 1；}