14.css+div-页面布局-定位

最新推荐文章于 2021-04-20 17:58:17 发布

白山茶ι

最新推荐文章于 2021-04-20 17:58:17 发布

阅读量286

点赞数 1

分类专栏： web入门教程文章标签： web

本文链接：https://blog.csdn.net/Carol_x/article/details/103173070

版权

web入门教程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.position属性

属性值	描述
static	正常流（默认值）元素在页面中正常出现，并作为页面流的一部分
relative	相对定位，相对于其正常位置进行定位，并保持其未定位前的形状及所占空间
absolute	绝对定位，相对于浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位
fixed	固定定位，相对于浏览器窗口进行定位，将元素从页面流中完全删除后，重新定位，当拖拽页面滚动条时，该元素不会随之滚动

默认的静态定位
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试position属性</title>
<style type="text/css">
.top {
	background: blue;
	border: 2px solid blue;
	padding: 20px;
}
.footer{
background:blue;
padding:20px;
}
.content {
	background: orange;
	padding: 15px;
	position: static;/*默认的静态定位*/
	border: 1px dashed black;
}

#a, #b {
	padding: 10px;
	background: white;
	border: 1px dashed black;
}
</style>
</head>
<body>
	<div class="top"></div>
		<div class="content">
			<div id="a">box-1</div>
			<div id="b">box-2</div>
		</div>
		<div class="footer"></div>
</body>
</html>

相对定位
在这里插入图片描述

.content {
	background: orange;
	padding: 15px;
	/*position: static;/*默认的静态定位*/
	position:relative;
	margin-left:50px;
	margin-top:50px;
	border: 1px dashed black;
}

绝对定位
在这里插入图片描述

.content {
	background: orange;
	padding: 15px;
	/*position: static;/*默认的静态定位*/
	/* position:relative;
	margin-left:50px;
	margin-top:50px; *//*相对定位测试*/
	position:absolute;
     margin:70px;
	border: 1px dashed black;
}

固定定位
在这里插入图片描述

.content {
	background: orange;
	padding: 15px;
	/*position: static;/*默认的静态定位*/
	/* position:relative;
	margin-left:50px;
	margin-top:50px; *//*相对定位测试*/
	/* position:absolute;
     margin:70px;
	border: 1px dashed black; *//*绝对定位测试*/
	position:fixed;
}

clear属性

属性值	描述
left	清除左侧浮动产生的影响
right	清除右侧浮动产生的影响
both	清除两侧浮动产生的影响
none	默认值，允许浮动元素出现在两侧

display属性

属性值	描述
none	将元素设为隐藏
block	将元素显示为块级元素，此元素前后会带有换行符
inline	默认，此元素会被显示为内联元素，元素前后没有换行符
inline-block	将元素显示为行内快级元素
visible	将元素设为可见状态
hidden	将元素设为隐藏状态，被隐藏的元素仍然占原来空间

cursor属性
在这里插入图片描述
示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>典型布局</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

#div1 {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	height: 600px;
	border: 2px solid black;
}

#bannerDiv {
	width: 500px;
	height: 100px;
	border: 1px solid black;
	line-height: 100px;
	text-align: center;
}

#navigationDiv {
	width: 500px;
	height: 30px;
	border: 1px solid black;
	line-height: 30px;
	text-align:center;
}

#foucsDiv {
	width: 500px;
	height: 150px;
	background: orange;
	border: 1px solid yellow;
	line-height: 150px;
	text-align:center;
}

#left {
	float:left;
	border: 1px solid yellow;
	width: 250px;
	height: 150px;
}

#right {
	float: left;
	width: 250px;
	height: 150px;
}

#clear {
	clear: both;
}
 
#content {
	width: 500px;
	height: 250px;
	border: 1px solid black;
	line-height: 250px;
	background-color:#F2F2F2;
}

#a {
	width: 165px;
	height: 250px;
	float: left;
	line-height: 250px;
	border: 1px solid black;
}

#b {
	width: 165px;
	height: 250px;
	float: left;
	line-height: 250px;
	border: 1px solid black;
}

#c {
	width: 166px;
	height: 250px;
	float: left;
	line-height: 250px;
	border: 1px solid black;
}

#class {
	width: 500px;
	height: 50px;
	border: 1px solid black;
	line-height: 50px;
	text-align: center;
}
</style>
</head>
<body>
	<div id="div1">
		<div id="bannerDiv">网站头部（公司log等）</div>
		<div id="navigationDiv">导航</div>
		<div id="foucsDiv">
			<div id="left">焦点内容（左）</div>
			<div id="right">焦点内容（右）</div>
		</div>
		<div class="clear"></div>
		<div id="content">
			<div id="a">主体内容一</div>
			<div id="b">主体内容二</div>
			<div id="c">主体内容三</div>
		</div>
		<div id="class">网站底部</div>
	</div>
</body>
</html>

白山茶ι

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14.css+div-页面布局-定位

1.position属性属性值描述static正常流（默认值）元素在页面中正常出现，并作为页面流的一部分relative相对定位，相对于其正常位置进行定位，并保持其未定位前的形状及所占空间absolute绝对定位，相对于浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位fixed固定定位，相对于浏览器窗口进行定位，将元素从页面流中完全删除后，...
复制链接

扫一扫

专栏目录