盒子模型有几种？区别在哪？

最新推荐文章于 2025-04-18 09:12:09 发布

ㄇ

最新推荐文章于 2025-04-18 09:12:09 发布

阅读量1.3w

点赞数 10

本文链接：https://blog.youkuaiyun.com/theaaaheartbeat/article/details/105554592

版权

盒子模型有几种？区别在哪

1.W3C盒模型（标准盒模型）

	给一个标签添加：box-sizing:content-box；(元素默认)
	这个标签就转换为了w3c盒模型
	标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度

2.怪异盒模型(又称ie盒模型)

	给一个标签添加：box-sizing:border-box；
 	这个标签就转换为了怪异盒模型
	标签得实际宽度 = 设置的宽度 
	如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。

区别

主要区别：对于宽高的定义不同
w3c盒模型：设置的宽度就等于内容的宽度
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ㄇ

关注关注

10
点赞
踩
27

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css相关内容:盒子模型

weixin_74384492的博客

08-06

1037

在HTML学习中，我们了解到，每个标签的本质都是形成一个独立的空间，用于各种操作。各种标签形成的独立的空间就是盒子模型。简单来说，盒子模型就是各种标签的抽象化产物。我们可以针对盒子模型进行各种参数设置，达到样式优化的效果。

一文搞懂 CSS 盒子模型：概念、种类、布局方式、边距塌陷全都在这里了

张旭乾 - 全栈工程师/海归

08-24

1780

在用 CSS 布局的时候，经常会有各种怪异的情况出现，有些元素就是不在它应该在的位置上，也显示不成该有的大小，页面乱七八糟。这些其实还是因为 CSS 的布局基础没有掌握牢固且不够熟练。今天就深入了解一下 CSS 最基础也是最重要的部分 - 盒子模型，分别会讲到盒子的概念、布局方式、box-sizing 属性、特殊的盒子模型以及边距塌陷，相信你掌握了它们之后就能解决一大半的布局问题。目录盒子模型盒子的类型content-boxborder-box特殊的盒子-替换元素盒子的布局方式外部显示类型块级盒子行内盒子

6 条评论您还未登录，请先登录后发表或查看评论

盒子模型

SouthWindKnowMe的博客

06-07

1593

文章目录一、标准盒子padding 内边距border边框margin 外边距二、怪异盒子（IE盒子）Box-sizing三、弹性盒子（flexBox)flexbox的基础知识父容器常用属性四、浏览器内核以及其前缀一、标准盒子盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成对象的实际宽度=2margin+2borderr+2*padding+content padding 内边距内容区域和边框之间的空间会扩大元素边框所占用的区域语法：pad

盒子模型有几种，它们之间有什么区别。

染墨小白

12-02

4019

盒子模型有几种，它们之间有什么区别。

前端盒模型详解

最新发布

qq_64546210的博客

04-18

799

盒模型是前端开发中不可或缺的知识点。通过理解盒模型的基本概念、类型、属性及其在实际开发中的应用，开发者可以更好地控制页面布局和设计。然而，盒模型也不是万能的，开发者需要根据实际情况合理使用，避免常见的问题。

css盒子模型有几种?以及盒模型设置？

吴冬雪的博客

05-11

8855

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种：第一种是W3c标准的盒子模型（标准盒模型）第二种IE标准的盒子模型（怪异盒模型）当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏

css盒子模型有几种类型？它们区别是什么

m0_47408435的博客

11-14

632

标准盒模型：总宽度/高度包括了边框、内填充和外边距。怪异盒模型：总宽度/高度只包括边框和内填充，不包括外边距。为了确保浏览器兼容性，现代网页设计中通常建议使用标准盒模型，并在CSS中使用box-sizing属性来指定盒模型的类型。表示使用标准盒模型，而则表示使用怪异盒模型（虽然这会违反怪异盒模型的传统定义，但在IE浏览器中这样做可以模拟怪异盒模型的行为）。

什么是 IE 盒子模型，与 W3C 盒子模型有何区别？

03-08

### IE 盒子模型与 W3C 盒子模型的区别在网页设计和前端开发过程中，了解不同浏览器对盒子模型的不同解释非常重要。IE 浏览器早期版本采用了一种不同于 W3C 标准的盒子模型处理方式，这导致了很多跨浏览器兼容性的...

