常见问题

2018-07-27 本文已影响0人小淘气_嘻

浏览器与内核

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查看

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

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

返回`CSS1Compat`

HTML5： <!DOCTYPE html>
HTML4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 含DTD所有的HMTL元素和属性，不包括展示性和弃用的元素，不允许框架集 Framesets
HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">包含展示性和启用的元素，不允许框架集Framesets

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

IE兼容

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

端口被占用

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