CSS定位、转换、过渡

CSS定位

定位的作用
用来指定一个元素在网页上的位置
使用方法
position属性 属性值：
static relative abso lute fixed sticky

定位-static

tatic是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

定位-relative

让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

相对定位不脱标

相对定位，就两个作用：

（1）微调元素

（2）做绝对定位的参考，子绝父相

简单的来讲，相对定位默认以盒子的左上角为参照点；

如果给出了某些方向的相对值（正值），就表示，原来的盒子在那些方向的组合上。

如果为负值，则与其相反方向的正值相同，例如：left: 200px等价于right: -200px。

定位-absolute

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

绝对定位的盒子脱离了标准文档流。

所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

定位-fixed

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

定位-sticky

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）

CSS3-伪类

伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去

伪元素

对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中

CSS3-2D转换

CSS3是什么

• CSS3 是最新的 CSS 标准
• CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3-过渡

CCS3过渡介绍

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

以上就是我个人对CSS定位、转换、过渡的理解，希望我分享的这些可以对您起到作用。

感谢观看