标准模型

盒子模型有两种模式分别为标准盒模型与怪异盒模型 .标准盒模型 标准的盒模型的组成 content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）+content：元素的宽和高 border : 盒子的边缘 下面我们看一下标准盒模型的具体表现形式 给盒添加了padding（填充区）+border（边框区）+margin（外边界区）以后，我们会发现盒子被撑大了，也发生了位置偏移，这就是标准盒模型的表现形式。 .怪异盒模型 怪异盒模型的组成 元素的宽度：width（content+border+padding）+margin 属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型） 我们发现同样大小的盒子，标准盒模型添加了border(边框) padding（内边距）以后内容区域被撑大了，怪异盒模型内容区减小了。 怪异盒模型的属性 box-sizing: border-box（怪异盒模型）/content-box（标准盒模型） 我们可以通过怪异盒模型属性将标准盒模型变为怪异盒模型，也可以把怪异盒模型变为标准盒模型。 CD 逆战班：李伟 来源： CSDN 作者： live丶 链接： https://blog.csdn.net/lIvecdsc/article/details/104598771

JavaScript由三部分组成： 　　　　ECMAscript（JavaScript的核心标准，也是一个解析器）； 　　　　　　　　目前常用的是两种： 　　　　　　　　ES5，即2009年12月发布的JavaScript的核心标准； 　　　　　　　　ES6，即2015年6月17日发布发布的JavaScript的核心标准； 　　　　DOM（document object model 缩写，文档对象模型）； 　　　　　　　　简单来说：就是通过document提供的一些接口（api），赋予开发者操作页面的能力。 　　　　　　　　比如获取某个ID为div的元素，document.getElementById('div')这个就是一个简单的DOM操作。 　　　　BOM（browser object model 缩写，浏览器对象模型）； 　　　　　　　　由于BOM没有相关标准，每个浏览器都有其自己对BOM的实现方式，不同的浏览器DOM标准可能不一样。 来源： https://www.cnblogs.com/yc-web/p/6881737.html

标准盒模型与怪异盒模型 -form表单iput对齐问题引发探讨及解决方案 form表单中的input对齐问题： 用form表单input元素组合搜索框的时候，我们会发现两个同样设置30px高度input元素高度有相差，而无法上下对齐。 同样是相同高度的input元素怎么会出现高度不一致的结果呢？ 究其原因是因为两个input的盒模型不同表现形式导致的，一个标准盒模，另一个是怪异盒模型。 首先来来了解两个盒模型的区别： 1.标准盒模型组成：{ content }+ padding + border + margin 2.怪异盒模型组成：{ content + padding + border } + margin 其差别在于，虽然两个盒模型都是相同的结构组成，但是其表现形式是不一样的，标准盒模型设置的height/width只作用在content区域，而怪异盒模型的height/width则作用在border及其以内区域。 综上所述： 第一个input输入框（type=”text”遵循标准盒模型规则）的height:30px；只作用内容区域，1px的padding和2px的border会额外增加在content以外区域，所以网页上表现出来的是36px的高，而不是定义30px的高度； 第二个input输提交按钮(type=”submit”遵循怪异盒模型规则) 的height:30px

这周我学习了盒模型， 关于标准盒模型和怪异盒模型的区别我已经有了一定的了解， 标准盒模型：在标准盒模型的情况下，盒子的宽度=width（内容宽度）+padding（内边距）+border（边框）+margin（外边距）； 怪异盒模型：在怪异盒模型的情况下，盒子的宽度=width（宽度）+margin（外边距）。 这也就是说怪异盒模型中的宽度包含了padding以及border的值。 怎么实现标准盒模型和怪异盒模型的转换呢？ 可以使用css中box-sizing实现，他有两个属性，一个是border-box，也就是怪异盒模型属性，另一个是content-box，也就是标准盒模型，下面我写一个例子简单介绍标准盒模型和怪异盒模型； 很明显可以看到，在设置相同width、height的情况下，box1比box2大 是因为在标准盒模型下，width仅为盒子中内容的宽度，增加了padding值和border后，盒子会被撑大，而怪异盒模型中的width为内容区+padding+border的大小，故width的值就为整个盒子的宽度。 来源： CSDN 作者： weixin_46390207 链接： https://blog.csdn.net/weixin_46390207/article/details/104464188