css盒模型有几种？分别是？

05-19

CSS盒模型有两种： 1. W3C盒子模型（标准盒子模型）：它将width和height属性应用到内容区域，而不包括边框（border），内边距（padding）和外边距（margin）。 2. IE盒子模型（传统盒子模型）：它将width和height...

CSS3盒子模型详解

12-13

掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度；盒的类型 inline-block css中我们使用display来...

盒子模型的区别

m0_46639176的博客

10-17

573

1.标准盒子模型 2.怪异盒子模型 1. css 盒子模型（box model）盒模型允许我们在其他元素盒周围边框之间的空间放元素; 2. 举一个例子： <button style='margin:20px;padding:10px;border:soild red 2px;width:70px;>这是</button> Js 3、W3C盒子模型（标准盒子模型）和IE盒子模型（怪异盒模型） .box{ width:200px; heig

盒子模型差异

不再更新，新博客 chgl16.space

02-24

391

差异 IE和W3C盒子模型差异如下： W3C盒模型：width = content.width；heigth = content.heigth IE盒模型：width = content.width + border * 2 + padding * 2 + margin * 2； height = content.height + border * 2 + padding * 2 +...

盒模型的两种类型

qq_41925438的博客

08-20

541

盒模型 1、标准盒模型总宽度=border（左右）+width+padding（左右）总高度=border（上下）+width+padding（上下） 2、IE盒模型（怪异盒模型）总宽度=width 总高度=height ...

什么叫CSS盒模型？有哪几种盒模型？有什么区别？box-sizing属性有什么用？

lovewuhuarou的博客

01-09

819

什么是CSS盒模型？在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由: 内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成. 有哪几种盒模型？对于盒模型，分为标准盒模型和怪异盒模型两种. 有什么区别？标准(W3C)盒模型的范围包括margin、border、padding、content,并且设置的宽高只包含content，不包含（padding+border）其他部分怪异(IE)盒模型的范围包括margin、border

什么是盒子模型？盒子模型有哪些？怎么转换？

qq_53381308的博客

05-12

3877

什么是盒子模型？盒子模型有哪些？怎么转换？ 1.网页中所有的元素都可以看成一个盒子，由 content + padding + border + margin组成 2.盒子模型有两种，一种是标准盒子模型，一种是怪异盒子模型(IE盒子模型) 浏览器默认的是标准盒子模型，因为是W3C的盒子模型标准，width = content + padding + border + margin IE5.5之前使用的是怪异盒模型，width = content(padding和border也算作主体部分

CSS复习之盒子模型有几种？

weixin_44000173的博客

07-09

665

CSS复习之盒子模型有几种？第一种W3C的标准盒子模型 第二种IE标准的盒子模型（怪异盒模型）两种盒子的宽度和高度不同 w3c标准盒子的宽度和高度是指内容的宽度和高度 content 怪异盒模型的宽度和高度指的是（content + border +padding）两种盒子的大小计算方法相同标准盒模型下盒子的大小 = content + border + padding + margin 怪异盒模型下盒子的大小=content + border + padding + margin ..

两种盒模型的区别

qq_45803050的博客

03-07

1048

标准盒模型与怪异盒模型 1.标准盒模型标准盒模型是 box-sizing: content-box , 默认值，他的width就是content的width，盒子总宽度=margin+padding+width+border，盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素，就像气球一样，大小随内容的变化而变化 Content-box图像： 2.怪异盒模型怪异盒模型：box-sizing: border-box，也是 IE盒子，父元素的盒模型确定，子元素无法撑开父元素的盒模型可以理解为现实生

CSS盒子模型有哪几种？盒子模型的组成又有那些？

胖蔡叨叨叨

10-25

2121

CSS盒子模型（Box Model）将所有的HTML元素都看做盒子，并通过盒子的组成对HTML进行布局绘制设计。那么CSS的盒子模块到底有哪几种呢？盒子模型它的组成又有哪几部分呢？接下来，我就通过这边文章对来一一解读。为了方便读者了解盒子模型，以及不同的盒子模型之间的区别，我会在阅读的顺序上做一个小小的调整。即先介绍盒子模型的组成，之后介绍盒子模型的种类。