浏览器与内核
- 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结束该进程，解除端口占用
