说一说盒模型？_

测试2号

😃

发表于 2022-04-02 18:24:48 回复(1)

一公升的眼泪

CSS盒模型本质是一个盒子，包含 padding、border、margin、content。有两种盒模型：W3C标准盒模型和IE怪异盒模型。标准盒模型的width/height不包含padding和border，因此总宽高需要额外加上padding、border和margin的值。怪异盒模型width/height中包含padding和border，因此总宽高只用额外加上margin值即可。默认使用标准盒模型，也可以通过控制box-sizing属性决定盒模型：border-box代表怪异盒模型、content-box代表标准盒模型。

编辑于 2022-07-29 13:37:48 回复(0)

牛客663468082号

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。\ 在标准的盒子模型中，`width 指 content 部分的宽度`。\ 在 IE 盒子模型中，`width 表示 content+padding+border 这三个部分的宽度`。故在计算盒子的宽度时存在差异： **标准盒模型：** 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右) **怪异盒模型：** 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

发表于 2022-05-19 16:47:08 回复(0)

lonelysaber

css盒子的组成包括margin、border、padding、content；盒子模型一共两种：标准盒模型（content-box）、怪异盒模型（border-box）；标准盒模型在设置width和height时设置的是content的大小，盒子的大小还要加上padding、border；怪异盒模型设置width和height时设置的是盒子的大小，会压缩content区域

发表于 2022-08-01 11:02:14 回复(0)

牛客98748904号

1

发表于 2022-04-19 10:00:37 回复(0)

已注销

挂载阶段：beforeCreate、created、beforeMounted、mounted 更新阶段：beforeUpdate、updated 销毁阶段：beforeDestroy、destroyed 父子组件执行顺序：挂载：父created -> 子created -> 子mounted -> 父mounted 更新：父beforeUpdated -> 子beforeUpdated -> 子update -> 父updated 销毁：父beforeDestory -> 子beforeDestroy -> 子destroyed -> 父destroyed

编辑于 2022-04-29 11:24:07 回复(10)

edjtu19-软工3班-何江涛

首先盒子包含四部分：content，padding，border，margin。

w3c标准规定，属性width等于content的宽度，则盒子宽=width+ padding+ border+ margin。所以增加padding时，我们看到整个盒子被撑开了。这种计算方法称为"标准盒模型"。

我们知道ie浏览器一般特立独行，它规定了另一种盒模型：属性width等于content宽度加border加padding，则盒子宽=width+ margin。被称为"怪异盒模型"。
虽然怪异模型跟w3c标准不同。但怪异模型在某些场景很有优势，因此很多浏览器同时实现了两种模型，只要添加"box-sizing: border- box" 就能切换到怪异模型。
自己ps的图片

发表于 2022-11-08 20:05:54 回复(0)

牛客176528510号

标准盒模型，当我们设置宽度时，同时设置了padding,border等，盒子实际宽度会变大，我们设置的宽度是指盒子的context的宽度。怪异盒模型,我们设置了一个宽度，同时设置了boder.padding等，你会发现盒子宽度就是你设置的宽度，因为padding等的设置导致了盒子content区域变小，盒子总宽度不变

发表于 2022-05-31 15:42:53 回复(0)

重生之米粉转米黑转米粉爱等信

1. 盒模型分为两类，一是标准盒模型，二是怪异盒模型。一般我们的盒子默认是标准盒模型。
2. 两者区别是标准盒模型的实际宽高会把padding和border计算在内，而怪异盒模型不会。
3. 形成怪异盒模型的条件是box-sizing:border-box；形成标准盒模型的条件box-sizing:content-box。

发表于 2023-01-09 12:10:52 回复(0)

iuieGq

盒模型分为两种标准盒模型和IE盒模型（怪异盒模型）标准盒模型的总宽高会将内容宽高和border+padding一起计算怪异盒模型的宽高并不包含border+padding

发表于 2024-12-04 13:07:45 回复(0)

真理巫师

盒子模型组成：margin（外边距），border（边框），padding（内边距），content（盒子内容）一般使用的盒子模型默认的是标准盒子（box-sizing:content-box），而要为某个元素使用怪异盒子模型，可对其设置box-sizing: border-box 区别：标准盒子模型在设置width和height时设置的是content的大小，实际宽高会计算padding和border，而怪异模型怪异盒模型设置width和height时设置的是盒子的大小，实际宽高要减去padding和border，压缩content的区域。

