了解css（div+网页布局）

最新推荐文章于 2024-01-15 12:13:32 发布

jazhenglufang

最新推荐文章于 2024-01-15 12:13:32 发布

阅读量192

点赞数

分类专栏： html+css 文章标签： div

本文链接：https://blog.csdn.net/jazhenglufang/article/details/102649981

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、div、span
1、div和span在整个html中是没有任何意义，它们的存在是为了应用css样式；div和span的区别在于div是块级元素，span是内联元素。
如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div + css 布局</title>
	</head>
	<style type="text/css">	
		div{
			background: #00FFFF;
		}
		span{
			background: #FF6600;
		}
	</style>
	<body>
		<div> 块级元素</div>
		<br />
		<span> 内联元素</span>
		<span> 内联元素</span>
		<span> 内联元素</span>
	</body>
</html>

效果显示：
在这里插入图片描述
二、盒模型

	.div1{
			background: #00FFFF;
			height:100px;/* 盒子高度 */
			width: 100px;/* 盒子宽度 */
			margin:5px ;/* 盒子外边距 */
			padding: 3px;/* 盒子内边距 */
			border: solid #000000 1px;/* 盒子的边框宽度 */
		}

效果展示：
在这里插入图片描述
三、布局相关的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div + css 布局</title>
	</head>
	<style type="text/css">
		.div1{
			background: #00FFFF;
			height:100px;/* 盒子高度 */
			width: 100px;/* 盒子宽度 */
			/* 1)position定位方式：relative(正常定位),
			absolute(根据父元素进行定位)
			 fixed(根据浏览器窗口进行定位),
			 static(没有定位),
			 inherit(继承)*/
			position: absolute; 
			/* 2)定位，需要配合position属性一起用才会显示效果:left(左),reght(右),top(上),bottom(下) */
			top: 150px;
			/* 3)z-index 层覆盖先后顺序(优先级):取值范围:0-1之间,auto(自动) */
			z-index: auto;
			/* 4)display显示属性:none(层不显示),
			block(块状显示，在元素后面换行，显示下一个块元素) 
			inline(内联显示，多个块可以显示在一行内)*/
			display: inline;
			/* 5)float浮动属性 :left(左浮动) right(右浮动)*/
			float: right;
			/* 6)清除浮动 */
			clear: both;
			/* 7)溢出处理:hidden(隐藏超出层大小的内容),scroll(无论内容是否出去层大小都添加滚动条),
			auto(超出时自动添加滚动条) */
			overflow: auto;
		}
	</style>
	<body>
		<div class="div1">div1的背景颜色</div>
	</body>
</html>