Css第五天_css在不脱标情况下设置元素位置-CSDN博客

本文链接：https://blog.csdn.net/A_Liyulong/article/details/124071209

1，定位的作用

一个标签上压一个标签，

1.1定位的使用步骤

属性名：position

常见属性值：static 静态定位；relative 相对定位； absolute绝对定位；

设置偏移值方向：数字+px （偏移值设置方向按就近原则，水平垂直方向只要设置各一个）

水平，垂直方向同时书写左右按左，上下同时按下。

1.2定位的写法，

静态定位就是标准流。（不脱标，占位）

<style>
  .box {
    position:static;
    top:200px;
    left:200px;
  }
</style>
......
<p>内容</p>
<div class="box">需要定位的内容</div>
<p>内容</p>
<p>内容</p>

相对定位：占有原有位置，参考原有位置进行移动（不脱标，占位）

绝对定位：以非静态定位的父元素进行定位移动。（脱标，不占位；改变标签的显示模式特点：具备行内块的特点）

解释：找父级元素有定位按父级元素进行定位，父级元素没有定位的按浏览器进行定位

子绝父相定位：就近的找定位的父级，如果逐层查找不到父级定位，就按浏览器进行定位。（显示结果子标签在标签上）

2.3绝对定位的居中

绝对定位的盒子不能设置版心居中。

定位盒子需要居中，先挪到中间，在进行调整

第一种写法方式：

<style>
  .box {
    position:absolute；
    top:50%;
    margin-top：-200px；
    left:50%;
    margin-left：-200px
    
    weight：400px；
    height：400px；
  }
</style>
......
<div class="box">需要居中绝对定位的内容</div>

第二种写入方式：

修改盒子宽度的过程中不需要频繁修改代码。

<style>
  .box {
    position:absolute；
    top:50%;
    left:50%;
    transform：translate」(-50%,-50%)
    
    weight：400px；
    height：400px；
  }
</style>
......
<div class="box">需要居中绝对定位的内容</div>

2.固定-定位（类似表格的冻结首行）position: fixed;

特点：脱标，不占位置；改变位置已浏览器窗口为参考。

3,定位的层级关系

标准流<浮动<定位。

同为固定定位的盒子，定位的盒子后来者居上，后面的覆盖前面的的。

如果想前面的显示在上面有两种办法：1，把这个标签放到后面（一般不采用）；2，给对应的选择器添加z-index属性（默认是0）

显示结果为重叠部分为红色。

<style>
  .box1 {
    position:absolute;
    width:200px
    height:200px
    background-color:red;
    z-index：1；
  }
  .box1 {
    position:absolute;
    width:300px
    height:200px
    background-color:orange;
  }
  
</style>
......
<div class="box1"></div>
<div class="box2"></div>

4，图文对齐（vertical-align）

4.1 默认基线：浏览器文字类型排版中存在默认用对齐的基线。

4.2文字对齐问题：其图片和文字在一行显示的时，其底部其实是不对齐的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dbk8Ilbu-1649521218889)(/Users/caolvdongxing/Library/Application Support/typora-user-images/image-20220311160137816.png)]

4.3垂直对齐方式：vertical-align：top（顶对齐）；middle（居中对齐）；bottom（底部对齐）

4.4两个标签要垂直对齐的时候对大的尺寸进行vertical-align：middle；居中对齐

5，光标类型

属性名（cursor）：pointer（手型）用户可以点击；text （工字形）用户可以复制；move（十字形）用户可以移动。

6.边框的圆角（border-radius）

6.1让盒子四角变得圆润，增加页面细节，增加用户体验。

 <style>
        div {
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,50%);

            width: 400px;
            height: 400px;
            background-color: aqua;
            
            /* 一个值作为四边相同 */
            /* border-radius: 20px; */

            /* 四个值顺序：左上，右上，右下，左下 */
            /* border-radius: 10px 20px 40px 80px; */

            /* 三个值顺序：左上，右上左下 ，右下 */
            /* border-radius: 10px 40px 80px; */
             
            /* 两个值的顺序是左上右下，右上左下 */
            border-radius: 10px 40px;
        }
    </style>

6.2 变圆或者胶囊状

变圆：直接属性值高度的50%。

7，内容溢出（overflow）

overflow：hidden（溢出部分隐藏）；scroll（无论是否溢出都显示滚动条）；auto（根据是否溢出，自动选择是否隐藏或显示滚动条）

8.元素本身的隐藏

8.1visibility：hidden 隐藏元素本身，并且在网页中占位置

8.2display：none 隐藏元素本身，并且在网页中不占位置

<style>
a.app img {
            position: absolute;
            left: 50%;
            top: 41px;
            transform: translate(-50%,0);
            /* 先隐藏 */
            display: none;
        }
        .app:hover img {
         /* 在悬停显示 */
            display: block;
        }
    </style>
......
<a href="" class="app">手机微金所<img src="" alt=""></a>