第五章 CSS 盒模型

于 2024-10-10 11:55:50 发布
阅读量495 收藏 10
点赞数 16
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xs377905132/article/details/142686000
版权

5.1盒模型的定义

在HTML和CSS中，盒模型是一个用于描述元素在网页上占据空间的概念。每个HTML元素都可以被看作一个“盒子”，这个盒子由多个部分组成。盒模型主要包括以下几个部分：

  1. 内容区 (Content)：这是实际显示内容的区域，如文本、图像等。内容区的大小由 width 和 height 属性控制。

  2. 内边距 (Padding)：内容区与边框之间的空白区域。这个区域可以用来增加内容与边框之间的距离。内边距的大小可以通过 padding 属性设置。

  3. 边框 (Border)：包围在内边距外面的区域，边框可以有不同的样式、宽度和颜色。边框的大小可以通过 border 属性设置。

  4. 外边距 (Margin)：边框外部的空白区域，用于控制元素之间的距离。外边距的大小可以通过 margin 属性设置。

盒模型类型

  1. 标准盒模型 (W3C Box Model)：这是默认的盒模型计算方式。元素的总宽度和高度是内容区的宽度和高度，加上内边距、边框和外边距。

  2. IE盒模型：在某些旧版本的IE浏览器中，元素的总宽度和高度是包含内边距和边框的，这导致了一些布局问题。为了避免这种情况，可以使用 box-sizing 属性。

重要属性

  • box-sizing: 定义如何计算元素的宽度和高度。
    • content-box（默认）：宽度和高度只包括内容区。
    • border-box：宽度和高度包括内容区、内边距和边框。

示例代码

.box {
    width: 300px; /* 内容区宽度 */
    height: 200px; /* 内容区高度 */
    padding: 20px; /* 内边距 */
    border: 5px solid black; /* 边框 */
    margin: 10px; /* 外边距 */
    box-sizing: border-box; /* 使用边框盒模型 */
}


5.2 CSS元素的高度和宽度

当设计者布局一个网页时，网页最终的宽度和高度会超出预计的数值，这是因为盒子模型的宽度或高度计算的误差造成的。指定一个CSS元素的高度和宽度属性时，只是设置内容区域的宽度和高度。而浏览器实际大小的元素，还必须添加内边距，外边距和边框。而增加或减少内边距，外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。

【例5.1】元素css的宽度是100px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例5.1</title>
		<style type="text/css">
			/* 重置所有元素的默认边距和内边距 */
			* {
				margin: 0; /* 设置所有元素的外边距为0 */
				padding: 0; /* 设置所有元素的内边距为0 */
			}
			/* 设置盒子的样式 */
			div {
				width: 100px;         /* 盒子的宽度设置为100px */
				border: 10px solid red; /* 盒子的边框为10px红色实线 */
				padding: 30px;        /* 盒子的内边距为30px */
				margin: 10px;         /* 盒子的外边距为10px */
				float: left;          /* 盒子左浮动，使其在同一行排列 */
			}
			/* 设置盒子中图片的样式 */
			.box img {
				max-width: 100%;      /* 图片最大宽度为盒子宽度 */
				max-height: 100%;     /* 图片最大高度为盒子高度 */
			}
		</style>
	</head>
	<body>
		<h1>盒模型示例</h1>
		<p>CSS盒模型本质上是一个盒子，外边距10px；内边距30px；边框10px的红色实线；盒子左浮动在同一行处。</p>
		<!-- 包含图片的盒子 -->
		<div class="box">
			<img src="img/float1.png" alt="第一张图片"/> <!-- 第一张图片 -->
		</div>
		<div class="box">
			<img src="img/float2.png" alt="第二张图片"/> <!-- 第二张图片 -->
		</div>
	</body>
</html>


5.2.1 盒模型的宽度

在 CSS 中，盒模型的宽度（width）是一个重要的属性，它决定了元素内容区域的宽度。盒模型包括以下几个部分：

  1. 内容区域（Content Area）：这是实际显示文本、图像等内容的区域。
  2. 内边距（Padding）：内容区域与边框之间的空间。它会增加盒子的整体大小，但不会影响内容区域的宽度。
  3. 边框（Border）：围绕在内边距和内容区域外面的线。边框的宽度也会增加盒子的整体大小。
  4. 外边距（Margin）：在盒子外部的空间，主要用于分隔不同的盒子。

计算盒子的总宽度

