第五章 CSS盒模型-CSDN博客

本文链接：https://blog.csdn.net/qq_62558682/article/details/142545980

5.1 盒模型的定义：

盒模型是指在CSS中，每个元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。这四个部分构成了一个元素的盒模型。

以下是对这四个部分的详细解释：

1.内容（Content）：
这是盒子的核心部分，包含了元素的实际内容，比如文本、图像或其他媒体。
内容的大小通过 width 和 height 属性来设置。
2.内边距（Padding）：
内边距是内容与边框之间的空间。
它用于增加内容与边框之间的距离，使内容看起来不那么紧贴边框。
内边距的大小可以通过 padding-top、padding-right、padding-bottom 和 padding-left 属性分别设置，或使用 padding 简写属性一次性设置所有四个方向的内边距。
边框（Border）：
3.边框是围绕内容和内边距的线条，用于突出显示元素或与其他元素区分开来。
边框的宽度、样式和颜色可以通过 border-width、border-style 和 border-color 属性分别设置，或使用 border 简写属性一次性设置所有这三个属性。
边框可以分别应用于元素的顶部、右侧、底部和左侧，例如 border-top、border-right、border-bottom 和 border-left。
4.外边距（Margin）：
外边距是元素与其他元素之间的空间。
它用于控制元素之间的间距，使页面布局更加美观和有序。
外边距的大小可以通过 margin-top、margin-right、margin-bottom 和 margin-left 属性分别设置，或使用 margin 简写属性一次性设置所有四个方向的外边距。

、

5.2 CSS元素的高度和宽度
在CSS中，元素的高度和宽度是通过height和width属性来设置的。这些属性定义了元素内容区域的大小，但需要注意的是，它们的行为可能会受到盒模型（Box Model）的影响，特别是当考虑到内边距（padding）、边框（border）和外边距（margin）时。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>示例</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            border: 10px solid red;
            padding: 30px;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
<h1>盒模型示例</h1>
<p>CSS盒模型本质上是一个盒子,外边距10px;内边距30px;边框10px的红色实线;盒子左浮动在同一行处。</p>
<div><img src="img/a1.jpg" /></div>
<div><img src="img/a2.jpg" /></div>
</body>
</html>

5.2.1 盒模型的宽度
盒模型的宽度=左边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）

5.2.2 盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

5.2.3示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			.ap{
				width: 200px;
				height: 100px;
				border: 2px solid red;
				margin: 10px;
				background-color: lightblue;
			}
		</style>
	</head> 
	<body>
		<div class="ap">这是div块级元素,可设置宽度和高度</div>
		<span class="ap">这是span行级元素,不能设置宽度和高度</span>
	</body>
</html>

5.3 边距设置和边框设置
在CSS中，边距设置和边框设置是控制元素布局和空间的关键属性，它们共同定义了元素的视觉外观和元素之间的空间关系

5.3.1 外边距设置
在CSS中，外边距（Margin）用于控制元素外部的空间，即元素边框与其他元素之间的距离。外边距的设置对于网页布局至关重要，它可以帮助你调整元素之间的间距，创建出整洁、有序且美观的网页。