标准盒模型与怪异盒模型的区别 盒模型概念：盒模型是CSS布局的基础。 作用：用来控制元素与元素，或元素和内容之间的位置关系 标准盒模型与怪异盒模型有什么区别呢？ box-sizing : content-box ; box-sizing : border-box ; box-sizing : inherit - 标准盒模型：box-sizing:content-box 标准盒模型组成：content（内容区）+padding（填充区）+border（边框）+margin（外边距） 标准盒模型的width的值是indent的值，计算盒子的宽度=width(indent)+padding+border+margin 高度同理 举个例子： div { width : 500px ; height : 500px ; padding : 100px ; border : 10px ; margin : 10px ; } 盒子的总宽度=(width)500px+(padding)200px+(border)20px+(margin)20px=740px 盒子的总高度=(width)500px+(padding)200px+(border)20px+(margin)20px=740px - 怪异盒模型box-sizing:border-box 怪异盒模型的组成：width(indent

盒模型： 可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒模型分为两种： 第一种是 W3c标准的盒子模型（标准盒模型） 、第二种 IE标准的盒子模型（怪异盒模型） 。 标准盒模型与怪异盒模型的表现效果的区别之处： 标准盒模型中 width 指的是内容区域 content 的宽度 ， height指的是内容区域content的高度 。 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 怪异盒模型中的 width指的是内容、边框、内边距总的宽度（content + border + padding） ； height指的是内容、边框、内边距总的高度 。 padding和border被包含在定义的width和height之内。 对象的实际宽度就等于设置的width值， 即使定义有border和padding也不会改变对象的实际宽度 ，即 ( Element width = width )。 如何触发两种盒模型： 如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下

事件 HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。 DOM事件流 DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。 主流浏览器的事件模型 早在2004前在HTML元素事件的订阅，发送，传播，处理模型上各浏览器实现并不一致，直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。 目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，这点对于开发者来说也是有好处的，只使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。 冒泡型事件(Bubbling) 这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点

JavaScript由ECMAScript,Dom,Bom三部分组成. ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。 DOM:标准化组织是W3C, HTML文档模型节点 BOM:Browers Object Model 浏览器对象模型 缺乏标准 来源： https://www.cnblogs.com/tx720/p/5687353.html

今天被这两个盒模型搞得有点晕。。。。。。 最初的时候是看菜鸟教程学习的，菜鸟上的盒模型解释是这样的 刷面试题的时候牛客网上的盒模型的面试题答案是这样的 what？怎么同样是说盒模型的宽度，却是不同样的解释？接着我去MDN上搜，MDN上好像没IE盒子模型的解释，不知道是不是我没看清楚还是怎么的，但是我终于知道这是为什么了 接着，问题又来了，我太难了，这个IE模型究竟是怎么回事呢？然后我去看大神的博客结合书本，得知道两者的区别，看图 不难看出，两个盒子模型都有content，padding,border,margin,唯一的区别就是对元素尺寸的计算方式，标准盒子模型的盒子宽度=content+padding+border,而IE盒子模型的盒子宽度=content 为了避免盒子被撑开，CCS3中增加了一种能够更改盒子的属性：box-sizing,它有两个属性值： （1）content-box:对应W3C盒模型 （2）border-box:对应IE盒模型 来源： CSDN 作者： 曦曦湘涟 链接： https://blog.csdn.net/Gladys_Huang/article/details/103883825

概述 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。 标准盒子模型 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。 例：一个容器的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个容器需要占据的位置为：宽 20*2+1*2+10