HTML·第五章CSS盒子模型

最新推荐文章于 2025-10-14 19:29:34 发布

原创最新推荐文章于 2025-10-14 19:29:34 发布 · 902 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

第五章CSS盒模型

5.1盒模型的定义

盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：

1. 内容区域（Content）：显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。

2. 内边距（Padding）：内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。

3. 边框（Border）：包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。

4. 外边距（Margin）：元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。

盒模型的总宽度和高度计算公式为：

总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距

总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距

理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计。

5.2 CSS元素的高度和宽度

在CSS中，设置元素的高度和宽度是进行页面布局的基础。CSS提供了控制元素大小的相关属性和计算规则。以下是关于元素高度和宽度的详细信息：

1. 高度（height）和宽度（width）属性
height 用于设置元素的高度。

width 用于设置元素的宽度。

这些属性可以使用不同的单位来设置大小，比如像素（px）、百分比（%）、视口单位（vw、vh）等。

2. 默认行为
对于块级元素（如 div），默认宽度是父元素宽度的 100%，高度则是根据内容自动扩展。

对于内联元素（如 span），默认情况下 height 和 width 属性是无效的，因为它们根据内容的尺寸自动调整。

3. 单位
像素（px）：绝对单位，表示固定的大小。例如，width: 300px; 表示元素宽度为300像素。

百分比（%）：相对于父元素的尺寸。例如，width: 50%; 表示元素宽度是父元素宽度的50%。

视口单位（vw、vh）：

1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

例如，width: 50vw; 表示元素宽度是视口宽度的50%。

默认情况下，width 和 height 属性只影响内容区域的大小，不包括内边距、边框和外边距。即使你指定了宽度和高度，实际显示的元素大小可能会因为这些额外的空间而大于预期。

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

使用 boxsizing 属性可以改变盒模型的计算方式：

boxsizing: contentbox;（默认值）：width 和 height 只应用于内容区域，不包含内边距和边框。

boxsizing: borderbox;：width 和 height 包括内容区域、内边距和边框的总和。这意味着设置的宽度和高度是元素的总尺寸，而不是仅仅是内容区域的尺寸。

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  boxsizing: borderbox;
}

最小和最大宽度/高度

minwidth 和 minheight：设置元素的最小宽度和最小高度，即使内容较少，也不会缩小到低于该值。

maxwidth 和 maxheight：设置元素的最大宽度和最大高度，即使内容过多，也不会超过该值。

div {
  width: 100%;
  minwidth: 300px;
  maxwidth: 800px;
}

5.3 边距设置和边框设置

在CSS中，边距（margin）和边框（border）是用来控制元素外观和布局的重要属性。它们决定了元素之间的距离、元素的外观以及元素在页面中的布局方式。

1. 边距设置（Margin）
边距是元素边框与其他元素或父容器之间的空白区域。边距是透明的，不会有背景色或其他内容。通过设置边距，可以调整元素与其他元素之间的距离。

边距的属性

margin：用于设置所有四个方向（上、右、下、左）的边距。

margintop：设置元素上方的边距。

marginright：设置元素右侧的边距。

marginbottom：设置元素下方的边距。

marginleft：设置元素左侧的边距。

边距的缩写用法

可以通过单个 margin 属性设置四个方向的边距值。根据不同的参数数量，有不同的规则：


/ 单值语法：四个方向的边距相同 /
margin: 20px;
/ 双值语法：第一个值为上下边距，第二个值为左右边距 /
margin: 20px 10px;
/ 三值语法：第一个值为上边距，第二个值为左右边距，第三个值为下边距 /
margin: 20px 10px 30px;
/ 四值语法：按顺时针方向设置边距，依次为上、右、下、左 /
margin: 20px 10px 30px 15px

边距的取值

固定值（px, em, rem等）：例如 margin: 10px;，指定边距为固定像素。

百分比（%）：边距值是父元素宽度的百分比。例如，margin: 5%; 表示边距为父元素宽度的 5%。

自动（auto）：通常用于水平居中。元素的左右 margin 设置为 auto 时，它会自动分配空间，保证元素水平居中。

 div {
    width: 300px;
    margin: 0 auto; / 上下边距为 0，左右边距自动分配，居中元素 /
  }

5.3.1 外边距设置

border：用于同时设置边框的宽度、样式和颜色。

borderwidth：设置边框的宽度。

borderstyle：设置边框的样式（如实线、虚线等）。

bordercolor：设置边框的颜色。

边框的缩写用法

border 是 borderwidth、borderstyle 和 bordercolor 的简写属性。必须指定边框样式，颜色和宽度为可选项。


 
border: 2px solid black;
 
 
 
/ 单独设置边框的宽度、样式、颜色 /
 