在默认情况下，盒子的总宽度可以通过以下公式计算：

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

示例

假设您有一个盒子的设置如下：

.box {
    width: 100px;       /* 内容区域宽度 */
    padding: 10px;     /* 内边距 */
    border: 5px solid; /* 边框 */
    margin: 15px;      /* 外边距 */
}

根据上面的设置，总宽度将是：

总宽度 = 100px (内容) + 10px (左内边距) + 10px (右内边距) + 5px (左边框) + 5px (右边框) + 15px (左外边距) + 15px (右外边距)
        = 100 + 10 + 10 + 5 + 5 + 15 + 15 = 160px

使用 box-sizing

您可以使用 box-sizing 属性来更改宽度计算方式。常用的值有：

  • content-box（默认值）：宽度和高度只包括内容区域。
  • border-box：宽度和高度包括内容、内边距和边框。

如果设置为 border-box，则总宽度就等于设置的 width 值

.box {
    box-sizing: border-box;
    width: 100px; /* 总宽度包括内容、内边距和边框 */
    padding: 10px;
    border: 5px solid;
}

在这种情况下，内容区域的宽度会自动调整以适应总宽度为 100px。


5.1.2 盒模型的高度

计算盒子的总高度

盒子的总高度可以通过以下公式计算

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

【例5.2】块级元素和行级元素的高度与宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.2</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>
			
		</span></span>
	</body>
</html>


5.3 边距设置和边框设置

margin-border-padding 模型是最常用的盒子布局形式。对于任何一个盒子,都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上→右→下一左的顺序(顺时针)。


5.3.1 外边距设置

外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin-right、margin-bottom、margin-left,也可以用 margin 属性一次性设置所有外边距。


5.3.1.1 上外边距

在HTML和CSS中，外边距（margin）用于控制元素与其他元素之间的空间。外边距可以通过CSS中的margin属性进行设置。

语法:margin-top:length  |    percent    |       auto

参数:length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度。auto值为自动提取边距值，是默认值。

说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元素的 height 属性或 width 属性，或者设定 position 属性为 absolute。


5.3.1.2 右外边距

语法:margin-right:length    l     percent     l      auto
参数:同 margin-top。

说明：同 margin-top。


5.3.1.3 下外边距

语法:margin-bottom:length    l    percent    l   auto
参数:同margin-top。
说明:同 margin-top。


5.3.1.4 左外边距

语法:margin-left:length    l    percent    l   auto
参数:同margin-top。
说明:同 margin-top。

【例5.3】四边外边距设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例5.3</title>
    <style type="text/css">
        /* 大盒子的样式 */
        #big {
            width: 450px; /* 设置宽度为450px */
            height: 200px; /* 设置高度为200px */
            margin: 0px; /* 外边距设置为0 */
            background-color: #ff0; /* 背景颜色为黄色 */
        }

        /* 小盒子的公共样式 */
        #small1, #small2, #small3, #small4 {
            width: 200px; /* 设置宽度为200px */
            height: 50px; /* 设置高度为50px */
            text-align: center; /* 文本居中对齐 */
            background-color: #0ff; /* 背景颜色为青色 */
        }

        /* 小盒子1的样式 */
        #small1 {
            margin-left: 20px; /* 左外边距20px */
            margin-bottom: 30px; /* 下外边距30px */
        }

        /* 小盒子2的样式 */
        #small2 {
            margin-right: 20px; /* 右外边距20px */
            margin-top: 10px; /* 上外边距10px */
            float: right; /* 右浮动，使其靠右对齐 */
        }

        /* 小盒子3的样式 */
        #small3 {
            margin-bottom: 5px; /* 下外边距5px */
        }

        /* 小盒子4的样式 */
        #small4 {
            margin-left: 10px; /* 左外边距10px */
            margin-top: 15px; /* 上外边距15px */
        }
    </style>
</head>
<body>
    <!-- 大盒子容器 -->
    <div id="big">
        <!-- 小盒子1 -->
        <div id="small1">A：左外边距20px，下外边距30px</div>
        <!-- 小盒子2 -->
        <div id="small2">B：右外边距20px，上外边距10px，右浮动</div>
        <!-- 小盒子3 -->
        <div id="small3">C:下外边距5px</div>
        <!-- 小盒子4 -->
        <div id="small4">D:左外边距10px，上外边距15px</div>
    </div>
