day06定位、定位居中技巧、z-index、 vertical-align、 overflow、opacity

最新推荐文章于 2021-11-30 21:59:51 发布

WEB-

最新推荐文章于 2021-11-30 21:59:51 发布

阅读量203

点赞数

文章标签：定位 css html

本文链接：https://blog.csdn.net/weixin_45637649/article/details/111184375

版权

文章目录

day06
定位

day06

定位

定位的应用场景和基本原理

定位的原理

在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置

position

static 默认静态定位
- 默认的定位位置，不写就是静态定位
relative 相对定位
- 相对于自己本身移动
absolute 绝对定位
- 子绝父相（当找不到父标签有相对定位的时候，就会继续向上找）
- 相对于父标签（父标签相对定位，子标签绝对定位）
fixed 固定定位
- 相对于浏览器窗口
- 不会随着滚动条滚动

总结一下position

定位是否脱标参考点参数
static 否无
relative 否自己本身 left,right,top,bottom
absolute 是父标签（子绝父相） left,right,top,bottom
fixed 是浏览器窗口 left,right,top,bottom

定位	是否脱标	参考点	参数
static	否	无
relative	否	自己本身	left,right,top,bottom
absolute	是	父标签（子绝父相）	left,right,top,bottom
fixed	是	浏览器窗口	left,right,top,bottom

定位的技巧与层级关系

居中技巧

1、方案 1 margin 负间距（1）必需知道该 div 的宽度和高度；（2）然后设置位置为绝对位置；（3）距离页面窗口左边框和上边框的距离设置为 50%，这个 50% 就是指盒子左上角顶点距离页面左、上边界的 50%；（4）最后将该 div 分别左移和上移，使整个盒子居中，左移和上移的大小就是该 DIV( 包括 border 和 padding) 宽度和高度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            position: fixed;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

  
- 2、方案 2 margin:auto 实现绝对定位元素的居中（该方法兼容 ie8 以上浏览器）。 此方案代码关键点： （1）上下左右均 0 位置定位； （2）margin: auto。

- ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          * {
              padding: 0;
              margin: 0;
          }
          .box {
              width: 300px;
              height: 200px;
              background-color: gold;
              margin: auto;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
          }
      </style>
  </head>
  <body>
      <div class="box"></div>
  </body>
  </html>

定位标签的层级属性 z-index

1.默认定位的标签一定在没加定位的标签上方。
2.默认是0，可以设置1、2、3、4，也可以是负值-1、-2，数值大的在上方
3.z-index属性必须要配合定位使用，否则无效

常见属性

vertical-align 属性设置标签的垂直对齐方式。利用这个属性做图文对齐方式
- baseline 默认。标签放置在父标签的基线上。
- top 把标签的顶端与行中最高标签的顶端对齐。
- middle 把此标签放置在父标签的中部。
- bottom 把标签的底端与行中最低的标签底端对齐。

图片下间隙解决

去除图片下间隙的办法有很多，常用的有 3 种：

设置父盒子字号为 0
- ```
.wrap{
   font-size: 0;  
}
```
改变图片的 display
- ```
img{
   display: block;  
}
```

给图片设置垂直对齐方式

img{
   vertical-align: middle;// 设置为任意不为 baseline 的值都可以 
 }

显示与隐藏
- 盒子显示：
  - display:block;
- 盒子隐藏：
  - display:none：隐藏该元素并且该元素所占的空间也不存在了。
  - visibility:hidden ：隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。
overflow 属性
- overflow 属性规定当内容溢出标签框时的显示方式，包括水平方向和垂直方向。
- overflow-x 只包括水平方向。
- overflow-y 只包括垂直方向。
  - visible 默认值。内容不会被修剪，会呈现在标签框之外。
  - hidden 内容会被修剪，并且其余内容是不可见的。
  - scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  - auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

透明度属性 (opacity,rgba())

opacity
- 1、兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。
- 2、使用说明：设置 opacity 元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。
rgba()
- 1、兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。
- 2、使用说明：设置颜色的不透明度，一般用于调整 background-color、color 等的不透明度