CSS之盒模型（网页设计）

最新推荐文章于 2024-10-15 20:19:31 发布

Sasura_321

最新推荐文章于 2024-10-15 20:19:31 发布

阅读量963

点赞数 1

分类专栏： Web前端文章标签： CSS html 盒子模型网页设计

本文链接：https://blog.youkuaiyun.com/qq_40933663/article/details/88078379

版权

Web前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了CSS盒模型，包括内容、内边距、边框和外边距的概念，并通过实例展示了如何设置边框和内边距。此外，还讨论了CSS浮动和定位，如float属性用于创建多栏布局，以及position属性的relative、absolute和fixed用法。这些知识对于网页设计至关重要。

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

CSS盒模型： (Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。

概述

万物皆盒子，在所有的html标签中，都可以把他看成盒子。
在这里插入图片描述

盒子的厚度：就是边框的大小：border
盒子的padding属性：内边距（指的是内容和边框的距离）
盒子的外边距：margin属性（盒子与盒子之间的距离）

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style>
			#dl1{
				/*设置内边距:简写属性的方式*/
				padding: 10px 0 0 20px;
			}
			#dl2{
				/*设置外边距:*/
				margin: 20px 0 0 100px;
			}
			
			div{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				background-color: aquamarine;
			}
		</style>
	</head>
	
	<body>
		<div id="dl1">div1</div>
		<div id="dl2">div2</div>
	</body>
</html>

结果展示：
在这里插入图片描述
属性描述

CSS浮动

当某个块标签设置了浮动，就会脱离当前的文档流，后面就会随着浮动的方式进行移动。

float：实现多栏布局
两个属性值：

left：指定对象向左浮动
right：指定对象向右浮动

clear：实现换行
三个属性值：

left：左边不允许出现"浮动"组件
right：右边不允许出现"浮动"组件
both：两边都不允许出现浮动组件

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style>
			#div1{
				width: 100px;
				height: 100px;
				border: 3px solid #000;
				background-color: #0F0;
				float: left;
			}
			#div2{
				width: 100px;
				height: 100px;
				border: 3px solid #000;
				background-color: bisque;
				float: left;
			}
			#div3{
				width: 100px;
				height: 100px;
				border: 3px solid #000;
				background-color: cornflowerblue;
				float: left;
			}
			
			#clear{
				/*CSS的clear属性:clear*/
				/*both:左右两边都不浮动*/
				clear: both;
			}
			
		</style>
	</head>
	
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		<div id="div2">div4</div>
	</body>
</html>

在这里插入图片描述

CSS定位

属性：position

相对定位：针对原来位置的移动方式：relative
绝对定位：针对父元素的位置进行移动的：absolute
固定定位：在当前浏览器的位置不会随着滚动条的移动而移动：fixed

例子：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS定位</title>
		<style>
			div{
				height: 100px;
				width: 100px;
				border: 1px solid #F00;
				
				#dl1{
					background-color: beige;
					position: relative;
					top: 50px;
					left: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div id="dl1">div1</div>
		<div id="dl2">div2</div>
	</body>
</html>

在这里插入图片描述

网页设计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站首页优化</title>
		<style>
			/*logo部分*/
			.logo{
				float: left;
				height: 163px;
				line-height: 80px;
			}
			
			/*超链接部分*/
			a{
				text-decoration: none;
				color: azure;
			}
			
			/*设置两边都不浮动*/
			.clear{
				clear: both;
			}
			
			/*菜单栏部分*/
			.menu{
				background-color: forestgreen;
				float: left;
				width: 15%;
				height: 293px;
				border: 3px solid darkgreen;
			}
			
			/*左边轮廓图*/
			.left{
				float: left;
				width: 45%;
				height: 300px;
			}
			
			/*右侧轮廓图*/
			.right{
				float: left;
				width: 37%;
				/*指定边框*/
				/*border: 1px solid #F00;*/
				height: 300px;
			}
			
			/*商品*/
			.product{
				float: left;
				width: 16%;
				height: 200px;
				text-align: center;
			}
			
		</style>
		
	</head>
	<body>
		
		<div>
			<!--第一部分:LOGO部分 -->
			<div class="logo">
				<img src="img/logo.PNG" />
			</div>
			
			<div class="clear"></div>
			
			<!--商品-->
			<div>
				<!--菜单栏部分div-->
				<div class="menu" align="center">
					<div><h3>新鲜水果</h3></div>
					<div><a href="#">苹果</a></div>
					<div><a href="#">橘子</a></div>
					<div><a href="#">火龙果</a></div>
					<div><a href="#">香蕉</a></div>
					<div><a href="#">葡萄</a></div>
					<div><a href="#">樱桃</a></div>
				</div>
				
				<!--左侧轮廓图-->
				<div class="left">
					<img src="img/橙子.PNG" width="100%" height="100%" />
				</div>
				
				<!--右侧轮廓图-->
				<div class="right">
					<img src="img/桔子.PNG" width="100%" height="100%" />
				</div>
				
				
				<!--s商品部分-->
				<div>
					
				</div>
				<div class="product">
					<img src="img/山竹.PNG" />
					<p>山竹</p>
					<p style="color: red;">$998</p>
				</div>
				
				<div class="product">
					<img src="img/柑橘.PNG" />
					<p>柑橘</p>
					<p style="color: red;">$998</p>
				</div>
				
				<div class="product">
					<img src="img/樱桃.PNG" />
					<p>樱桃</p>
					<p style="color: red;">$998</p>
				</div>
				
				<div class="product">
					<img src="img/火龙果.PNG" />
					<p>火龙果</p>
					<p style="color: red;">$998</p>
				</div>
				
				<div class="product">
					<img src="img/牛油果.PNG" />
					<p>牛油果</p>
					<p style="color: red;">$998</p>
				</div>
				
				<div class="product">
					<img src="img/红心火龙果.PNG" />
					<p>红心火龙果</p>	
					<p style="color: red;">$998</p>
				</div>
				
			</div>
		</div>
		
	</body>
</html>