HTML&CSS拓展（4）

发布日期: 2022-10-19

更新日期: 2023-03-03

文章字数: 486

阅读时长: 1 分

阅读次数:

每日一记

定位

1.默认值
position:static;

2.绝对定位
position:absolute;
top:100px;
left:-20px;
脱离原始位置,但是原始位置占位，参照物是父元素或浏览器第一屏(没有父元素时)
注:通常与相对定位相结合使用

3.相对定位
position:relative;
top:100px;
left:-20px;
不脱离原始位置，但是原始位置不占位(类似于浮动),相对于原始位置

4.固定定位
position:fixed;
top:100px;
left:-20px;
脱离原始位置，固定在浏览器窗口

5.粘性定位
position:sticky;
top:0px;
吸顶效果，需要定义距离边框的距离，css3.0新增

附加:透明度
<style>
    p{
        opacity:0;        #0是完全透明，1是不透明
    }
</style>

三角形模型

.box{                                          #标准style
    width:0px;                                 #定义盒子模型基本属性
    height:0px;
    border:20px solid transparent;             #四周全部透明
    border-bottom:20px solid red;              #单边不透明，重合部分五五分显示颜色，这样子可以显示为三角形
    position:relative;                         #相对盒子模型定位
    bottom:2.5px;                              #移动至中间(美观)
}
.box:hover span{                               #悬浮时的style
    width:0px;
    height:0px;
    border:20px solid transparent;
    border-top:20px solid red;
    position:relative;
    top:2.5px;
}

定位的层级

父子关系时
z-index越大越靠上显示

绝对定位深入探索

1.
兄弟关系时，后来者居上，后面的再上层
2.
行内元素转化为块元素
绝对定位法:定义absolute

    <style>
        span{
            width:
            ...
            poosition:absolute;
        }
    </style>

<body>
    <span>
        内容
    </span>
</body>

直接转化法:
display:block;
浮动法:
float:left;