html/css

1.水平、垂直居中的几种方法。

2.块级、行内元素的区别？

（1）占行，块级元素独占一行，行内元素跟其他的行内元素共用一行。

（2）width & height，块级可以设置width、height，行内元素则无效，宽高由内容决定，高度可通过line-height调节。

（3）margin、padding，行内元素只有margin或padding-left、-right有效，padding-left或right会改变元素范围，但不会对其他元素造成影响。

（4）行内元素无效属性，overflow和vertical-align。

（5）包含，块级元素可包含块级或者行内元素，行内元素包含文本或行内元素。　

3.清除浮动的几种方法，推荐第一种

1.给父级加一个通用的类以及一个伪类，room:1为了解决IE下浮动
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfix{zoom:1} 
2.父级的overflow:hidden/auto
3.父级设置display:table
4.加一个空的div，设置clear:both　　　　

4.css选择器优先级以及性能优化

css大小写不敏感。

优先级由高到低排序：

important > 行内style > id > 伪类、属性（eg:nth-child()、:nth-of-type()、[type=text]）> 类 > 标签 > 通用 > 浏览器自定义或继承

优化：

（1）避免使用通配符；

（2）不使用标签名修饰类名或id名称；

（3）减少使用后代选择器，意味着减少规则去匹配的时间，将选择器的深度降到最低；

（4）利用继承性。

效率由高到低排序：

1.基本选择器，id、class、标签、*通用选择器；
2.组合选择器，‘div p后代’、‘div>p子(直接子元素，不包括子的后代)’、‘div~p 同级(div之后的所有同级p)’、‘div+p相邻(div之后的第一个同级p)’；
3.属性选择器，‘[title](带有 title 属性的所有元素)’，input[type="text"]
4.伪类选择器，:hover  :active  :focus  :first-child :checked :enabled :nth-child(n) :nth-of-type(n)

详解:nth-child(n)与:nth-of-type(n)的区别

xx:nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 要同时满足两个条件：

1.第N个元素；

2.是xx标签。

xx:nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。 html结构如下：

<ul> 
    <div>pppppp</div> 
    <li>1111111</li> 
    <li>2222222</li> 
    <li>3333333</li> 
</ul>

　例子1

li:nth-child(2){
    background: red;
}  //"<li>1111111</li>"会变为红色
li:nth-of-type(2){
    background: red;
}  //"<li>222222</li>"会变为红色

　例子2

li:nth-child(1){
    background: red;
}  //无红色
li:nth-of-type(1){
    background: red;
}  //"<li>1111111</li>"会变为红色

　总结：:nth-of-type(n)更严谨。

5.viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

（1）像素与分辨率：分辨率指一定长度范围内有多少像素。长度固定时，分辨率越高越清晰。大屏幕手机分辨率低时，每个像素所占的物理单位变大，会导致实际显示的元素变大。

（2）viewport含义：指设备的屏幕上用来显示我们网页的区域。

（3）width取值：当width取值大于屏幕的分辨率时，会出现滚动条，默认为980；小于时，页面按照实际分辨率。只设置width，height等比例缩放。

用document.body.clientWidth/clientHeight、document.body.offsetWidth/offsetHeight可获取viewport设置的宽高。
用window.screen.width/height、window.screen.availWidth/availHeight可获取屏幕实际的分辨率。

（4）initial-scale、maximum-scale、minimum-scale、user-scalable分别表示初始、最大、最小、用户调整缩放，当user-scalable=no时，max-和min-无效。