html/css
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-无效。