5.3.1.1 上外边距
定义：上外边距是指元素顶部与其上方元素或父容器之间的距离。
设置方法：使用margin-top属性来设置。
取值：可以是长度值（如像素px、厘米cm等）、百分比值（基于父容器的宽度计算）或auto（让浏览器自动计算）。
5.3.1.2 右外边距
定义：右外边距是指元素右侧与其右侧元素或父容器之间的距离。
设置方法：使用margin-right属性来设置。
取值：与上外边距相同，可以是长度值、百分比值或auto。
5.3.1.3 下外边距
定义：下外边距是指元素底部与其下方元素或父容器之间的距离。
设置方法：使用margin-bottom属性来设置。
取值：与上外边距相同，可以是长度值、百分比值或auto。
5.3.1.4 左外边距
定义：左外边距是指元素左侧与其左侧元素或父容器之间的距离。
设置方法：使用margin-left属性来设置。
取值：与上外边距相同，可以是长度值、百分比值或auto。

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			#big{
				width: 450px;
				height: 200px;
				margin: 0px;
				background-color: #ff0;
			}
			#small1,#small2,#small3,#small4{
				width: 200px;
				height: 50px;
				text-align: center;	
				background-color: #0ff;
			}
			#small1{
				margin-left: 20px;
				margin-bottom: 30px;
			}
			#small2{
				margin-right: 20px;
				margin-top: 10px;
				float: right;
			}
			#small3{
				margin-bottom: 5px;
			}
			#small4{
				margin-left: 10px;
				margin-top: 15px;
			}
		</style>
	</head> 
	<body>
		<div id="big">
			<div id="small1">A:左外边距20像素,下外边距30像素</div>
			<div id="small2">B:右外边距20像素,上外边距10像素,右浮动</div>
			<div id="small3">C:下外边距5像素</div>
			<div id="small4">D:左外边距10像素,上外边距15像素</div>
		</div>
	</body>
</html>

本例浏览效果如图：

5.3.1.5 外边距
CSS外边距（Margin）是控制元素周围外部空间的重要属性，它决定了元素边框与其他元素或父容器之间的距离。外边距可以用于调整元素之间的间距，创建整洁、有序且美观的网页布局。

外边距的基本属性

CSS提供了四个单独的属性来设置元素的上、右、下、左外边距：

margin-top：设置元素顶部的外边距。

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

margin-bottom：设置元素底部的外边距。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			div{
				border: solid #0000ff 1px;
				width: auto;
				margin: 5px;
				float: left;
			}
			.margin1{
				background-color: #9f6;
				border: none;
				width: 200px;
				height: 80px;
				margin: 0px 15px 5px 30px;
			}
			.margin2{
				background-color: yellow;
				border: none;
				width: 200px;
				height: 80px;
				margin: 5px 30px 15px;
			}
			.margin3{
				background-color: lightgreen;
				border: none;
				width: 200px;
				height: 80px;
				margin: 10px 30px;
			}
			.margin4{
				background-color: #fc0;
				border: none;
				width: 200px;
				height: 80px;
				margin: 15px;
			}
		</style>
	</head> 
	<body>
		<div>
			<div class="margin1">上,右,下,左外边距分别为:0px、15px、5px、30px</div>
		</div>
		<div>
			<div class="margin2">上外边距分别为:5px,下外边距分别为:15px,左右外边距分别为:30px,</div>
		</div>
		<div>
			<div class="margin3">上,下外边距分别为:10px,左、右外边距分别为:30px</div>
		</div>
		<div>
			<div class="margin4">上,右,下,左外边距均为:15px</div>
		</div>
	</body>
</html>

本例浏览效果如图：

5.3.2 外边距的合并
CSS 中的外边距合并（Margin Collapsing）是一种机制，当两个垂直相邻的块级元素（block-level elements）的外边距相遇时，它们不会叠加起来，而是会合并成一个外边距，其大小等于两个外边距中的较大值

5.3.2.1 行级元素外边距合并

在CSS中，行级元素（inline elements）通常不会受到外边距（margin）的影响，因为它们的布局是基于内容流而不是块级布局。然而，当行级元素被设置为块级显示（例如，通过 display: block; 或 display: inline-block;）时，它们的外边距行为会发生变化，并且可能出现外边距合并（margin collapsing）的情况。

外边距合并（Margin Collapsing）

外边距合并主要发生在垂直方向上的相邻块级元素之间。当两个或多个块级元素的垂直外边距相遇时，它们不会叠加，而是合并为一个外边距，其大小等于两个外边距中较大的一个。这种合并行为适用于以下情况：

相邻兄弟元素：两个垂直相邻的块级元素。

父元素和第一个/最后一个子元素：父元素和它的第一个或最后一个子块级元素（如果父元素没有其他内边距、边框或内容）。

