CSS--网页样式布局(二)

最新推荐文章于 2022-06-22 00:05:24 发布

CS_GaoMing

最新推荐文章于 2022-06-22 00:05:24 发布

阅读量232

点赞数

分类专栏： HTML 文章标签： CSS

本文链接：https://blog.csdn.net/CS_GaoMing/article/details/88726449

版权

定位

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

position属性指定了元素的定位类型，其属性值有五种：
- static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  静态定位的元素不会受到 top, bottom, left, right影响。
- relative：相对定位元素的定位是相对其正常位置。
- fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
- absolute：绝对定位的元素的位置相对于最近的已定位父元素，absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
- sticky：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

样例一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">		
	.con{
      

		/*大小设置*/
		width:100px;
		height:100px;

		/*背景颜色设置*/
		background-color:gold;

		/*边框设置*/
		margin:50px auto 0;

		/*定位方式.*/
		position:relative;

		/*边角圆滑像素，大于边框的一半像素盒子即成圆形.*/
		border-radius:14px;
	}

	.box{
      
		width:28px;
		height:28px;
		background-color:red;
		color:#fff;

		/*文本对齐方式*/
		text-align:center;
		line-height:28px;

		/*定位方式，保证右上角为小圆圆心位置*/
		position:absolute;
		left:86px;
		top:-14px;

		/*大于等于14px，即可锐化为圆*/
		border-radius:14px;
	}
</style>
</head>
<body>
	<!-- 盒子嵌套 -->
	<div class="con">
		<div class="box">5</div>
	</div>
</body>
</html>

如图所示：

样例二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>这是网页标题名称</title>
	<style type="text/css">
		
		.menu{
    
			height:80px;
			background-color:gold;
			position:fixed;
			width:960px;
			top:0px;
			left:50%;
			margin-left:-480px;
		}

		p{
    
			text-align:center;
		}

		.popup{
    
			width:500px;
			height:300px;
			border:1px solid #000;
			background-color:#fff;
			position:fixed;
			left:50%;
			margin-left:-251px;
			top:50%;
			margin-top:-151px;
			z-index:9999;
		}
		
		.popup h2{
    
			background-color:gold;
			margin:10px;
			height:40px;
		}

		.mask{
    
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			left:0;
			top:0;
			opacity:0.5;
			z-index:9998;
		}

		.pop_con{
    
			display:block;
		}
	</style>
</head>
<body>
	<div class="menu">菜单栏</div>
	
	<div class="pop_con">
		<div class="popup">
			<h2>弹窗</h2>	
		</div>
		<div class="mask"></div>
	</div>

	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落

最低0.47元/天解锁文章

CS_GaoMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS--网页样式布局(二)

定位文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。position属性指定了元素的定位类型，其属性值有五种：static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。...
复制链接

扫一扫

专栏目录