盒子模型标准模式与怪异模式内减盒模型

分手后的思念是犯贱 2021-09-01 05:12 486阅读 0赞

# [盒子模型-怪异模式和标准模式 ][-_] #

首先，两种模式可以利用box-sizing属性进行自行选择：

标准模式：box-sizing:**content-box; **

**      ** 用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大

怪异模式：box-sizing:**border-box;**

为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。 增加border和padding的值，不会改变  盒子的大小，只改变内容区域的大小,border-box 改变border padding不会影响到其他的盒子

**两种模式的区别：**

**　　标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。**

**　**　例：

.box\{   
           box-sizing:border-box;   //没有添加时，按照标准模式计算， 添加时按照怪异模式解析   
           width:200px;   
           height:200px;   
           border:2px solid black;   
           padding:50px;   
           margin:50px;   
     \}

标准模式：盒子总宽度/高度 = **内容区宽度 /高度+padding+border + margin**。效果：![format_png][]

怪异模式下的效果　盒子总宽度/高度 = **width/height + margin。**：![format_png 1][]

[-_]: https://www.cnblogs.com/leibeiwang/p/6164650.html
[format_png]: /images/20210813/dacfd25d46614722806169e0106a65da.png
[format_png 1]: /images/20210813/59fc2ac086ce4c0c808bff1956e5af2d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 盒模型是什么？它包含哪些属性？标准盒模型/怪异盒模型

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 盒模型 ⭐ 标准盒模型 ⭐ 怪异盒模型 ⭐ 写在最后 --------------------

太过爱你忘了你带给我的痛/ 2023年10月14日 16:24/ 0 赞/ 48 阅读

相关 CSS盒子模型和怪异盒模型

CSS盒子模型具备的属性：内容(content)、内边距(padding)、边框(border)、外边距(margin) 。 ![在这里插入图片描述][20191009131

今天药忘吃喽~/ 2023年06月05日 14:00/ 0 赞/ 36 阅读

相关 CSS-盒子模型，标准盒子模型，IE 盒子模型，盒模型之间的转换

我们可以把每一个HTML标记，都看成是一个"盒子"；这个"盒子"的特征包含：内容的宽度（width）或高度（height）、边框线（padding）、内填充（padding）、

分手后的思念是犯贱/ 2023年06月01日 11:13/ 0 赞/ 167 阅读

相关标准盒模型和怪异盒模型(marksheng)

[标准盒模型和怪异盒模型][Link 1] 盒子模型众所周知，这里先简单介绍一下。 ![bf87fcb7ab972914ed580e0b5e79d775.png][]

矫情吗；*/ 2023年01月17日 10:57/ 0 赞/ 143 阅读

相关盒子模型，标准盒模型，怪异盒模型，两种盒模型的区别，box-sizing属性

什么是盒子模型 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容，内边距，边

迷南。/ 2022年12月03日 08:28/ 0 赞/ 226 阅读

相关盒子模型，盒模型，框模型

定义及组成： css中所有的样式都是一个矩形盒子布局就是将盒子放到合适的位置盒子的组成包括：内容区（content），内边距（padding），边框

左手的ㄟ右手/ 2022年08月31日 15:19/ 0 赞/ 243 阅读

相关 css3盒模型、弹性盒模型、怪异盒模型

一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒

ゝ一纸荒年。/ 2022年05月28日 00:58/ 0 赞/ 462 阅读

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

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Micros

缺乏、安全感/ 2022年05月19日 03:49/ 0 赞/ 297 阅读

相关标准盒模型和IE怪异盒模型

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（qui

野性酷女/ 2021年10月09日 04:14/ 0 赞/ 447 阅读

相关盒子模型标准模式与怪异模式内减盒模型

[盒子模型-怪异模式和标准模式 ][-_] 首先，两种模式可以利用box-sizing属性进行自行选择：　　标准模式：box-sizing:content-box;

分手后的思念是犯贱/ 2021年09月01日 05:12/ 0 赞/ 487 阅读