前端的学习-CSS（五）-CSDN博客

本文链接：https://blog.csdn.net/m0_68823256/article/details/140725013

一：盒子模型

所谓盒子模型（Box Model），就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。

1：边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 、边框样式、边框颜色。

 border : border-width , border-style , border-color

border-width：设置边框的宽度。

border-style：设置边框的样式。

属性值：

none：定义无边框。

hidden：与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted：定义点状边框。在大多数浏览器中呈现为实线。

solid：定义实线。

double：定义双线。双线的宽度等于 border-width 的值。

groove：定义 3D 凹槽边框。

ridge：定义 3D 垄状边框

inset：定义 3D inset 边框。

outset：定义 3D outset 边框。

border-color：设置边框的颜色。

border: 1px solid red;

边框单写，是设置四周的边框。

边框分开写法：

	border-top: 1px solid red; /* 设定上边框 */
	border-bottom: 1px solid red; /* 设定下边框 */
	border-left: 1px solid red; /* 设定左边框 */
	border-right: 1px solid red; /* 设定右边框 */

注意：边框会额外增加盒子的实际大小。

.div2 {
	width: 120px;
	height: 120px;
	background-color: red;
	border: 2px solid green;
}

如上面实际设置了宽度为120px,高度为120px,但加了边框之后，宽度接近124px,高度接近124px,这是因为左右边框各增加了2px,上下也各增加了2px.

2：内边距padding

padding 属性用于设置内边距，即边框与内容之间的距离。

padding：设置元素的所内边距属性。

padding-bottom：设置元素的下内边距。

padding-left：设置元素的左内边距。

padding-right：设置元素的右内边距。

padding-top：设置元素的上内边距。

当我们给盒子指定 padding 值之后：

（1）padding影响了盒子实际大小。

3：外边距margin

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin：设置外边距的大小。

margin-button：设置元素的下外边距。

margin-left：设置元素的左内边距。

margin-right：设置元素的右内边距。

margin-top：设置元素的上内边距。

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1: 盒子必须指定了宽度（width）。

2:盒子左右的外边距都设置为 auto 。

4：盒子模型会出现的两个问题

1：外边距塌陷

a、对于两个嵌套关系的块元素，如果父元素没有上内边距及边框。

b、父元素的上外边距会与子元素的上外边距发生合并。

c、塌陷后的外边距为两者中的较大者。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			.div1 {
				margin: 0;
				padding: 0;
				width: 120px;
				height: 120px;
				background-color: red;
			}
			.div2{
				width: 50px;
				height: 50px;
				background-color: palegreen;
				/* margin-top: 50px; */
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				
			</div>
		</div>
	</body>
</html>

如上面，此时将margin-top：50px的注释去掉会出现，两个盒子一起往下的情况。

解决办法：

方法一：设置父元素的overflow属性为hidden

方法二：设置父元素的border属性，如：border:1px solid red;

方法三：父元素定义上内边距，如padding-top:1px;

2：相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者。这种现象被称为相邻块元素垂直外边距的合并。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			.div1 {
				margin: 0;
				padding: 0;
				width: 120px;
				height: 120px;
				background-color: red;
				margin-top: 30px;
			}
			.div2{
				width: 50px;
				height: 50px;
				background-color: palegreen;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
		<div class="div2">
			
		</div>
	</body>
</html>

解决办法：尽量给只给一个盒子添加margin值。

3：清除内外边距

* {
    padding:0; /* 清除内边距 */
    margin:0; /* 清除外边距 */
}