</body>
</html>

 以上示例中共设置了1+4个盒子，由于B盒子设置为向右浮动，因此紧随其后的C盒子自然移动上来，和B盒子同处一行，A盒子设置为“margin-bottom:30px;”，而C盒子没有设置margin-lop，故A盒子与C盒子之间的距离为30像素，B盒子设置为“margin-op: 10px;”，所以A盒子与B盒子之间的距离为30+10=40像素。

5.3.1.5 外边距 


语法:margin:length    l    percent    l   auto
参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。

说明：设置对象四边的外边距，包括magim-lop(上外边距)、mnEin-eh(有距)、margin-botom下外边距)、margin-le(左外边距)，外边距始终是透明的。如果只提供1个参数，将应用于全部的外边距。如果提供2个参数，第1个参数应用于上、下外边距，第2个参数应用于左、右
如果提供3个参数，第1个参数应用于上外边距，第2个参数应用于左、右外边距,个参数应用于下外边距。

【例5.4】外边距总设置

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>外边距设置示例</title>
    <style>
        /* 大盒子的样式 */
        #container {
            width: 600px; /* 容器宽度 */
            background-color: #f0f0f0; /* 背景颜色 */
            padding: 20px; /* 内边距 */
            border: 2px solid #ccc; /* 边框 */
            margin: 0 auto; /* 居中显示 */
        }

        /* 小盒子的公共样式 */
        .box {
            width: 100px; /* 小盒子宽度 */
            height: 100px; /* 小盒子高度 */
            background-color: #4caf50; /* 背景颜色 */
            color: white; /* 文本颜色 */
            text-align: center; /* 文本居中对齐 */
            line-height: 100px; /* 使文本垂直居中 */
        }

        /* 小盒子1的外边距 */
        #box1 {
            margin: 10px; /* 所有方向10px的外边距 */
        }

        /* 小盒子2的外边距 */
        #box2 {
            margin: 20px 15px; /* 上下20px，左右15px的外边距 */
        }

        /* 小盒子3的外边距 */
        #box3 {
            margin: 25px 0 5px 30px; /* 上25px，右0，下5px，左30px的外边距 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box1" class="box">盒子1</div>
        <div id="box2" class="box">盒子2</div>
        <div id="box3" class="box">盒子3</div>
    </div>
</body>
</html>


5.3.2 外边距的合并

通常，盒子鱼盒子之间的外边距相遇会相互影响，必须对margin属性深入了解，才能精确控制盒子的位置。


5.3.2.1 行级元素外边距合并

行级元素盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

【例5.5】行级元素之间的外边距设置

<!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 块级元素外边距合并

块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。

【例5.6】垂直相遇块级元素之间的外边距设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> <!-- 设置字符编码为 UTF-8 -->
    <title>垂直相遇块级元素之间的外边距设置</title> <!-- 网页标题 -->
    <style type="text/css">
        * {
            margin: 50px; /* 为所有元素设置 50 像素的外边距 */
        }
        .div1 {
            background-color: yellow; /* 设置背景色为黄色 */
            margin-bottom: 30px; /* 设置底部外边距为 30 像素 */
            padding: 30px; /* 设置内边距为 30 像素 */
        }
        .div2 {
            background-color: lightpink; /* 设置背景色为粉红色 */
            margin-top: 30px; /* 设置顶部外边距为 30 像素 */
            padding: 30px; /* 设置内边距为 30 像素 */
        }
    </style>
</head>
<body>
    <div class="div1">黄色div</div> <!-- 第一个块级元素，黄色背景 -->
    <div class="div2">粉红色div</div> <!-- 第二个块级元素，粉红色背景 -->
</body>
</html>


5.3.3 内边距设置

内边距（padding）是指元素内容与其边框之间的空间。通过设置内边距，可以控制内容与元素边界之间的距离。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内边距设置示例</title>
    <style type="text/css">
        .box {
            background-color: lightblue; /* 设置背景色为淡蓝色 */
            padding: 20px; /* 设置所有方向上的内边距为 20 像素 */
            border: 2px solid darkblue; /* 添加边框以便更好地看到内边距 */
        }
        .box1 {
            padding: 10px 20px; /* 上下内边距 10px，左右内边距 20px */
        }
        .box2 {
            padding: 30px 10px 20px 40px; /* 上、右、下、左内边距分别为 30px, 10px, 20px, 40px */
        }
    </style>