borderwidth: 2px;
 
borderstyle: solid;
 
bordercolor: black;

边框样式（borderstyle）

borderstyle 用于设置边框的样式，有以下几种常见值：

none：无边框。

solid：实线边框。

dashed：虚线边框。

dotted：点线边框。

double：双线边框。

groove：凹槽边框，看起来像被雕刻的效果。

ridge：凸起的边框。

inset：看起来像嵌入页面中的边框。

outset：看起来像凸起于页面上的边框。

边框宽度（borderwidth）

borderwidth 用来设置边框的厚度，可以使用像素、百分比等单位，也可以使用关键字值：

thin（细）、medium（中等，默认值）、thick（厚）。



borderwidth: 5px;
 
borderwidth: thin;

边框颜色（bordercolor）

bordercolor 用来指定边框的颜色，可以用颜色名称、RGB、HEX等方式。

bordercolor: red;
 
bordercolor: ff0000;

单独设置各边的边框

可以分别为元素的四条边设置不同的边框属性：

bordertop

borderright

borderbottom

borderleft

/ 设置上边框为红色实线，宽度为3px /
 
bordertop: 3px solid red;
 
 
 
/ 为四条边设置不同的颜色 /
 
bordertopcolor: red;
 
borderrightcolor: blue;
 
borderbottomcolor: green;
 
borderleftcolor: yellow;

圆角边框（borderradius）

borderradius 用于创建圆角边框，允许元素的边角变得圆滑。

css

/ 创建 10px 的圆角 /

borderradius: 10px;

/ 创建椭圆形的圆角：水平和垂直方向半径不同 /

borderradius: 50px 25px;
边距与边框的区别

边距（margin）是元素外部的空白区域，影响元素与其他元素的距离。

边框（border）是围绕元素内容和内边距的可见线条，影响元素的外观。

理解如何使用 margin 和 border，可以有效地控制元素的布局和视觉表现

边距与边框的区别

边距（margin）是元素外部的空白区域，影响元素与其他元素的距离。

边框（border）是围绕元素内容和内边距的可见线条，影响元素的外观。

理解如何使用 margin 和 border，可以有效地控制元素的布局和视觉表现。



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第五章CSS盒模型</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img
			{
				width: 40px;
				height: 30px;
			}
			/*5.1盒模型的定义*/
		div{
			/*5.2.1 盒模型的宽度*/
			width: 40px;
			/*5.2.2 盒模型的高度*/
			height: 30px;
			/*5.3.1 外边距设置*/
			margin: 20px;
			/*5.3.3 内边距设置*/
			padding: 20px;
			/*5.3.4.1上边框*/
			border-top: 10px #00ff00 solid;
			/*5.3.4.2右边框*/
			border-right: 10px #ff0000 dashed;
			/*5.3.4.3下边框*/
			border-bottom: 10px #0000ff dotted;
			/*5.3.4.4 左边框*/
			border-left: 10px #000000 double;
			/*5.3.5.1圆角边框*/
			border-radius: 25px;
			/*5.3.5.2阴影边框 右偏移量 下偏移量 模糊距离 颜色*/
			box-shadow: 15px 20px 50px #ffccff;
			/*5.3.5.3图片绘制边框*/
 
			}
		</style>
	</head>
	<body>
		<div><img src="img/photo.jpg"/></div>
		<div><img src="img/photo.jpg"/></div>
	</body>
</html>

5.4 CSS元素的定位

前面所讲的盒模型都是标准流情况下可用的，但是盒模型仅有的几种排版对布局有很大的限制，导致元素无法在页面中随意地摆放，因此，我们需要使用盒子的定位(position)来增加排版的灵活性和适应性，
定位(position)的思想是，它允许你定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。position 属性值有4个。
语法:position:staticlrelativel absolute l fixed
参数:static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。ab-solute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要 top、right、bottom 和 left属性辅助完成。fxed是固定定位，相对于浏览器窗口进行定位，需要top、right、bottom 和left 属性辅助完成。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子</div>
		</div>
	</body>
</html>

5.4.1 static 定位

slatc 是 HTML 元素的默认值,不受 op、right、boom 和let 属性影响，元素出现在正常的文档流中。

iv {
 
  position: static; / 默认值 /
 
}

5.4.2 relative定位

relative 不脱离文档流的布局，需要参照父元素的四条边(不是浏览器),oP、right、bottom 和let属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。在例5.12示例程序中把 sonl的 CSS 添加 position、top和lef 属性，即可把静态定位改为相对定位。


div {
 
  position: relative;
 
  top: 20px;  / 元素会从原来位置向下移动20px /
 
  left: 10px; / 元素会从原来位置向右移动10px /
 
}

