DIV+css布局

最新推荐文章于 2022-04-23 16:18:37 发布

wj18740503137

最新推荐文章于 2022-04-23 16:18:37 发布

阅读量167

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/wj18740503137/article/details/108933416

版权

DIV是块级元素；（块级元素是占用整个一行）span是内联元素；（内联元素是占用文本所需的一块)

具体效果如图所示：

盒模型：margin（盒子外边框） border（盒子边框）padding（盒子内边框）

盒模型主要用来控制各边框以及各块之间的布局

布局相关属性：

定位方式：1，relative 正常定位 2，adsolute 根据父元素进行定位 3，fixed 根据浏览窗口进行定位 4，static 没有定位 5.inherit 继承。

adsolute根据父元素进行定位

具体代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div+css布局</title>
		<style type="text/css">
				body{
					padding:0; margin:0;
				}
				.diva{
					width:300px; height:300px;
					background-color: green;
					position: relative;
					top: 10px;left:10px;
				}
				span{
					position: absolute;
					background-color:red;
					color: white;
					top: 30px;
					left: 10px;
				}
				
			</style>
	</head>
	<body>
		<div class="diva"></div>
		<span> 浏览次数555</span>  <!-- 相对于父元素 -->
		
	</body>
</html>

效果如下图所示；

fixed 根据浏览窗口进行定位

具体代码如图所示;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div+css布局</title>
		<style type="text/css">
				body{
					padding:0; margin:0;
				}
				.diva{
					width:300px; height:300px;
					background-color: green;
					position: relative;
					top: 10px;left:10px;
				}
				span{
					position: absolute;
					background-color:red;
					color: white;
					top: 30px;
					left: 10px;
				}
				.fixed{
									position: absolute;
									background-color:red;
									color: white;
									top: 100px;
									left: 0px;
								}

			</style>
	</head>
	<body>
		<div class="diva"></div>
		<span> 浏览次数555</span>  <!-- 相对于父元素 -->
		<div class="fixed">  <!-- fixed 相对于浏览器窗口 -->
					<p>联系电话：18740503137</p>
					<p>联系QQ：2464186900</p>
					<p>联系地址：陕西咸阳</p>
				</div>

	</body>
</html>

运行效果如图所示：

4，static 没有定位

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div+css布局</title>
		<style type="text/css">
				body{
					padding:0; margin:0;
				}
				.diva{
					width:300px; height:300px;
					background-color: green;
					position: relative;
					top: 10px;left:10px;
				}
				span{
					position: absolute;
					background-color:red;
					color: white;
					top: 30px;
					left: 10px;
				}
				.fixed{
									position: static;
									background-color:red;
									color: white;
									top: 100px;
									left: 0px;
								}

			</style>
	</head>
	<body>
		<div class="diva"></div>
		<span> 浏览次数555</span>  <!-- 相对于父元素 -->
		<div class="fixed">  <!-- fixed 相对于浏览器窗口 -->
					<p>联系电话：18740503137</p>
					<p>联系QQ：2464186900</p>
					<p>联系地址：陕西咸阳</p>
				</div>

	</body>
</html>

运行结果如图所示：