5.3.2.1行级元素与外边距合并
当行级元素（如 <span>）本身，其外边距是不会合并的，因为行级元素的外边距通常不会生效。然而，如果将行级元素设置为 display: inline-block;，它们就会表现得像块级元素，并且垂直外边距可能会合并。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			*{
				margin: 50px;
			}
			.hb1{
				background-color: yellow;
				margin-right: 20px;
				padding: 30px;
			}
			.hb2{
				background-color: lightpink;
				margin-left: 30px;
				padding: 30px;
			}
		</style>
	</head> 
	<body>
		<span class="hb1">黄色span</span>
		<span class="hb2">粉色span</span>
	</body>
</html>

：

本例浏览效果如图：

5.3.2.2 块级元素外边距合并

外边距合并是指在垂直方向上，两个相邻的块级元素的外边距（margin）发生重叠，而不是简单地取两者之间的较大值或相加。合并后的外边距的高度等于两个发生合并的外边距的高度中的最大值。

示例：

本例浏览效果如图：

5.3.3 内边距设置
在CSS中，内边距（padding）是指元素内容与边框之间的空间。通过调整内边距，可以控制元素内部的空间大小，进而影响元素的整体布局和视觉效果。

设置内边距

CSS提供了多种方式来设置元素的内边距，包括使用padding属性及其子属性（padding-top、padding-right、padding-bottom、padding-left）

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>示例</title>
		<style type="text/css">
			span{
				background-color: #ffff99;
			}
			div{
				border:solid #000000 1px;
				width: auto;
				height: auto;
				margin: 15px;
				float: left;
			}
			.padding1{
				padding-top: 30px;
				padding-left: 15px;
			}
			.padding2{
				padding-bottom: 30px;
				padding-right: 30px;
			}
			.padding3{
				padding: 5px 30px;
			}
			.padding4{
				padding: 20px;
			}
		</style>
	</head> 
	<body>
		<div class="padding1">
			<span>文字元素上内边距为30px,左内边距为15px</span>
		</div>
		<div class="padding2">
			<span>文字元素下内边距为30px,右内边距为30px</span>
		</div>
		<div class="padding3">
			<span>文字元素上、下内边距为5px,左、右内边距为:30px</span>
		</div>
		<div class="padding4">
			<span>文字元素上、右、下、左、内边距均为:20px</span>
		</div>
	</body>
</html>

本例浏览效果如图：

5.3.4 边框设置
CSS边框设置涉及多个属性，包括边框宽度（border-width）、边框样式（border-style）、边框颜色（border-color）以及边框圆角（border-radius）。

5.3.4.1 上边框
要使用CSS设置上边框，您可以使用border-top简写属性或border-top-style、border-top-width和border-top-color这三个单独的属性

5.3.4.2 右边框
类似地，设置右边框可以使用border-right简写属性或border-right-style、border-right-width和border-right-color。

5.3.4.3 下边框
设置下边框使用border-bottom简写属性或相应的子属性。

5.3.4.4 左边框
设置左边框使用border-left简写属性或相应的子属性。

5.3.4.5 边框样式
border-style属性用于设置元素边框的样式。

border-style属性值

5.3.4.6边框宽度

border-width属性用于设置元素边框的宽度。可以使用像素（px）、em、rem等单位来指定宽度。

border-width属性值

