css的盒子模型

最新推荐文章于 2023-01-18 21:28:17 发布

shaonian1996

最新推荐文章于 2023-01-18 21:28:17 发布

阅读量243

点赞数 1

分类专栏： html/css 文章标签： css的盒子模型

本文链接：https://blog.csdn.net/qq_41179401/article/details/79314121

版权

html/css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

css的盒子模型

一理解盒模型：

每一个元素都会在页面上生成一个盒子。因此，HTML页面实际上就是由一堆盒子组成的。默认情况下，每个盒子的边框不可见，背景也是透明的，所以我们不能直接看到页面中盒子的结构。
二每个盒子的三个属性：

边框（border）：可以设置边框的宽窄、样式和颜色。
内边距（padding）：可以设置盒子内容区与边框的间距。
外边距（margin）：可以设置盒子与相邻元素的间距。
三盒子的大小：
1 先写一个div盒子，里面包含两个p元素：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id="main">
<p>段落1</p>
<p>段落2</p>
</div>
</body>
</html>

2 添加css: 先把浏览器的默认值去掉，设置整体颜色与div不同便于观察。

*{	
	margin: 0;
	padding: 0;
}
body{
	background:#333;
}
#main{
	background: #ccc;
	width:300px;
	height: 300px;	
}

图示：

3 开始添加（外边距）margin：10px;

图示：

发现： div与浏览器窗口上左有了10px的外边距（实际上右下也有，只是看不出来）由于外边距处不能放其他盒子所以将它的大小算在在div这个盒子里，此时盒子的宽度变为300+10+10=320，注意是盒子的宽度不是width这个值。

4 接着添加（内边距）padding:10px;

图示:

发现：div内部的p元素与div上左各有了10px的内边距；实际上白色的部分已经比原来的大了；但里面的宽度不变width仍是300px。此时盒子的宽度变为320+10+10=340px。

5 最后给div加边框border:10px solid red;

图示：

发现：虽然div整个大小增加了，但div的（外边距）margin值始终保持不变（仍是10px）padding（内边距）保持不变（仍是10px），此时整个盒子的宽度变成了360px。

总结：1 设置盒子的margin border padding只会增加盒子整个的大小,不会影响中间内容区（width,height)的大小；

2 盒子的3个属性的设置互不干扰。

整个css代码：

*{	
	margin: 0 ;
	padding: 0;
}
body{
	background:#333;
}
#main{
	background: #ccc;
	width:300px;
	height: 300px;
	margin: 10px;
	padding: 10px;
	border:10px solid red;	
}

PS: 给div里的p元素设置（外边距）margin:0.5em; em:字体高等于设置的font-size(默认16px)的值。

图示：

发现：p元素与div盒子的上左距离变大了，实际上我们希望不影响原先的布局，也就是不影响第一个段落原先设好的位置，然后再设置每个段落之间的margin（外边距）值。

出现原因：当设置了margin（外边距）值时，浏览器会自动在元素的周围看成一个盒子，就像刚开始给div设置margin时虽然周围没有其他盒子，也会自动与浏览器上下空出10px的margin（外边距）值。

解决方法：只设置margin-buttom:10px;

图示：

PS：如果在这个div下面还有一个div的margin值也设置了10px，但他们之间的距离仍为10px;
但是如果上面的(下外边距)margin-buttom与下面的(上外边距)margin-top不一样时,他们之间的距离以较大的为准

PS : 如果两个盒子左右相邻设置的margin值都是10px，那么他们之间的距离是20px。也就是相加。

例如：

html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
</body>
</html>

css代码：

*{	
	margin: 0 ;
	padding: 0;
}
body{
	background:#333;
}
ul li{
	float: left;
	background: red;
	list-style-type: none;
	margin: 10px;
}

图示：

发现：margin值是10px，之间的距离是20px。

如果哪里写错了，有疑惑可留言哦，谢谢指出，共同进步哦！

shaonian1996

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的盒子模型

css的盒子模型一理解盒模型：每一个元素都会在页面上生成一个盒子。因此，HTML页面实际上就是由一堆盒子组成的。默认情况下，每个盒子的边框不可见，背景也是透明的，所以我们不能直接看到页面中盒子的结构。二每个盒子的三个属性：边框（border）：可以设置边框的宽窄、样式和颜色。内边距（padding）：可以设置盒子内容区与边框的间距。外边距（margin）：可以设置盒子与相邻元素的间距。三 ...
复制链接

扫一扫