JavaScript-HTML-CSS Day8 Notes

1、定位的作用理解和总结

说穿了：定位的作用就是灵活的改变标签的位置，让两个标签压在一起都可以。

 

 

2、关于垂直对齐参数的理解：vertical-align

有上图可知，默认情况下。浏览器会把图片和文字是不对齐排布的，一个偏上、一个偏下。

其实就是因为浏览器会把行内块，行内标签都当作文字处理。当成文字处理后，所有的文字

默认都会按照基线(baseline)对齐。基线附图如下：

所以图片就会按照下图，这种基线模式去排列。

 vertical-align这个参数是加在哪个元素上呢？

实际中，是按照谁占的行内块高度大，就给谁加，如下图这种，vertical-align就是加在图片img标签里

img标签里加了 vertical-align: middle 之后，基线下面的小空白就没了。

 

3、对于垂直对齐参数的理解，结合如下代码的注释部分记忆。

<!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>垂直对齐方式</title>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      vertical-align: middle;

      /* 顶对齐：最高内容的顶部 */
      /* vertical-align: top; */

      /* 底对齐：最高内容的底部 */
      /* vertical-align: bottom; */

      /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
      /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
      /* display: block; */
    } 
  </style>
</head>
<body>
  <div>  
    <img src="./images/1.webp" alt="">
    我是谁？我在哪？
  </div>
</body> 
</html>

 

 4、三种定位方式的总结：relative, absolute, fixed

总结：

position: relative

      1. 改变位置的参照物是 自己原来的位置
      2. 不脱标，占位
      3. 标签显示模式特点 不变

position: absolute

      1. 脱标，不占位
      2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
      3. 显示模式特点改变：宽高生效（具备了行内块的特点）

position: fixed

      1. 脱标，不占位
      2. 参照物：浏览器窗口
      3. 显示模式特点 具备行内块特点

 

使用场景

  • 相对定位：常用于稍微调整元素位置，同时保留原来的文档流影响。
  • 绝对定位：常用于创建弹出菜单、工具提示或需要精确定位的元素。
  • 固定定位：常用于创建固定的页眉、页脚或侧边栏，确保在滚动时仍然可见。

 

 

4、关于绝对定位，居中的一种通用写法。

transform: translate(-50%, -50%)

记住这个写法即可

<!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>绝对定位-居中</title>
  <style>
    img {
      position: absolute;
      left: 50%;
      top: 50%;

      /* margin-left: -265px;
      margin-top: -127px; */

      /* 方便： 50% 就是自己宽高的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <img src="./images/login.webp" alt="">
</body>
</html>

 

posted @ 2024-09-29 10:47  AlphaGeek  阅读(12)  评论(0)    收藏  举报