5.6 综合案例——昵心美食空间

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<style type="text/css">
			*{
				background-color:#FFFF99;
			}
			a{
				color: red;
			}
			.all{
				width:700px;
				height:650px;
				margin:10px auto;
				padding:5px;
				background-image:url(img/bg1.JPG);
			}
			.banner{
				width:700px;
				height:70px;
			}
			.menu{	
				width:690px;
				height:40px;
				padding:5px;
			}
			.main{
				width:700px;
				height:450px;
				margin:5px 0px;
				position: relative;
			}
			.left,.right{
				width:150px;
				height:440px;
				border:1px solid #999;
				float:left;
			}
			.middle{
				width:384px;
				height:450px;
				margin:0px 5px;
				float:left;
				font-size:20px;
				font-family:"楷体";
				font-weight:700;
				color:#0000FF;
			}
			.one{
				width:380px;
				height: 155px;
				border: 1px solid #999;
			}
			.two{
				width:255px;
				height:100px;
				border:5px double red;
				margin-top:20px;
				margin-bottom:20px;
				border-radius:25px;
			}
			.three{
				width:380px;
				height:135px;
				border: 1px solid #999;
			}
			.bottom{
				width:700px;
				height:70px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="banner">
				<img src="img/banner.jpg" width="700px" height="70px"/>
			</div>
			<div class="menu">
				<img src="img/menu.jpg" width="690px" height="40px"/>
			</div>
			<div class="main">
				<div class="left">
				<marquee direction="up">
					<img src="img/mm_1.jpg" width="150px" height="140px"/>
					<img src="img/mm_2.jpg" width="150px" height="140px"/> 
					<img src="img/mm_3.jpg" width="150px" height="140px"/>
				</marquee>
				</div>
				<div class="middle">
					<div class="one">
						<img src="img/font.jpg" width="25px"height="25px"/>为您推荐
						<br><br>
						<img src="img/x_1.jpg" width="80px" height="40px"/>
						<img src="img/x_2.jpg" width="80px" height="40px"/>
						<img src="img/x_3.jpg" width="80px" height="40px"/>
						<img src="img/x_4.jpg" width="80px" height="40px"/>
						<img src="img/x_5.jpg" width="80px" height="40px"/>
						<img src="img/x_6.jpg" width="8Opx" height="4Opx"/>
					</div>
					<center>
						<div class="two">
						<h1>昵心美食空间</h1>
						</div>
					</center>
					<div class="three">
						<img src="img/font.jpg" width="25px" height="25px"/>团购信息
					<br>
						<a href="#">1.火锅团购</a><br>
						<a href="#">2.烧烤团购</a><br>
						<a href="#">3.自助餐团购</a><br>
						<a href="#">4.新春特惠</a>
					</div>
				</div>
				<div class="right">
					<marquee direction="up">
						<img src="img/good_1.jpg" width="150px" height="140px"/>
						<img src="img/good_2.jpg" width="148px" height="140px"/>
						<img src="img/good_3.jpg" width="148px" height="140px"/>
					</marquee>
				</div>
			</div>
			<div class="bottom">
				<hr color="#0000FF">
				<center style="font-family:'楷体'";>版权所有&copy;昵心美食空间<br/>
				地址：江门市大学路XXX号邮编：500000电话：0750-9999999</center>
			</div>
		</div>
	</body>
</html>

本例浏览效果如图：

第五章 CSS盒模型

5.1 盒模型的定义：

盒模型是指在CSS中，每个元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。这四个部分构成了一个元素的盒模型。

以下是对这四个部分的详细解释：

5.2.1 盒模型的宽度 盒模型的宽度=左边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）

5.2.2 盒模型的高度 盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

5.2.3示例：

5.3 边距设置和边框设置 在CSS中，边距设置和边框设置是控制元素布局和空间的关键属性，它们共同定义了元素的视觉外观和元素之间的空间关系

5.3.1 外边距设置 在CSS中，外边距（Margin）用于控制元素外部的空间，即元素边框与其他元素之间的距离。外边距的设置对于网页布局至关重要，它可以帮助你调整元素之间的间距，创建出整洁、有序且美观的网页。

5.3.1.5 外边距 CSS外边距（Margin）是控制元素周围外部空间的重要属性，它决定了元素边框与其他元素或父容器之间的距离。外边距可以用于调整元素之间的间距，创建整洁、有序且美观的网页布局。

外边距的基本属性

CSS提供了四个单独的属性来设置元素的上、右、下、左外边距：

margin-top：设置元素顶部的外边距。

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

margin-bottom：设置元素底部的外边距。

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

5.3.2 外边距的合并 CSS 中的外边距合并（Margin Collapsing）是一种机制，当两个垂直相邻的块级元素（block-level elements）的外边距相遇时，它们不会叠加起来，而是会合并成一个外边距，其大小等于两个外边距中的较大值

5.3.2.1 行级元素外边距合并

外边距合并（Margin Collapsing）

外边距合并主要发生在垂直方向上的相邻块级元素之间。当两个或多个块级元素的垂直外边距相遇时，它们不会叠加，而是合并为一个外边距，其大小等于两个外边距中较大的一个。这种合并行为适用于以下情况：

相邻兄弟元素：两个垂直相邻的块级元素。

父元素和第一个/最后一个子元素：父元素和它的第一个或最后一个子块级元素（如果父元素没有其他内边距、边框或内容）。

示例

：

5.3.2.2 块级元素外边距合并

外边距合并是指在垂直方向上，两个相邻的块级元素的外边距（margin）发生重叠，而不是简单地取两者之间的较大值或相加。合并后的外边距的高度等于两个发生合并的外边距的高度中的最大值 。

示例：

5.3.3 内边距设置 在CSS中，内边距（padding）是指元素内容与边框之间的空间。通过调整内边距，可以控制元素内部的空间大小，进而影响元素的整体布局和视觉效果。

设置内边距

CSS提供了多种方式来设置元素的内边距，包括使用padding属性及其子属性（padding-top、padding-right、padding-bottom、padding-left）

示例：

5.3.4 边框设置 CSS边框设置涉及多个属性，包括边框宽度（border-width）、边框样式（border-style）、边框颜色（border-color）以及边框圆角（border-radius）。

5.3.4.1 上边框 要使用CSS设置上边框，您可以使用border-top简写属性或border-top-style、border-top-width和border-top-color这三个单独的属性

5.3.4.2 右边框 类似地，设置右边框可以使用border-right简写属性或border-right-style、border-right-width和border-right-color。

5.3.4.3 下边框 设置下边框使用border-bottom简写属性或相应的子属性。

5.3.4.4 左边框 设置左边框使用border-left简写属性或相应的子属性。

5.3.4.5 边框样式 border-style属性用于设置元素边框的样式 。

5.3.4.6边框宽度

5.6 综合案例——昵心美食空间

5.2.1 盒模型的宽度
盒模型的宽度=左边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）

5.2.2 盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

5.3 边距设置和边框设置
在CSS中，边距设置和边框设置是控制元素布局和空间的关键属性，它们共同定义了元素的视觉外观和元素之间的空间关系

5.3.1 外边距设置
在CSS中，外边距（Margin）用于控制元素外部的空间，即元素边框与其他元素之间的距离。外边距的设置对于网页布局至关重要，它可以帮助你调整元素之间的间距，创建出整洁、有序且美观的网页。

5.3.1.5 外边距
CSS外边距（Margin）是控制元素周围外部空间的重要属性，它决定了元素边框与其他元素或父容器之间的距离。外边距可以用于调整元素之间的间距，创建整洁、有序且美观的网页布局。

5.3.2 外边距的合并
CSS 中的外边距合并（Margin Collapsing）是一种机制，当两个垂直相邻的块级元素（block-level elements）的外边距相遇时，它们不会叠加起来，而是会合并成一个外边距，其大小等于两个外边距中的较大值

外边距合并是指在垂直方向上，两个相邻的块级元素的外边距（margin）发生重叠，而不是简单地取两者之间的较大值或相加。合并后的外边距的高度等于两个发生合并的外边距的高度中的最大值。

5.3.3 内边距设置
在CSS中，内边距（padding）是指元素内容与边框之间的空间。通过调整内边距，可以控制元素内部的空间大小，进而影响元素的整体布局和视觉效果。

5.3.4 边框设置
CSS边框设置涉及多个属性，包括边框宽度（border-width）、边框样式（border-style）、边框颜色（border-color）以及边框圆角（border-radius）。

5.3.4.1 上边框
要使用CSS设置上边框，您可以使用border-top简写属性或border-top-style、border-top-width和border-top-color这三个单独的属性

5.3.4.2 右边框
类似地，设置右边框可以使用border-right简写属性或border-right-style、border-right-width和border-right-color。

5.3.4.3 下边框
设置下边框使用border-bottom简写属性或相应的子属性。

5.3.4.4 左边框
设置左边框使用border-left简写属性或相应的子属性。

5.3.4.5 边框样式
border-style属性用于设置元素边框的样式。