详解盒子模型以及 box-sizing两个属性值得含义区别

最新推荐文章于 2023-09-21 15:34:29 发布

置顶 wenjie816

最新推荐文章于 2023-09-21 15:34:29 发布

阅读量3.5k

点赞数 3

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/wenjie816/article/details/84138623

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注：本文中box-width是指展示在页面中整个盒子的宽度
width指的是在代码中的width值
盒子模型是由margin、padding、border、content组成的。
它包括两种类型。（1）W3C盒子模型（2）IE盒子模型。
二者是由box-sizing这个属性来区分的。box-sizing的属性值有两个，在下面将展开详细讲解。
首先来张图，让大家直观看一下这两个区别，相信看完这两个图，你们大概就能知了个八九了。

W3C盒子模型

box-width= width+2padding+2borderox-width

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

W3C盒子展示效果

IE盒子模型

box-width= width

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1{
			box-sizing:border-box;
			width: 100px;
			height: 100px;
			padding: 10px;
			border: 5px solid blue;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box1"></div>

</body>
</html>

在这里插入图片描述

下面我来讲一下box-sizing属性。

既然都讲到了盒子模型，那必然就会牵扯到box-sizing这个属性。
该属性有两个属性值。分别是border-box和content-box。
我暂时理解的是border-box所展示的盒子效果和IE盒子模型展示的效果是一样的，而***content-box***的展示效果和***W3C盒子模型***的展示效果是一致的

border-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

用图说话

在这里插入图片描述

content-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

用图说话

在这里插入图片描述

楼主经验不足，若帖子里有错误的地方或是不准确的地方，还望大佬各位之处，此处拜谢在这里插入图片描述

wenjie816

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
详解盒子模型以及 box-sizing两个属性值得含义区别

注：本文中box-width是指展示在页面中整个盒子的宽度width指的是在代码中的width值盒子模型是由margin、padding、border、width、height组成的。它包括两种类型。（1）W3C盒子模型（2）IE盒子模型。二者是由box-sizing这个属性来区分的。box-sizing的属性值有两个，在下面将展开详细讲解。首先来张图，让大家直观看一下这两个区别，相信看...
复制链接

扫一扫