CSS学习7_.button .rightdiv:first-child{ background: pink; }-CSDN博客

本文链接：https://blog.csdn.net/aneyal/article/details/123504606

本文详细介绍了CSS3中的盒模型，包括内容、内边距、边框和外边距的使用顺序，以及如何通过`box-sizing`属性切换content-box和border-box模式。此外，还讲解了盒子阴影的添加方法`box-shadow`。接着，文章阐述了CSS的定位机制，包括普通流、浮动和定位的原理和应用。通过实例展示了浮动如何影响元素的布局，以及如何使用浮动进行元素对齐和避免布局混乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子模型布局稳定性

优先使用宽度，其次使用内边距，再次使用外边距

CSS3盒模型

CSS3中可以通过box-sizing来指定盒模型，即可以指定为content-box、border-box，这样我们计算盒模型的大小的方式就发生了改变：

content-box：盒子大小为width+padding+border content-box中此值是默认值，它让元素维持W3C的标准Box Mode

border-box：盒子大小为width，也就是说padding和border是包含在width中的。

盒子阴影

就像文字可以添加阴影，盒子也可以添加阴影，使用box-shadow

box-shadow有六个值：h-shadow（必须，水平阴影的位置，允许负值），v-shadow（必须，垂直阴影的位置，允许负值），blur（可选，模糊距离，即模糊程度），spread（可选，阴影的尺寸），color（可选，阴影的颜色，即影子大小），inset（可选，将外部阴影改为内部阴影）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 3px solid red;
				/* 设置盒子阴影,内阴影 */
				box-shadow: 5px 5px 2px 7px rgba(0,0,0,0.5) inset;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：

CSS的定位机制

CSS的定位机制有三种：普通流（标准流、文档流）、浮动和定位

普通流就是一个网页内标签元素正常从上到下，从左到右顺序排列。

浮动最早是用来控制图片的，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来发现使用浮动可以让多个块级元素排列在一行上，所以现在用其来进行网页布局。

浮动

浮动的基础用法

通过float属性定义浮动。

float的属性值有三个：left（元素向左浮动）、right（元素向右浮动）、none（不浮动，默认值）。

浮动脱离标准流，不占位置，会影响标准流

浮动首先创建包含块的概念，就是说，浮动的元素总是找离他最近的父级元素对其，但不会超出内边距范围

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				/* 向左浮动 */
				float: left;
			}
			div:first-child{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 如果两个盒子都不浮动，则是标准流，两个盒子一个占一行 -->
		<!-- 如果两个盒子都浮动，则两个盒子将并排 -->
		<!-- 如果只有一个盒子浮动，则两个盒子会重叠-->
		<!-- 这是因为浮动脱离标准流，不占位置 -->
		<div></div>
		<div></div>
	</body>
</html>

效果

浮动首先需要添加标准流父级

实际应用中，为了避免因为浮动而导致的混乱（例如不应该出现的覆盖），在设置浮动之前需要添加标准流父级

浮动特性对齐父盒子

浮动的元素总是找离他最近的父级元素对其，但不会超出内边距范围

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				width: 300px;
				height: 300px;
				background-color: red;
				border: 10px solid black;
                padding: 10px;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: pink;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

效果：