发表于 2024-06-23 17:10:50 回复(0)

椰果uu

CSS盒模型本质是一个盒子，包含 padding、border、margin、content。有两种盒模型：W3C标准盒模型和IE怪异盒模型。标准盒模型的width/height不包含padding和border，因此总宽高需要额外加上padding、border和margin的值。怪异盒模型width/height中包含padding和border，因此总宽高只用额外加上margin值即可。默认使用标准盒模型，也可以通过控制box-sizing属性决定盒模型：border-box代表怪异盒模型、content-box代表标准盒模型。

发表于 2024-05-17 12:46:02 回复(0)

喜欢修勾的华夫饼在看机会

css盒模型定义了每个部分包含margin，border，padding，content。根据盒子大小的计算方式不同盒子模型分成了两种，标准盒子模型和怪异盒子模型。标准盒子模型，给盒子设置’width‘和’height‘，实际设置的是content box。’padding‘和border’再加上设置的宽高一起决定盒子大小。怪异盒子模型：给盒子设置width和height，包含了padding和border。设置的width和height就是盒子实际的大小，默认情况下，盒模型都是标准盒模型；设置标准盒模型：box-sizing:content-box 设置怪异盒模型：box-sizing:border-box

发表于 2022-07-17 11:02:25 回复(0)

变成金渐层

盒子模型分为标准盒子模型和IE盒子模型，两个盒子模型都由content padding border margin四部分组成，但是标准盒子模型中的height和width是content的height和width，而IE盒子模型中的height和width是content padding border的总height和width决定的，如果要实现两种盒子模型的相互转换可以改变元素的box-sizing属性来改变，box-sizing:content-box 标准盒子模型，box-sizing: border-box IE盒子模型

发表于 2022-07-02 16:27:13 回复(0)

云寄

有标准盒模型和怪异盒模型，通过box-sizing，默认是标准盒模型，可以设置border-box为怪异盒模型。主要区别就是：padding和border的值是否会算进设置的width和height中。标准盒模型在页面上显示的大小是你设置的宽高加上padding和border，怪异盒模型则是你设置的宽高为多少，显示在页面中的元素大小就是多少，padding和border都算在了你设置的宽高中。

发表于 2025-04-04 15:33:38 回复(0)

三桥贵志_

盒模型有两种，第一种是盒模型的大小就是content的大小的，计算真正大小时要加上padding，margin等，第二种是将box-sizing设为border-box，这时整个盒模型设置的大小将为所有而并非单指content

发表于 2024-09-05 09:40:13 回复(0)

一个编程牛

标准盒模型: box-sizing:content-box; 怪异盒模型: box-sizing:border-box;margin+border+padding-content

发表于 2024-09-03 20:49:55 回复(0)

顾言_t

在CSS中盒子模型总共分为两种，一种是标准盒模型，一种是怪异盒模型。标准盒模型将元素看成一个盒子，有content,padding,border,margin四个部分组成，为元素设置width,height元素时只会作用于元素content内容区域，设置方式为box-sizing: content-box;。怪异盒模型为元素设置width,height时会将元素padding,content,border三部分都计算在内，设置值除去padding和border后剩余部分才是元素真实width，设置方式为box-sizing: border-box;

发表于 2024-05-25 22:45:12 回复(0)

刷题路上的烧麦很想减肥

css盒模型主要由content，padding，border，margin组成。 css中有两种盒模型一：W3C标准盒模型 (box-sizing：content-box) 标准盒模型的width和height是指content区域宽高。总宽高＝width/hight＋padding＋border＋margin。二：IE怪异盒模型 (box-sizing：border-box) 怪异盒模型的width和hight是指盒子除了margin外的区域宽高。总宽高＝width/hight＋margin。从两种盒子的content区域区分：标准盒模型调整Padding，border，margin时候，content区域width/hight的值保持不变。怪异盒模型调整Padding，border时候，content区域width/hight会受到影响。调整margin时候，content区域不受影响。

发表于 2024-05-09 14:21:02 回复(0)

Ling_Ji

盒模型分为标准盒模型和怪异盒模型，标准盒模型的设置条件是：box-sizing:content-box,它的盒子宽高大小不包括padding和border；而怪异盒模型的设置条件是：box-sizing:border-box,它的盒子宽高大小已经包括了padding和border

编辑于 2024-03-25 19:02:43 回复(0)

说一说盒模型？

问题信息

热门推荐

相关试题