定位知识总结

最新推荐文章于 2024-07-13 10:22:10 发布

诗风乐雨

最新推荐文章于 2024-07-13 10:22:10 发布

阅读量86

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45119312/article/details/124268861

版权

1.伪元素

元素的特殊位置 ::before ::after ::first-line ::first-letter

2.伪类

:hover
:active
:visited
:link

3.定位

相对定位

3.1相对定位

1.1 参考点：元素自身在文档流中的位置
1.2 是否脱离文档流：无
1.3 默认位置：原来文档流中的位置
1.4 层级会默认提升可以使用 z-index 调整
1.5 使用场景：对元素位置进行微调

3.2固定定位

1.1 参考点：浏览器可视窗口
1.2 是否脱离文档流：脱离
1.3 默认位置：原来文档流中的位置
1.4 层级会默认提升可以使用 z-index 调整
1.5 使用场景：相对于浏览器窗口进行定位

3.3绝对定位

1.1 参考点：离自己最近非static的祖先元素找不到：最初包含快
1.2 是否脱离文档流：脱离
1.3 默认位置：原来文档流中的位置
1.4 层级会默认提升可以使用 z-index 调整
1.5 使用场景：子绝父相

3.4sticky定位：

1.参考点基于用户的滚动位置来定位。
2.不脱离文档流
3.它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
4.元素会受到 top, bottom, left, right影响。
5.使用场景特定场景使用

5.static定位：

1.参考点 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
2.不脱离文档流
3.
4.静态定位的元素不会受到 top, bottom, left, right影响。
5.使用场景

4.定位元素居中

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         .box {
             width: 100px;
             height: 100px;
             background-color: black;
             position: absolute;
             /* left: 0;
             right: 0;
             top: 0;
             bottom: 0;
             margin: auto auto; */
             left: 50%;
             top: 50%;
             /* margin-top: -50px;
             margin-left: -50px; */
             /* 参数  x轴方向   参数2  y轴方向 */
             transform: translate(-50%,-50%);
         }
     </style>
 </head>
 
 <body>
     <div class="box">
 
     </div>
 </body>
 
 </html>

诗风乐雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定位知识总结

1.伪元素元素的特殊位置 ::before ::after ::first-line ::first-letter 2.伪类 :hover :active :visited :link 3.定位相对定位 3.1相对定位 1.1 参考点：元素自身在文档流中的位置 1.2 是否脱离文档流：无 1.3 默认位置：原来文档流中的位置 1.4 层级会默认提升可以使用 z-index 调整 1.5 使用场景：
复制链接

扫一扫