1. html和xhtml有什么区别？
html是一种基本的web网页设计语言，xhtml是一个机遇xml的指标语言
最主要的不同：
xhtml的元素必须正确的被嵌套，圆度必须关闭，标签必须小写，必须有根元素
2. BOX-sizing属性？
这个属性是用来控制元素的盒子模型的解析的模式，默认的content-box
- content-box：W3C标准的盒子模型；
- border-box: IE传统的盒子模型，也叫怪异盒模型；
3. css3新增的伪类有哪些？
- p:first-of-type 选择属于其父元素的首个元素
- p:last-of-type 选择属于其父元素的最后元素
- p:only-of-type 选择属于其父元素唯一的元素
- p:only-child 选择属于其父元素的唯一子元素
- p:nth-child(2) 选择属于其父元素的第二个子元素
- :enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
4. display属性有哪些值，以及这些值的作用？
- inline： 默认的值，是内联的元素
- none： 隐藏
- block： 块显示
- table： 表格显示
- list-item： 项目列表
- inline-block： 行内块
5. 说明下css3的flexbox（弹性盒模型），以及使用的场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：因为pc端存在兼容的问题，所以一般应用于移动端的项目。
6. 怎么用css属性模拟一个三角形？
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;
7. display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
8. 什么是回流和重绘？以及产生的场景和优化的方式？
reflow: 当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流
repaint: 当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘
通过上述定义，可以很明显看出，重绘的代价要比回流小，毕竟重绘只涉及样式的改变，不涉及到布局。重绘就好像给人染了一个头发，而回流相当于给人做了一次抽脂手术
什么会引起回流？
- 页面渲染初始化
- DOM结构变化，比如删除了某个节点；骨头都被打断了，肯定比抽脂更严重，所以会引发回流
- render树变化，比如减少了padding；也就是进行抽脂手术
- 窗口resize事件触发
- 最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
- 这些属性包括
offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height width,height 调用了getComputedStyle(), 或者 IE的 currentStyle
var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));可以看出，回流一定伴随着重绘，而重绘却可以单独出现
减少回流
避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高
9. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
- 父级div定义 height
- 结尾处加空div标签 clear:both
- 父级div定义 伪类:after 和 zoom ，代码如下
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
- 父级div定义 overflow:hidden
10. 在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。