怪异 | 易学教程

标准盒模型和怪异盒模型的区别

阅读更多关于标准盒模型和怪异盒模型的区别

盒子模型有两种模式分别为标准盒模型与怪异盒模型 .标准盒模型标准的盒模型的组成 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

标准盒模型和怪异盒模型的区别

阅读更多关于标准盒模型和怪异盒模型的区别

这周我学习了盒模型，关于标准盒模型和怪异盒模型的区别我已经有了一定的了解，标准盒模型：在标准盒模型的情况下，盒子的宽度=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

文档类型doctype

阅读更多关于文档类型doctype

不管是刚接触前端，还是你已经“精通”web前端开发的内容，你应该知道在你写html的时候需要定义文档类型；你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法：<!DOCTYPE html> 哇哦，很简洁哦！好处显而易见：一、你可以轻松的写下这个doctype，而不用担心会写错；二、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它。如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的

doctype的意思

阅读更多关于 doctype的意思

<!DOCTYPE HTML>这句话在整个网页的最上头，意思是这个网页是一个用html5语法写的，因为还有html4和xhtml等语法。为了兼容一些旧的页面，浏览器设置了两种解析模式：1.标准模式(Standards Mode) 2.怪异模式(Quirks Mode) 怪异模式解析网页时会产生一些解析错误。避免出现怪异模式的最好方式就是在页面中编写正确的doctype。所以头上的这句话一定要加上。来源： https://www.cnblogs.com/yanzhuang/p/12189045.html

border-box 怪异盒子模型

阅读更多关于 border-box 怪异盒子模型

在 CSS 的盒子模型中，有两个重要的选项： box-sizing:content-box 和 box-sizing:border-box ，content-box 被称为正常盒子模型，采用标准模式解析计算，也是默认模式；border-box 被称为怪异盒子模型，采用怪异模式解析计算；两种模式的区别：标准模式会被设置的 padding 撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被 padding 所撑开。标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。怪异模式：盒子总宽度/高度 = width/height + margin。来源： CSDN 作者： yingjieweb 链接： https://blog.csdn.net/Marker__/article/details/103745860

CSS-标准盒模型 & 怪异盒模型

阅读更多关于 CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值） CSS3的box-sizing box-sizing语法： box-sizing ： content-box || border-box || inherit; 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算；来源： https://www.cnblogs.com/huangwentian/p/8601936.html

为什么使用<!DOCTYPE HTML>

阅读更多关于为什么使用

不管是刚接触前端，还是你已经“精通”web前端开发的内容，你应该知道在你写html的时候需要定义文档类型；你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法： <!DOCTYPE html> 哇哦，很简洁哦！好处显而易见：一、你可以轻松的写下这个doctype，而不用担心会写错；二、你大概省下了105字节字符，对于一个每日PV达到千万级的站点，它可以省下相当客观流量；三、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它。如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！正确的说法应该是没有定义doctype才会开启怪异模式，也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式（标准模式）下渲染页面

标准盒模型与怪异盒模型

阅读更多关于标准盒模型与怪异盒模型

1、盒子模型（box model）在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin） 2、标准盒模型与怪异盒模型对比两种模型的区别 1.标准盒模型标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin 注：除内容content外，其他为上下左右都有 2.怪异盒模型怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin 1、解决两者的兼容问题可尝试对父元素使用内边距，对子元素使用外边距 2、box-sizing的应用 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（即标准盒模型） box

标准模型与怪异模型

阅读更多关于标准模型与怪异模型

㈠原理 ⑴css 属性——Box Moel分为两种：W3C标准和IE标准盒子模型。 ⑵大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。 ⑶怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。 ⑷当不对Doctype进行定义时，会触发怪异模式。㈡标准模型和怪异模型的区别： ⑴在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右) ⑵在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值） ⑶具体看下面的模型图：标准模型：怪异模型：㈢总长度的差别那么，到底这两个公式里提到的总宽度是什么意思呢？两种模式最终效果有什么差别呢？ ⒈标准模式的代码如下图所示：效果如下图所示： ★标准模式，我们设置#box的宽高为400px，其对应的content（内容区）宽高为400px 2.怪异模式的代码如下图所示：效果图图下图所示： ★标准模式，我们设置#box的宽高为400px，在怪异模型中，其对应的content（内容区）宽高却是 width-上下padding-上下border，结果为350px; 我们很明显的看到怪异模型下的宽度变小了。希望有所帮助。来源： https://www

订阅怪异