常见问题

浏览器与内核

• IE（Trident）
• Chrome（WebKit + Blink）
• Firefox（Gecko）
• Safari（Webkit）
• Opera（Presto + Webkit + Blink）
• 360、猎豹浏览器（IE + Chrome双内核）
• 搜狗，遨游，QQ浏览器 ： Trident（兼容模式） + Webkit（高速模式）
• 百度浏览器，世界之窗：IE内核
• 2345浏览器内核：以前IE ，现在IE+Chrome双内核

行内元素、块级元素区别，行内块元素的兼容性使用

• 行内元素
  • 会在水平方向排列
  • 不包括块元素
  • 设置width/ height/margin上下/padding上下无效
  • 设置line-height有效
• 块级元素
  • 占据一行，垂直方向排列
  • 新行开始
  • 断行结束
• 行内块元素兼容性
  • 对象呈现为内联元素，与其他的同处一行
  • 内部呈现块元素，可设置宽高
  • display:inline-block; zoom:1; *display:inline;

清除浮动

浮动溢出：非IE浏览器下，当容器高度为auto，且容器的内容中有浮动元素，这种情况下，容器的高度不能自动伸长以适应内容的高度，导致内容溢出到容器外面而影响布局。

• 父级div定义伪类：:after和zoom

/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

• 浮动元素后定空div，设定clear:both
• 浮动元素的父级div加overflow:hidden或overflow:auto;
• 浮动元素的父级div定义height，只针对高度固定的布局使用
• 父级也设浮动 、父div定义display:table、 结尾加br标签设定clear:both 不推荐

box-sizing常用的属性

• 允许以特定的方式匹配某个区域的特定元素
• box-sizing : content-box | border-box | inherit
• content-box 盒子模型W3C；width不包含padding和margin
• border-box 盒子模型IE；width包含padidng和margin

W3C盒子

IE盒子

Doctype与浏览器渲染模式

DOCTYPE 文档类型声明 Document Type Declaration 又为DTD

浏览器模式， 通过document.compatMode查看

• 标准模式
• 怪异模式
• 部分怪异模式

加，浏览器document.compatMode返回 CSS1Compat：标准兼容模式已开启，兼容CSS1规范（IE6）
未加，IE和Chrome浏览器会输出BackCompat 标准兼容模式未开启，向后兼容（IE5.5）

返回`CSS1Compat`

HTML5：
HTML4.01 Strict： 含DTD所有的HMTL元素和属性，不包括展示性和弃用的元素，不允许框架集 Framesets
HTML 4.01 Transitional:包含展示性和启用的元素，不允许框架集Framesets

浏览器的工作模式——“渲染模式”，工作模式差异体现在处理Html、XML及Web内容

IE兼容

heigiht:100px; heigiht:100px\9;

端口被占用

1. cmd打开命令行编辑器
2. netstat -ano 查看所有端口占用情况
3. netstat -ano|findstr "8000" 查看指定端口占用情况，获得端口对应PID
4. tasklist|findstr "3步骤查看得到的端口对应的PID" 查看PID对应的进程，得到映象名称
5. taskkill /f /t /im node.exe 结束该进程，解除端口占用