CSS 盒模型标准盒模型 IE盒模型

CSS 盒子的组合部分：

Content box: 用来显示内容。
Padding box: 包围在内容外面的部分。
Border box: 包围显示内容和内边距。
Margin box: 在border外边的区域，是盒子和其他元素之间的空白区域。

盒模型有两种：

标准盒模型。
在标准盒模型，设置的 width 和 height，实际上设置的是内容 (content box) 的宽度和高度，加上 padding 和 border 的 width 和 height 构成一个盒子的宽高。

注：margin 定义了盒子与其他元素的间距，并不计算在盒子的宽高之内。

IE盒模型
在IE盒模型中，设置的 width 和 height，包含了 border , padding, 内容(content-box) 的宽度和高度的总和。

案例

创建一个 div，并定义样式如下：

<div class="container" />.container {width: 100px;height: 80px;padding: 5px;border: 5px solid #409EFF;margin: 5px;
}

默认模式下，盒子是标准的盒模型，如图，width 和 height 定义了其宽度和高度分别为 100px 和 80px，该 div 的宽度为：左 border + 左 padding + 内容宽度(width) + 右 padding + 右 border = 120px。

通过 box-sizing 来设置盒模型的显示方式：content-box 是默认值，是标准的盒模型。border-box 定义的是IE盒模型。他的宽度包括了：左 border + 左 padding + 内容宽度(width) + 右 padding + 右 border = 100px。

.container {box-sizing: border-box;
}

通过以上代码和示例，我们了解了标准盒模型和IE盒模型，下面通过设置 box-sizing 属性为 border-box，使div的宽高以IE盒模型的方式进行计算。以及取消 box-sizing 属性设置，以标准盒模型的方式计算div的宽高。可以明显发现属性发生变化时，宽高的计算方式发生了改变。

CSS 盒模型标准盒模型 IE盒模型相关推荐

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS-0816盒模型标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面媒体类型媒体特性opacity和背景色设置透明的区别
title: "CSS 0816" date: 2022-08-16T11:18:25+08:00 文章目录 title: "CSS 0816" date: 2 ...
CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
独家 | 机器学习解释模型：黑盒VS白盒（附资料链接）
作者:Lars Hulstaert 翻译:吴金笛校对:Nicola 本文约2000字,建议阅读9分钟. 本文将讨论一些可用于解释机器学习模型的不同技术. 大多数机器学习系统需要能够为利益相关者解释为 ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
css使两个盒子并列_盒子模型(重点)
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 看透网页布局 ...
H5盲盒源码商|城盲盒源码PHP+视频搭建视频部署教程
盲盒是一种新的方式在商场玩,你不知道的盲目的盒子,所以盲人盒有新鲜和兴奋的感觉,我们需要让盲人盒子,我们必须有一个深刻的理解盲人盒子.我们开发了很多盲盒软件产品,我们非常专业做盲盒,找专业的人做专业的 ...
月老在线牵盲盒/交友盲盒/一元交友/存取小纸条盲盒/分销功能
月老在线牵盲盒/交友盲盒/一元交友/存取小纸条盲盒交友匹配交友趣味交友同城这是一款月老盲盒微信小程序源码相信大家最近耶看到过或者听说过这类型商品吧比如各大城市摆地摊的还有各大短视频平台上面流行的 ...
从致敬KAWS系列盲盒大火，看“NFT+盲盒”玩法的想象空间
文|螳螂观察作者| 胡静婕一副作品的价格若想翻至数千倍,需要多长时间? 在艺术界,或许需要几十,甚至是上百年.然而,在NFT艺术盲盒领域仅仅只需要一分钟. 9月15日下午两点,致敬KAWS系列盲盒 ...

CSS 盒模型标准盒模型 IE盒模型

CSS 盒子的组合部分：

盒模型有两种：

案例

CSS 盒模型标准盒模型 IE盒模型相关推荐

最新文章

热门文章

CSS 盒模型 标准盒模型 IE盒模型

CSS 盒子的组合部分：

盒模型有两种：

案例

CSS 盒模型 标准盒模型 IE盒模型相关推荐

最新文章

热门文章

CSS 盒模型标准盒模型 IE盒模型

CSS 盒模型标准盒模型 IE盒模型相关推荐