Web学习第五天——页面布局（盒子模型、浮动）

最新推荐文章于 2023-05-08 22:11:47 发布

C先生

最新推荐文章于 2023-05-08 22:11:47 发布

阅读量932

点赞数 2

分类专栏：学习笔记文章标签： Web前端 CSS教程盒子模型浮动（float） CSS页面布局

本文链接：https://blog.csdn.net/hjkuuyyg/article/details/90244889

版权

学习笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Web学习第五天——页面布局（盒子模型、浮动）

一、盒子模型
二、浮动（float）

一、盒子模型

每一个元素（标签）都可以看作一个盒子，在页面中，盒子之间相互叠加组合形成漂亮的页面。
那如何理解这个盒子呢？
把一个标签比喻为一个盒子，这个盒子里面装的东西可以看作标签的内容（比如图片，文字等等，内容的大小通过width和height属性设置），标签的内容和盒子内壁的距离可以看作内边距（padding），盒子的厚度可以理解为边框的厚度，盒子和盒子之间的距离就叫做外边距（margin），下面用图片来说明。
在这里插入图片描述

<style type="text/css">
	*{margin: 0px; border 0px; padding: 0px;}
	body{
		background: cyan;
	}
	#box1{
		background: red;/*背景颜色*/
		width: 365px;/*图片的宽高色*/
		height: 136px;
		padding: 10px;/*图中红色就是padding的大小*/
		border: 20px solid blue; /*图中蓝色是边框的大小*/
		margin: 30px;/*图中边框到浏览器边框的距离就是外边距*/
	}
}

HTML源码：
<body>
	<div id="box1">
	<img src="img/as.bmp"/>
	</div>
</body>

注意：两个盒子之间的外边距margin左右相加，上下取最大值

二、浮动（float）

使元素脱离正常的文档流，可以浮在别的元素上面，实现一些复杂的显示效果。

案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 200px;
				background: cyan;
			}
			#d2{
				width: 300px;
				height: 300px;
				background: black;
				float: left;
			}
			#d3{
				width: 400px;
				height: 400px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
	</body>
</html>

运行效果
在这里插入图片描述
运行效果解释：
d1未浮动，仍然独占一行
d2浮动，显示在上层了
d3未浮动，但是因为d2上浮了，所有d3上移到d2之前的位置了