</head>
<body>
    <div class="box">这是一个带内边距的盒子</div>
    <div class="box box1">这是另一个盒子，内边距不同</div>
    <div class="box box2">这个盒子的四个方向有不同的内边距</div>
</body>
</html>


5.3.4 边框设置

元素外边距内就是元素的边框(bonder)，它是围绕内边距和元素内容的一条或多条线在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-botmborder-leh 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性,也可使用单边属性。
边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和观。而通过使用border属性，可以创建出更佳的边框效果，还可以应用于任何元素。border属性设置通常有3种:样式(border-style)、宽度(border-width)和颜色(border-color)。


5.3.4.1上边框

语法:border-top:border-style   l   border-width    l    border-color

参数:该属性是复合属性。需要通过参数设置来实现。


5.3.4.2右边框

语法:border-right:border-style    l    border-width    l    border-color

参数:该属性是复合属性。需要通过参数设置来实现


5.3.4.3下边框

语法:border-bottom:border-stylel border-widthl border-color

参数:该属性是复合属性。需要通过参数设置来实现


5.3.4.4 左边框

语法:border-left:border-style l border-width l border-color

参数：该属性是复合属性。需要通过参数设置实现。


5.3.4.5 边框样式

在css中，样式是边框最重要的一个设置，因为如果没有样式，在web页面就不会显示。

border-style是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有12个值可选，包括默认（initial）和无边框（none）

                                                           border-style属性值

属性值说明
initial默认值，默认没有样式
none定义无边框
hidden与none相同，但应用于表时，hidden用于解决边框冲突
solid

定义实线

dashed定义虚线
dotted定义点线
double定义双线
inherit定义继承父元素边框模式
groove定义3D凹形线边框。其效果取决于border-color的值
ridge定义3D凸型线边框。其效果取决于border-color的值
inset定义3D嵌入式边框。其效果取决于border-color的值
outset定义3D嵌出式边框。其效果取决于border-color的值


5.3.4.6 边框宽度

在CSS中，宽度是通过border-width属性来设置边框粗细的。

与border-style属性相同，border-width也是一个复合属性。设置边框宽度时，可以直接输入length确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设的属性值。

属性值说明
initial默认值，默认为中等边框
inherit定义继承父元素边框宽度
thin定义细边框
medium定义中等边框
thick定义粗边框


5.3.4.7 边框颜色

在CSS中，边框颜色是通过border-color属性来设置的，该属性可以使用任何类型的颜色值，包括颜色命名的值，十六进制参数或RGB值。但是如果对象的border-style设置为none或者border-width设置为0，本属性将失去作用。

【例5.8】边框的设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5.8边框的设置</title>
		<style type="text/css"> 
		h2{
			text-align: center;
			border-bottom: dashed 5px red;
		}
		p{
			font-family: "楷体";
			border-top: solid thin purple;
			border-right: dashed 5px #9f6;
			border-bottom: double thick purple;
			border-left: dashed 5px #f99;
		}
		div{
			border-style: solid dashed double;
			border-width: 10px;
			border-color: deepskyblue;
		}
		</style>
	</head>
	<body>
		<h2>边框的实现</h2>
		<p>这个页面主要显示边框的不同样式，宽度和颜色，以实现对象的美观化。</p>
		<div>
			1.h2处所用边框CSS是5px红色虚线下边框<br/>
			2.p处所用边框CSS是10px蓝色实线，虚线，双实线，5px水绿色虚线右边框，粗的紫色双实线下边框，5px粉红色虚线左边框<br/>
			3.div处所用边框CSS是10px蓝色实线，虚线，双实线。
		</div>
	</body>
</html>


5.3.5 新增边框属性

CSS中对边框新增几个属性，设计者可以通过这些属性创建圆角边框，添加边框阴影，使用图片来绘制边框等。


5.3.5.1圆角边框

border-radius：设置边框四个角有弧度成为圆角，需要设置相关参数。

【5.9】圆角边框的设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5.9圆角边框设置</title>
		<style type="text/css">
			div{
				border:2px solid red;
				border-radius: 25px;
			}
			
		</style>
	</head>
	<body>
		<center>
			<div>利用box-shadow属性设置边框的红色阴影。其中阴影向左偏移15px，向上偏移20px，模糊距离为50px。</div>
		</center>
	</body>
</html>


5.3.5.2阴影边框

box-shadow：向四个边框添加一到多个阴影，需要设置相关参数。

