web前端

最新推荐文章于 2023-09-04 15:24:24 发布

--believe

最新推荐文章于 2023-09-04 15:24:24 发布

阅读量101

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_44850917/article/details/104725413

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.新浪案例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 1002px;
			/*height: 1760px;*/
			margin: 0 auto;

		}
		.ad-1{
			position: fixed;
			top: 100px;
			left: 0;
		}
		.ad-2{
			position: fixed;
			top: 100px;
			right: 0;
		}
	</style>
</head>
<body>
	<img src="day4/imgs/ad-l.png" alt="" class="ad-1">
	<img src="day4/imgs/ad-r.png" alt="" class="ad-2">

	<div class="box">
       <img src="day4/imgs/box.png" alt="">
	</div>
</body>
</html>

运行结果：

在这里插入图片描述

2.定位扩展

2.1绝对定位的盒子居中

在使用绝对定位时，要想实现水平居中可以按照下面的方法


left:50%;：让盒子的左侧移动到父级元素的水平中心位置
margin-left:-100px;:让盒子向左移动自身宽度的一半

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*position: relative;*/
			position: absolute;
			/*left 50%*/
			/*margin-left 左走自己宽度一半*/
			width: 200px;
			height: 200px;
			background-color: pink;
			/*margin: auto;*/
			left: 50%;
			margin-left: -100px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

2.2堆叠顺序(z-index)

在使用定位布局时，可能会出现 盒子重叠的情况
加了定位的盒子，默认后来居上，后面的盒子会压住前面的盒子
应用z-index层叠等级属性可以调整盒子的层叠顺序

z-index 特性如下：
1.属性值：正整数，负整数，或0,默认值时0,数字越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
3.数字后面不能加单位（这点和font-weight相同）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.damao,
		.ermao,
		.sanmao{
			position:absolute;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.ermao{
			top: 50px;
			left: 50px;
			z-index: 1;
			background-color: green;
		}
		.sanmao{
			top: 100px;
			left: 100px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="sanmao"></div>
</body>
</html>

运行结果：

在这里插入图片描述

2.3定位改变display属性

改变显示模式有下面三种方式

可以用inline-block转换为行内块
可以用浮动float 默认转化为行内块
绝对定位和固定定位也和浮动类型类似，默认转换的特性为行内块

所以：一个行内的盒子，如果加了浮动，固定定位，绝对定位，不用转换就可以给这个盒子高度等
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*块级元素不给宽度 默认通栏显示*/
			/*1.display: inline-block;可以转换为行内块*/
			/*行内块，不给width默认的是行内字的宽度*/
			/*2.浮动也能转换为行内块*/
			/*float: left;*/
			/*3.绝对定位（固定定位）也能转换*/
			position: absolute;
			height: 100px;
			background-color: pink;

			z-index: 1;
		}
		span{
			position: absolute;
			width: 300px;
			height: 300px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div>天王盖地虎</div>
	<span></span>
</body>
</html>

案例完善

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
		.box{

			width: 1002px;
			/*height: 1760px;*/
			margin: 0 auto;
			margin-top: 60px;

		}
		.ad-1{
			position: fixed;
			top: 100px;
			left: 0;
		}
		.ad-2{
			position: fixed;
			top: 100px;
			right: 0;
		}
		.top{
			width: 100%;
			position: fixed;
			top: 0;

			height: 44px;
			/*background-color: pink;*/
			text-align: center;

		}
	</style>
</head>
<body>
	<div class="top">
<img src="day4/imgs/top.png" alt="">
	</div>

	<img src="day4/imgs/ad-l.png" alt="" class="ad-1">
	<img src="day4/imgs/ad-r.png" alt="" class="ad-2">

	<div class="box">
       <img src="day4/imgs/box.png" alt="">
	</div>
</body>
</html>

在这里插入图片描述

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端

1.新浪案例：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 1002px; /*height: 1760px;*/...
复制链接

扫一扫

专栏目录