5.4.3 absolute定位

absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
				/*5.4.3.2 相对父盒子绝对定位*/
				/*position: relative;*/
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				/*5.4.2 relative定位*/
				position: relative;
				top: 10px;
				left: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 65px;
				margin-top: 50px;
				/*5.4.3.1 相对浏览器绝对定位*/
				position: absolute;
				bottom: 10px;
				right: 30px;
			}
			.son3{
				border: 2px double red;
				background-color: skyblue;
				width: 200px;
				height: 40px;
				/*5.4.4 fixed定位*/
				position: fixed;
				bottom: 10px;
				right: 30px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：相对于父盒子左边水平偏离30像素，相对于父盒子上边垂直偏离10像素
		</div>
		<div class="son2">子盒子2：相对于浏览器右边水平偏离30像素，底部垂直偏离10像素</div>
		<div class="son3">子盒子3：fixed定位（跟随浏览器的翻页滚动而动）
		</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html

5.4.3.1 相对浏览器绝对定位

只需要在例5.12示例程序中把son1的CSS修改position、top 和nght 属性即可。

5.4.3.2 相对父盒子绝对定位

编辑文章需要在例5.14示例程序中把father和sonl的CSS 修改 position、top和ripu属性即可。

5.4.4 fixed定位

fixed 类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置相对于浏览器窗口是固定不变的


div {
 
  position: fixed;
 
  top: 0;
 
  right: 0;
 
}

5.5 CSS元素的浮动

在CSS中，浮动（float）是一种用于控制元素布局的技术，最初用于使文本环绕图像。浮动元素会脱离正常的文档流，允许其他元素在其旁边排列。以下是关于浮动的详细介绍。

1. 浮动的基本概念
float 属性：用于指定元素的浮动方向，可以取以下值：

left：元素向左浮动。

right：元素向右浮动。

none：默认值，元素不浮动。

inherit：继承父元素的浮动属性。

2. 浮动的效果
当一个元素被设置为浮动时，它会：

从文档流中脱离，其他元素会尝试填补其原来的位置。

允许文本和内联元素围绕其排

v style="float: left; width: 200px; margin: 10px;">
 
  <img src="image.jpg" alt="示例图像">
 
</div>
 
<p>这是一个文本段落，它将环绕浮动的图像。</p>

清除浮动（Clearfix）
由于浮动元素脱离了文档流，后面的元素可能会发生布局问题。为了解决这个问题，可以使用清除浮动的方法。常用的方法有以下几种：

方法一：使用 clear 属性

在浮动元素之后的元素上设置 clear 属性：

clear: left;：不允许左侧浮动元素。

clear: right;：不允许右侧浮动元素。

clear: both;：不允许两侧的浮动元素。


<div style="float: left; width: 200px;">浮动元素</div>
 
<p style="clear: both;">清除浮动后的文本段落。</p>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.17</title>
		<style type="text/css">
			.father{
				background-color: #FFCCFF;
				border: 2px solid red;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed blue;
				background-color: #CCFFFF;
			}
			.father p{
				border: 2px dotted green;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
		<div style="float:right">右浮动盒子1</div>
		<div>标准盒子2</div>
		<div>标准盒子3</div>
		<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定</p>
		</div>
	</body>
</html>

5.5.1 盒子的浮动添加

一般情况下，页面中的块状元素在水平方向上宽度会自动延伸，直到父元素的边界;而在垂直方向上会按照元素在页面中出现的先后次序依次排列，即所说的标准流排列，如5-19 所示。
任何元素都可以浮动，浮动元素会变成一个块状元素，元素的水平浮动就是通过其 hoat属性的设置，使元素向其父元素的左侧或右侧靠拢，间接设置一个元素的文本环绕方式，从而改变原来的竖直排列方式。此时元素的宽度不再延伸，大小将由其内容的宽度而定
语法:float:leftlrightlnone
参数:let 元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕;ight元素浮动到右边，即向右侧靠拢，左边可以有文字环绕;默认值none 就是标准流通常的显示状态

5.5.2 盒子的浮动清除

元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想要清除这种影响，需要使用clear 属性完成。
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。
语法:clear:leftlrightlbothl none
参数:lett清除左边浮动元素，即不允许左边有浮动对象;ght清除右边浮动元素，即不允许右边有浮动对象;Bo同时清除左右两边的浮动元素，即不允许左右两边有浮动对象;默认值 none。
根据图5-22可以看到，三个子盒子均设置右浮动后，文字元素因为没有设置浮动而上移至原来子盒子1的位置进行填充，形成了元素叠加情况。因此，想要解决这种情况、可以利用 clear 属性设置。

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 Opx;
			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="80px" height="40px" />
			</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>