【例5.10】阴影边框设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5.10阴影边框设置</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 2px solid blue;
				box-shadow: -15px -10px 50px red;
			}
		</style>
	</head>
	<body>
		<div>利用box-shadow属性设置边框的红色阴影。其中阴影向左偏移15px，向上偏移20px，模糊距离为50px。</div>
	</body>
</html>


5.3.5.3图片绘制边框

border-image：设置所有边框用图片显示，需要嵌入相关图片，但是部分浏览器不支持此属性。

【例5.11】图片边框设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5.11图片边框设置</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 50px solid #9f6;
				border-image: url(img/border.jpg)round;
				
			}
		</style>
	</head>
	<body>
		<div>利用border-image属性设置图片边框铺满效果。上下向内偏移5px，左右偏移10px</div>
	</body>
</html>


5.4 CSS元素的定位

前面所讲的盒子模型都是标准情况下可用的，但是盒模型仅有的几种排版对布局有很大的限制，导致元素无法在页面中随意摆放，因此，我们需要使用盒子的定位来增加排版的灵活性和适应性。

定位的思想是，他允许你定义元素框相对于其正常位置应该出现得位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。

position：static      |   relative     |     absolute   |   fixed。

参数：static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。absolute是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top，right，bottom和left属性辅助完成。fixed是固定定位，相对于浏览器窗口进行定位，需要top，right，bottom和left属性辅助完成。


5.4.1 static 定位

static是HTML元素的默认值，不受top，right，bottom和left属性影响，元素出现在正常的文档流中。

【例5.12】静态定位

<!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">子盒子：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
			<div class="son2">子盒子2：无定位的盒子</div>
		</div>
	</body>
</html>

以上示例中父盒子和两个子盒子都没有设置任何的position属性，所以盒子均处于静态定位，页面布局不受影响。 

5.4.2 relative定位

relative不脱离文档流的布局，需要参照父元素的四条边（不是浏览器），设置自身的top，right，bottom和left属性的参数，从盒子中独立出来浮在上面。相对于只改变自身的位置，在文档流原先的位置留在空白区域。定位的起始位置为此元素原先在文档流的位置。

【例5.13相对定位】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5.13相对定位</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;
				position: relative;
				top: 10px;left: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
			<div class="son2">子盒子2：无定位的盒子</div>
		</div>
	</body>
</html>


5.4.3 absolute定位

在HTML和CSS中，absolute定位是一种控制元素位置的方式。使用绝对定位时，元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。

概念

  • 定位上下文：绝对定位的元素会脱离文档流，因此不会占据空间，其他元素将按正常的文档流排列。
  • top, right, bottom, left：可以使用这些属性来设置元素的具体位置。
  • z-index：可以使用这个属性来控制重叠元素的堆叠顺序。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container {
            position: relative; /* 设置定位上下文 */
            width: 300px;
            height: 200px;
            border: 2px solid #000;
            margin: 20px;
        }

        .absolute-box {
            position: absolute; /* 绝对定位 */
            top: 20px; /* 距离容器顶部20px */
            left: 30px; /* 距离容器左侧30px */
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, 0.5);
            border: 2px solid #ff0000;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="absolute-box"></div>
    <p>这是一个容器元素。</p>
</div>

</body>
</html>


5.4.3.1 相对浏览器绝对定位

在CSS中，绝对定位（absolute）元素会相对于其最近的已定位祖先元素进行定位。如果没有这样的祖先元素，则它将相对于浏览器窗口（初始包含块）进行定位。

概念

  • 绝对定位：使用 position: absolute; 来设置元素的定位。脱离文档流，不占据空间。
  • 位置属性：可以通过 top, right, bottom, left 属性来精确控制元素的位置。
  • 相对浏览器窗口：如果没有已定位的祖先元素，元素的位置将相对于浏览器窗口的左上角。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            height: 1500px; /* 增加页面高度以便滚动 */
            margin: 0;
        }

        .absolute-box {
            position: absolute; /* 绝对定位 */
            top: 50px; /* 距离浏览器顶部50px */
            right: 30px; /* 距离浏览器右侧30px */
            width: 200px;
            height: 100px;
            background-color: rgba(0, 128, 255, 0.5);
            border: 2px solid #0080ff;
        }
    </style>
</head>
<body>

<div class="absolute-box">我位于浏览器窗口的右上方。</div>

<p>向下滚动查看效果...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>

</body>
</html>


5.4.3.2 相对父盒子绝对定位

