绝对定位和相对定位以及伪元素

Code

  1. HTML
<!DOCTYPE html>
<html lang="zh">

<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>相对定位与绝对定位以及伪元素</title>
  <link rel="stylesheet" href="main.css">
  <script src="./main.js"></script>
</head>

<body>
  <div class="img-container">
    <img src="../asserts/images/pixiv 102215084 p2.png" alt="小兔娘">
  </div>
</body>

</html>
  1. CSS
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* flex布局：使居中 */
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.img-container {
  width: 50vw;
  height: 50vh;
  /* 设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用 */
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  /* 图片填充img方式，等比缩小还是铺满 */
  object-fit: fill;
}

.img-container::before {
  /* 
      绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角，
      如果没有父元素采用相对定位，则相对于html标签 
  */
  content: '';/* 如果不需要文本，必须写上这行 */
  position: absolute;
  /* 尺寸和位置一定要写 */
  right: 5rem;
  bottom: 5rem;
  width: 48px;
  height: 48px;

  background-image: url("../asserts/images/like.svg");
  background-size: contain;
}
  1. JAVASCRIPT
 // 没有用到 js

Result

image
用到的图片：

  1. image

Conclusion

  1. 设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用
  2. 绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角
  3. 如果没有父元素采用相对定位，则相对于html标签，元素会出现在浏览器窗口的指定位置
  4. 注意伪类和伪元素的区别

Reference

  1. https://q.cnblogs.com/q/143685/

New Discovery

  1. svg标签可以直接在页面上展示，我从来都没有试过这么写
<svg t="1692856208711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5360" width="48" height="48"><path d="M724.992 58.026667c-84.309333 0-162.474667 42.325333-214.016 111.957333C459.434667 100.352 380.928 58.026667 296.96 58.026667 145.066667 58.026667 21.504 193.194667 21.504 359.082667c0 98.986667 44.373333 168.277333 79.872 224.256C204.8 745.472 464.554667 947.2 475.477333 955.733333c10.581333 8.192 22.869333 12.288 35.498667 12.288 12.288 0 24.917333-4.096 35.157333-12.288 10.922667-8.533333 271.018667-210.261333 374.101333-372.394667 35.498667-55.978667 79.872-125.269333 79.872-224.256C1000.106667 193.194667 876.544 58.026667 724.992 58.026667L724.992 58.026667 724.992 58.026667 724.992 58.026667zM724.992 58.026667" fill="#d81e06" p-id="5361"></path></svg>
posted @ 2023-08-24 14:32  echo_lovely  阅读(89)  评论(0)  编辑  收藏  举报