[上海|结业弟子]JS-赵朋|2020年08月16日的日报-技能树.IT修真院

发表于： 2020-08-16 21:03:22

1 2394

今日完成:

复盘没回答上来的问题

有几种盒模型

CSS的两种盒模型

盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，

都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式

box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

也就是盒子宽高 = 内容区域的宽高+padding+border;

那么，在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

目前使用此属性需要添加前缀：

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

参考链接:

https://www.cnblogs.com/Kyaya/p/6003879.html

前端开发要注意的浏览器兼容性问题整理

1、html部分

a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上

解决办法是：htmlshim框架可以让低于IE9的浏览器支持html5

b、img的alt属性，在图片不存在的情况下，各浏览器的解析不一致

在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字

c、ul标签内外边距问题

ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

2、css部分：

a、css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

IE的条件注释hack：

b、IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍

解决办法：display:block;

c、IE6下图片的下方有空隙

解决方法：给img设置display:block;

d、IE6下两个float之间会有个3px的bug

解决办法：给右边的元素也设置float:left;

e、IE6下没有min-width的概念，其默认的width就是min-width

f、IE6下在使用margin:0 auto;无法使其居中

解决办法：为其父容器设置text-align:center;

g、被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式

h、在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0，子高父低，所以不会改变显示的顺序

i、IE6下无法设置1px的行高，原因是由其默认行高引起的

解决办法：为期设置overflow:hidden;或者line-height:1px;

3、js部分

a、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

b、事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准

c、我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

d、在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。

比如：var year= new Date().getYear();

e、ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

f、IE中不能操作tr的innerHtml

g、获得DOM节点的父节点、子节点的方式不同

其他浏览器：parentNode parentNode.childNodes

IE：parentElement parentElement.children

参考链接:
https://zhuanlan.zhihu.com/p/25780938

JS中BOM和DOM的区别与联系

Js组成

我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]

2. BOM 是各个浏览器厂商根据 DOM

在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

3. window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中 DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。