在CSS中，相对父盒子绝对定位是指一个元素使用 position: absolute; 定位，并且它相对于其最近的已定位父元素（即设置了 position 属性为 relative, absolute, 或 fixed 的元素）进行定位。如果没有这样的父元素，它将相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Positioning Relative to Parent</title>
    <style>
        .parent {
            position: relative; /* 设置为相对定位，成为定位上下文 */
            width: 300px;
            height: 200px;
            border: 2px solid #000;
            margin: 20px;
            padding: 10px;
            background-color: #f0f0f0;
        }

        .absolute-box {
            position: absolute; /* 绝对定位 */
            top: 20px; /* 相对于父盒子顶部20px */
            left: 30px; /* 相对于父盒子左侧30px */
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, 0.5);
            border: 2px solid #ff0000;
        }
    </style>
</head>
<body>

<div class="parent">
    <div class="absolute-box">我相对于父盒子定位</div>
    <p>这是父盒子的内容。</p>
</div>

</body>
</html>


5.4.4 fixed定位

固定定位（fixed）是一种使元素相对于浏览器窗口固定位置的 CSS 定位方式。使用 position: fixed; 的元素即使在页面滚动时也不会移动，它的位置是相对于视口（浏览器窗口）进行设定的。

特点

  • 相对视口定位：固定定位的元素始终保持在视口中的指定位置。
  • 脱离文档流：使用 fixed 定位的元素不会占据文档流中的空间。
  • 常用于导航条或浮动按钮：由于其固定特性，常用于创建始终可见的导航栏、返回顶部按钮等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            height: 2000px; /* 增加页面高度以便滚动 */
            margin: 0;
            background-color: #e0e0e0;
        }

        .fixed-box {
            position: fixed; /* 固定定位 */
            top: 20px; /* 距离浏览器顶部20px */
            right: 20px; /* 距离浏览器右侧20px */
            width: 150px;
            height: 100px;
            background-color: rgba(0, 128, 0, 0.7);
            border: 2px solid #008000;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>

<div class="fixed-box">我会固定在这里！</div>

<p>向下滚动查看效果...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>
<p>这里是一些文本内容...</p>

</body>
</html>


5.5 CSS元素的浮动

CSS 中的浮动（float）是一种使元素在其父元素内向左或向右移动的布局机制。浮动元素会脱离正常的文档流，允许其他内容环绕它。这种特性常用于文本和图像的布局。

浮动的基本用法

浮动通常用于以下目的：

  1. 文本环绕：使文本围绕图像显示。
  2. 多列布局：创建并排的列布局。
  3. 图形布局：让图形、按钮等元素相对于页面其他内容进行排列。

CSS 浮动属性

  • float: left;：将元素浮动到其父容器的左侧。
  • float: right;：将元素浮动到其父容器的右侧。
  • float: none;：取消浮动效果（默认值）。
  • clear：用于控制元素是否可以被浮动元素的旁边所环绕。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Example</title>
    <style>
        .container {
            width: 600px;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .box {
            width: 200px;
            height: 150px;
            margin: 10px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 150px; /* 垂直居中 */
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box float-left">左浮动</div>
    <div class="box float-right">右浮动</div>
    <p>这是一些文本，用于展示浮动效果。这个文本将环绕在浮动的元素周围。继续添加更多文本，以查看浮动效果的变化。</p>
</div>

</body>
</html>


5.5.1 盒子的浮动添加

在网页布局中，使用 CSS 的 float 属性可以实现盒子的浮动效果，使多个盒子能够并排显示。下面是一个简单的示例，演示如何添加浮动效果并管理元素的排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动盒子布局示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #eaeaea;
        }

        .container {
            width: 900px;
            margin: 20px auto;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: hidden; /* 清除浮动 */
        }

        .box {
            width: 200px;
            height: 150px;
            margin: 10px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 150px; /* 垂直居中 */
            float: left; /* 使盒子浮动 */
            border-radius: 5px; /* 圆角效果 */
        }

        .box:nth-child(odd) {
            background-color: #2196F3; /* 奇数盒子颜色 */
        }

        .box:nth-child(even) {
            background-color: #FF9800; /* 偶数盒子颜色 */
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box">盒子 1</div>
    <div class="box">盒子 2</div>
    <div class="box">盒子 3</div>
    <div class="box">盒子 4</div>
    <div class="box">盒子 5</div>
    <div class="box">盒子 6</div>
</div>

</body>
</html>


5.5.2 盒子的浮动清除

在 CSS 中，清除浮动是确保浮动元素的父容器能够正确包含它们的重要步骤。下面介绍几种常见的方法来清除浮动。

方法 1：使用 overflow 属性

这是最简单的一种方法，通过设置父容器的 overflow 属性，可以自动清除内部的浮动元素。

.container {
    overflow: hidden; /* 清除浮动 */
}

方法 2：使用伪元素

可以使用 ::after 伪元素来创建一个清除浮动的效果。这种方法不影响布局，并且更灵活。

.container::after {
    content: "";
    display: table;
    clear: both; /* 清除浮动 */
}

方法 3：使用 clearfix 类

定义一个 clearfix 类并应用于容器，这是一种复用性较高的方法。

.clearfix::after {
    content: "";
    display: table;
    clear: both; /* 清除浮动 */
}

 然后在 HTML 中将其应用到容器上：

<div class="container clearfix">
    <div class="box">盒子 1</div>
    <div class="box">盒子 2</div>
    <div class="box">盒子 3</div>
    <div class="box">盒子 4</div>
</div>

方法 4：使用浮动的兄弟元素

为容器添加一个额外的元素（如 <div style="clear: both;"></div>）也可以清除浮动，但这种方法较为笨重，不推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #eaeaea;
        }

        .container {
            width: 900px;
            margin: 20px auto;
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: hidden; /* 方法 1: 清除浮动 */
        }

        .box {
            width: 200px;
            height: 150px;
            margin: 10px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 150px;
            float: left; /* 盒子浮动 */
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box">盒子 1</div>
    <div class="box">盒子 2</div>
    <div class="box">盒子 3</div>
    <div class="box">盒子 4</div>
</div>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>妮心美食空间</title>
    <style type="text/css">
        * {
            background-color: #FFFF99;
        }
        a {
            color: red;
        }
        .all {
            width: 800px; 
            height: 650px;
            margin: 10px auto;
            padding: 5px;
            background-image: url(img/bg1.JPG);
        }
        .banner {
            width: 800px; 
            height: 70px;
        }
        .menu {
            width: 790px; 
            height: 40px;
            padding: 5px;
        }
        .main {
            width: 800px; 
            height: 450px;
            margin: 5px 0px;
            position: relative;
        }
        .left, .right {
            width: 150px; 
            height: 440px;
            border: 1px solid #999;
            float: left;
        }
        .middle {
            width: 470px; 
            height: 450px;
            margin: 0px 5px;
            float: left;
            font-size: 20px;
            font-family: "楷体";
            font-weight: 700;
            color: #0000FF;
        }
        .one {
            width: 470px; 
            height: 155px;
            border: 1px solid #999;
        }
        .two {
            width: 400px; 
            height: 100px;
            border: 5px double red;
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 25px;
        }
        .three {
            width: 470px; 
            height: 135px;
            border: 1px solid #999;
        }
        .bottom {
            width: 800px; 
            height: 70px;
            text-align: center; 
            font-family: 楷体; 
            clear: both; 
            margin-top: 10px; 
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="banner">
            <img src="img/banner.jpg" width="800px" height="70px"/>
        </div>
        <div class="menu">
            <img src="img/menu.jpg" width="790px" 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>
                    <br/><br/> 
                </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">
            <p>版权所有&copy; 昵心美食空间</p>
            <p>地址：江门市大学路XXX号 邮编：500000 电话：0750-999999999</p>
        </div>
    </div>
</body>
</html>

@无铭
关注
【CSS3】第5章 盒子模型
笔触狂放的博客
12-29 2065
熟悉盒子模型的概念，能够说出盒子模型的基本结构。掌握标签的用法，能够使用标签制作页面模块。掌握边框属性的用法，能够为盒子设置不同的边框效果。掌握边距属性的用法，能够使用内边距和外边距设置盒子空间距离。了解盒子宽度属性和高度属性，能够计算盒子的实际宽度。掌握box-shadow属性的用法，能够为盒子添加阴影。熟悉box-sizing属性的用法，能够控制盒子宽度和高度范围。掌握背景属性的用法，能有为盒子设置不同样式背景。
第五章 CSS盒子模型
2402_87161397的博客
10-02 1425
width在CSS中，border属性是一个简写属性，可以用来一次性设置边框的宽度、样式和颜色。每个方向的边框也可以单独设置，如border-top和。这些属性各自接受三个值：宽度（）、样式（）和颜色（通过对border及其相关属性的灵活运用，你可以轻松地控制元素边框的各种细节，从而实现丰富多彩的视觉效果。无论是在简单的网页布局还是复杂的设计项目中，边框都是一个不可或缺的工具，它不仅提升了用户体验，也增强了页面的整体美观度。记住，在进行布局时考虑到边框的存在及其对元素尺寸的影响，合理利用。
第五章 CSS盒模型
whitesandcnm的博客
09-24 1258
盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。2. 内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。
第五章 - CSS盒模型
zl960320的博客
11-18 230
我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。 1. 盒模型 1. 1 看透网页布局的本质 我们在进行网页布局的过程中，需要做以下准备： 先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 网页布局的核心本质：利用CSS摆放盒子 1.2 盒子模型组成 所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。 CSS盒模型本
第五章CSS盒模型
最新发布
2401_84288452的博客
10-09 817
盒模型的宽度=左外边距(margin-left)+左边框(border-let)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(borler-right)+右外边距(margin-right)。
css盒子模型
2401_83342251的博客
06-12 1108
之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。
前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 1236
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
CSS盒模型布局
m0_74995879的博客
04-16 1120
css盒模型喔！
CSS盒模型完整介绍
陈坚泓的博客
03-07 8420
CSS盒模型完整介绍盒模型的认识一、基本概念：标准模型+IE模型二、标准模型和IE模型的区别三、css如何设置获取这两种模型的宽和高四、javascript如何设置获取盒模型对应的宽和高五、外边距重叠六 、BFC推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 盒模型的认识 文章主要有以下内容 基本概念：标准模型+IE模型。 包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何
CSS 盒子模型（box model）
小楼一夜听春雨，深巷明朝卖杏花
03-01 2735
盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。上下是一个值，左右是一个值。，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。内容文字图片是实物，然后内边距，边框，外边距。
第五章 CSS盒模型 案例所需图片
10-09
第五章 CSS盒模型 案例所需图片
网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型.pptx
11-13
网页设计与制作教程（HTML+CSS+JavaScript）第2版第5章CSS盒模型 本章节主要介绍CSS盒模型的概念和应用，包括盒模型的组成部分、边框和外边距、内边距、盒模型的宽度和高度、块级元素与行级元素的区别、margin叠加...
第16章 CSS盒模型[下].pdf
04-27
在HTML5中，CSS盒模型是构建网页布局的核心概念，它决定了元素框处理元素内容（content）、内边距（padding）、边框（border）以及外边距（margin）的方式。在给定的文件内容中，涉及到了CSS盒模型的三个主要学习...
第16章 CSS盒模型[上]
08-11
标题“第16章 CSS盒模型[上]”暗示我们将讨论盒模型的基本概念和属性，可能涵盖内容区、填充、边框和外边距的设置。通常，这部分会讲解如何使用CSS来调整这些属性，以便在不同浏览器间实现兼容性布局。 在描述中...
CSS实现文本超出隐藏并显示省略号
everfoot的博客
10-02 556
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。
CSS中的flex概述
学无止境
10-02 333
例如，当容器空间小于子元素的总宽度（或高度）时，子元素将按照。（默认值，当子元素未设置交叉轴方向的尺寸时）：子元素沿交叉轴方向拉伸，填满容器。：行（列）沿交叉轴均匀分布，每行（列）之间以及与容器边缘的间隔都相等。：子元素沿主轴均匀分布，每个子元素之间以及与容器边缘的间隔都相等。：行（列）沿交叉轴均匀分布，两端的行（列）与容器边缘对齐。：行（列）沿交叉轴均匀分布，每行（列）两侧都有相等的间隔。：子元素沿主轴均匀分布，每个子元素两侧都有相等的间隔。：子元素沿主轴均匀分布，两端的子元素与容器边缘对齐。
【CSS】水平垂直居中
小秀的博客
10-02 549
容器设置position: relative。子元素设置 position: absolute;left: 50%;需要给子元素设置 position: absolute;设置固定宽度和高度;top、left、bottom、right都设置为0;margin设置为auto；给容器设置 display: flex;子项设置 margin: auto;给父盒子设置属性 flex。给父盒子和子盒子设置属性。flex:1 的作用。
【CSS】flex: 1； 的意思
小秀的博客
10-09 165
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
241006-Gradio中Chatbot通过CSS自适应调整高度
专注机器学习之路
10-06 351
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值