CSS盒子模型简单小结

最新推荐文章于 2022-05-18 16:45:55 发布

一只柚子爹

最新推荐文章于 2022-05-18 16:45:55 发布

阅读量356

点赞数

分类专栏： CSS 文章标签： CSS盒子模型简单小结

本文链接：https://blog.csdn.net/weixin_43957218/article/details/101066044

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS盒子模型简单小结

盒子模型（Box Model）

margin（外边距或空白、空白边）
border（边框）
padding（内边距或填充）
content（内容）或 element（元素）

各个部分简单说明

margin:定义元素周围的空间（通俗来讲就是自身边框到另一个容器边框之间的距离）
padding：定义元素border与content之间的空间。当padding被清除时，所释放的区域将受到element背景颜色的填充。
border：边框
content：内容部分，显示文本或图像等。

两种盒子模型

W3C的标盒模型：包括margin、border、padding、content

<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				border: 1px solid #FF0000;
				margin: 10px;
				padding: 10px;
			}
		</style>

<body>
		<div class="box"></div>
	</body>

盒子占据空间=margin+border+padding+content
盒子实际大小=border+padding+content
这里的width、height如下图所示：
W3C标准盒模型

IE怪异盒模型：
代码同上
盒子占据空间=margin+padding+border+content
盒子实际大小=padding+border+content
这里的width、height如下图所示：

两种盒子模型差异

W3C标准盒模型的width为content的宽度
IE怪异盒子模型的width为border+padding+content
height同理

指定box-sizing属性

默认值content-box 宽度和高度应用于元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（相当于W3C标准盒模型）
border-box 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。（相当于IE怪异盒子模型）

有不准确的请多多指教啊

一只柚子爹

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型简单小结

CSS盒子模型简单小结盒子模型（Box Model）各个部分简单说明两种盒子模型两种盒子模型差异指定box-sizing属性盒子模型（Box Model）margin（外边距或空白、空白边）border（边框）padding（内边距或填充）content（内容）或 element（元素）各个部分简单说明margin:定义元素周围的空间（通俗来讲就是自身边框到另一个容器边框之间...
复制链接

扫一扫