CSS盒子模型类型和解析

最新推荐文章于 2024-05-16 03:32:48 发布

置顶落花别有意流水似无情

最新推荐文章于 2024-05-16 03:32:48 发布

阅读量2.9k

点赞数 2

分类专栏： CSS 文章标签： CSS盒子模型分类图解

本文链接：https://blog.csdn.net/weixin_42931825/article/details/102599543

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css盒子模型分为两种：W3c标准盒子模型和IE盒子模型，下面来回顾一下盒子模型的区别。

其实盒子模型主要包括一下几个部分：

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。

第一种W3C盒子模型：

这种盒子模型设置的宽度就是内容的宽度，其他的边距和边框都是在盒子外边，我们可以得出：

内容的宽度=设置的宽度（width）;
盒子的宽度=内容的的宽度+内边距(padding)*2+外边框(border)*2+外边距(margin)*2;

盒子代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.W3c{
			width: 100px;
			height: 100px;
			background: red;
			margin: 10px;
			padding: 5px;
			border: 5px solid yellow;
		}
		.IE{
			box-sizing: border-box;
			width: 100px;
			height: 100px;
			background: blue;
			margin: 10px;
			padding: 5px;
			border: 5px solid yellow;
		}
	</style>
</head>
<body>
	<div class="W3c">
		
	</div>
	<div class="IE">  
		
	</div>
</body>
</html>

示例图如下：W3c盒子的整体宽高为120px，内容宽高为100px；

第二种：IE盒子模型

这种盒子模型的内容高度是除去内边距、外边框、外边距的高度，盒子的整体高度就是我们设置的高度（height）。

盒子内容宽度=设置的宽度（width）-内边距(padding)*2-外边距(margin)*2-外边距(border)*2;
盒子整体的宽度度=设置的宽度(width);

示例图如下：IE盒子的整体高度为100px，内容宽高为80px；

落花别有意流水似无情

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
CSS盒子模型类型和解析

css盒子模型分为两种：W3c标准盒子模型和IE盒子模型，下面来回顾一下盒子模型的区别。其实盒子模型主要包括一下几个部分：margin(外边距) - 清除边框外的区域，外边距是透明的。border(边框) - 围绕在内边距和内容外的边框。padding(内边距) - 清除内容周围的区域，内边距是透明的。content(内容) - 盒子的内容，显示文本和图像。第一种W3C盒子模型...
复制链接

扫一扫