CSS定位，2D转换和过渡

最新推荐文章于 2022-06-24 18:33:08 发布

红烧code

最新推荐文章于 2022-06-24 18:33:08 发布

阅读量247

点赞数

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

本文链接：https://blog.csdn.net/qq_51352578/article/details/119936511

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS定位

position

1. static

静态定位

选择器{
    position:static;
}

静态定位是默认的定位方式
静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

2. relative

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

选择器{
    position:static;
}

特点：

元素原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式来对待它。相对定位并没有脱标，它最典型的的应用是给绝对定位当参考的。

3. absolute

绝对定位

绝对定位是指元素在移动位置的时候，是相对于它的祖先元素来说的

选择器{
    position:absolute;
}

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器(document)为准进行定位
如果祖先元素有定位(relative, absolute, fixed)，则以最近一级有定位的祖辈元素为参考进行定位
与相对定位不同，使用绝对定位将失去原来在标准流中占有的位置

4. fixed

固定定位

选择器{
    position:fixed;
}

使用固定定位的元素的参考是浏览器当前的可视界面

特点：

跟父元素的位置没有任何关系
不随滚动条而滚动
固定定位不再占有原先的位置

所以固定定位可以看作是一种特殊的绝对定位

5. sticky

粘性定位

粘性定位可以看作是相对定位与固定定位的混合

语法：

选择器{
    position:sticky;
    top:10px
}

特点：

以浏览器的可视界面作为参考移动元素（类似固定定位）
粘性定位会占有原先的位置（类似相对定位）
必须添加top，bottom，left，right其中一个结合使用
与页面滚动搭配使用

6. 子绝父相

顾名思义，子级是绝对定位的话，父级要用相对定位

子级绝对定位，不会占有位置，所以可以放到父元素里面的任何一个地方，不会影响其他的兄弟盒子
父盒子需要添加定位，以限制子盒子在父盒子内部的显示
父盒子布局时，需要占有位置，因此父元素只能使用相对定位

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子级不需要占有位置，则是绝对定位

7. 定位的叠放次序

在使用定位布局时，可能会出现盒子重叠的状况；此时，可以使用z-index来控制盒子的前后顺序

语法：

选择器{
    z-index:1;
}

z-index的数值可以是正整数，负整数，或者是0，默认值是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来者居上
数字后面不能加单位
只有定位的盒子才会有z-index属性

8. 定位的特殊特性

绝对定位、固定定位与浮动相似。

行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或固定定位，如果不指定宽度和高度也不从父辈继承，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

浮动元素，绝对定位，固定定位的元素都不会触发外边距（margin）合并

绝对定位（和固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片，绝对定位（和固定定位）会完全压住下面标准流所有的内容
浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的。文字会围绕浮动元素

总结

在这里插入图片描述

2D转换

transform

1.translate

使用方法：

transform:translate(50px,50px)			//以当前位置为参考，分别向右，向下移动50px

transformX(50px)			//以当前位置为参考，向右移动50px

transformY(50px)			//以当前位置为参考，向下移动50px

说明：

translate的最大优点：不会引起其他元素的位置的变换
translate(50%,50%)的百分比单位是以自身大小为参考的
translate对行内标签是没有作用的

2. rotate

语法：

transform:rotate(45deg)	//顺时针旋转45°，顺时针为正，逆时针为负

即让元素在2D平面内进行顺时针或者逆时针旋转。

设置旋转中心：

transform-origin：10px 10px		//旋转中心是距左边界10px,上边界10px
transform-origin： left top		//以左上角为旋转中心
transform-origin: 30% 40%	  //默认是transform-origin 50% 50%

3. scale

transform:scale(2,3)	//宽放大两倍，高放大三倍
transform:scale(2)	//宽、高均放大两倍

scale缩放最大的优点：

默认以中心点为缩放中心，可以设置转换中心点
使得元素的缩放不会改变其他元素的位置

CSS过渡

语法：

transition: 要过渡的属性  花费时间  运动曲线  延迟时间

属性：要过渡的CSS属性，宽度、高度、背景颜色、内外边距等等都可以，如果想要所有的属性都变化过渡，直接用一个“all”代替即可。
花费时间：单位是秒（s），必须写单位，比如0.5S，’.'可以省略，写成 ‘.5S’
运动曲线：默认是ease（可以省略）
延迟时间：单位是秒（s），必须写单位，比如0.5S，’.'可以省略，写成 ‘.5S’，可以设置延迟触发时间，默认是0S，可以省略

几种运动曲线：

linear
ease
ease-in
ease-out
ease-in-out
依次对应图片：
过渡的添加对象：谁做过渡给谁加

进度条动画制作

在这里插入图片描述

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			html {
				height: 100%;
			}

			
			.frame {
				position: absolute;
				left: 50%;
				top: 30%;
				margin-left: -250px;
				margin-top: -10px;
				
				width: 500px;
				height: 20px;
				padding: 1px;
				border: 2px solid red;
				border-radius: 10px;
			}

			.frame .bar {
				width: 0;
				height: 100%;

				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;

				background-color: #FF0000;
				transition: all 0.7s ease-in-out 0.2s;
			}

			.frame:hover .bar {
				width: 100%;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		</style>


	</head>
	<body>
		<div class="frame">
			<div class="bar"></div>
		</div>




	</body>
</html>

红烧code

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS定位，2D转换和过渡

CSS定位position1. static静态定位选择器{ position:static;}静态定位是默认的定位方式静态定位按照标准流特性摆放位置，它没有边偏移静态定位在布局时很少用到2. relative相对定位相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。选择器{ position:static;}特点：元素原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式来对待它。相对定位并没有脱标，它最典型的的应用是给绝对定位当参考的。
复制链接

扫一扫