WEB前端-定位

最新推荐文章于 2024-08-15 15:12:55 发布

蒲竺

最新推荐文章于 2024-08-15 15:12:55 发布

阅读量1.8k

点赞数 8

分类专栏： web前端文章标签：前端 html

本文链接：https://blog.csdn.net/syh_syh0321/article/details/127527643

版权

本文详细介绍了WEB前端的定位技术，包括静态定位、相对定位、绝对定位和固定定位，通过案例展示了如何实现盒子居中、图片加logo和轮播图布局。同时，探讨了CSS3中的新特性，如内减模式、属性选择器、2D变换和过渡效果，帮助开发者深入理解定位和CSS3的区别。

摘要由CSDN通过智能技术生成

WEB前端-定位

1.让盒子水平垂直居中（水平居中，垂直也居中）

一、定位

定位的使用：

1.4种定位方式：静态、相对、绝对、固定

2.4种边偏移属性：left、right、top、bottom

注意：偏移值准确的理解是“距离什么位置有多少像素” 。如 top:100px; 距离顶部为100像素（向下走）

1.静态定位

所有标准流都是静态定位

语法：position:static

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:static;/* 设置静态定位 */
			top:20px;/* 设置边偏移 */
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.工作中用的比较少，因为加了静态定位，元素也是标准流

2.偏移值对静态定位无效

使用场景：通常是将已经设置过定位的元素还原成标准流

我们以后所说的定位不包含静态定位

2.相对定位

相对于自身在标准流的位置进行定位移动

语法：position：relative

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:relative;/* 设置相对定位 */
			top:20px;/* 设置边偏移 */
			left:30px;
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置

2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在肉体永驻）

3.可以盖在标准流的上方

使用场景：微调元素和配合绝对定位来实现效果

3.绝对定位

从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止

语法：position:absolute

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:absolute;/* 设置绝对定位 */
			top:20px;/* 设置边偏移 */
			left:30px;
		}
		.box1{
			width:200px;
			height:200px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
</body>

效果图

总结：

1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html

2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间

3.margin:auto对于设置过绝对定位的元素不起作用

4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义

使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）

案列

1.让盒子水平垂直居中（水平居中，垂直也居中）

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			border:1px solid #000;
			position:absolute;/* 设置绝对定位 */
			top:50%;/* 设置上边偏移 */
			margin-left:-50px;/* 往左边移动自身宽度的一般 */
			left:50%;/* 设置做边偏移 */
			margin-top:-50px;/* 往上面移动自身高度的一半 */
		}
	</style>
</head>