Day06_HarmonyOS生态中的定位和溢出

背景 : 基础的布局已经完成但是细节性的内容我们也需要完成 ; 比如说让某一个效果/布局去某一个位置显示 ; 还有内容再元素内放不下了有超出的效果我们应该怎么解决实现效果;

今日学习目标 :

1. 定位的含义

2. 定位的属性

3. 定位的取值及应用场景

4. 定位的层级

5. 溢出

6. 元素类型

7. 面试题

8. 案例

1. 定位的含义

含义 : 定位代表的是让元素去某一个位置, 或者是让元素相对于某一个元素进行位置的调整偏移; 要想实现定位必须配合偏移属性来完成 ; 偏移属性总共有四个

偏移属性 :

a) top =距上面的距离

b) right =距右面的距离

c) bottom =距下面的距离

d) left =距左面的距离

2. 定位的属性

属性 : position

取值 :

a) static =静态定位

b) relative =相对定位

c) absolute =绝对定位

d) fixed =固定定位

e) sticky =粘性定位

3. 定位的取值及应用场景

1) 静态定位

含义 : 静态定位也称之为普通文档流定位, 元素是如何显示, 是如何排列就如何排列, 如何显示; 例如, div就是竖着排列; span就是横着排列等等;

基本语法 : position :static;

参照物 : 没有任何参照物

案例 :

<style>
    .red{
        width:100px;
        height:100px;
        background-color:red;
        /*静态定位*/
        /*添加完静态定位之后, 元素位置并没有发生改变, 添加偏移属性位置也没有发生改变, */
        /*得出一个结论:静态定位是默认值,在实际开发的时候没有人使用*/
        position:static;
        top:100px;
        left:100px;
    }
    .green{
        width:200px;
        height:100px;
        background-color:green;
    }
    .blue{
        width:300px;
        height:100px;
        background-color:blue
    }
</style>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

2) 相对定位

含义 : 相对于自己的位置进行微调 ; 例如 : 小明小红两个同桌吵架了, 小红说小明你往那边咕用咕用, 你过线了, 小明的位置移动从来是相对于自己的位置进行调整, 不会跑到下一行, 也不会跑到上一行;

注意 : 相对定位是微调 , 调整的也就是十几个像素, 或者是几个像素的位置大小; 切记不是调整大几十个像素

基本语法 : position:relative;

参照物 : 自己原来的位置;

应用场景 : 但部分微调场景使用

案例及特点 :

<style>
    .red{
        width:100px;
        height:100px;
        background-color:red;
        /*相对定位*/
        /*相对于自己的原来位置进行微调*/
        /*1)此时元素的位置发生改变;把后面的元素遮盖住了*/
        position:relative;
        top:50px;
        left:50px;
    }
    .green{
        width:200px;
        height:100px;
        background-color:green;
        /*相对定位*/
        /*相对于自己的位置进行为题;*/
        /*2)如果两个元素否添加了定位,则默认后面出现的元素会这盖住前面出现的元素;*/
        /*体现了定位的层级性;能调整层级显示吗?可以后面会继续讲解*/
        position:relative;
        top:20px;
        
    }
    .blue{
        width:300px;
        height:100px;
        background-color:blue
    }
</style>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

3) 绝对定位

含义 : 绝对定位, 是一个绝对的位置; 但是调整的时候需要有对应的参照物来进行位置的调整; 绝对定位使用的时候存在两种情况 ;

情况1 : 绝对定位使用的时候, 外面层级的父元素(或者是父元素的父元素) , 均没有使用定位, 则绝对定位的参照是浏览器左上角的body位置;

情况2 : 绝对定位使用的时候, 外面层级的父元素(或者是父元素的父元素) , 有定位(一般指的是相对定位) , 此时绝对定位的参照是有定位的父级元素的左上角

例如 : 小明 ( 绝对定位 ) 没有对象, 但是家里人不着急, 他找对象的时候, 只要找地球上的一个对象即可; 此时地球就相当于我们body; 只要不是外星人就行; 但是这一次, 父母没有限制找哪里来的, 但是家里的爷爷奶奶比较着急, 想要让他找老家省内的; 找省外的就把腿打骨折, 此时, 小明只能听从爷爷奶奶的, 以爷爷奶奶为参照 , 爷爷奶奶就相当于有定位的父元素;

情况3 : 如果是兄弟关系的绝对定位, 会脱离文档流,不占页面空间, 后面元素会上去补位置;

应用场景 : 大部分场景应用到了 , 半遮罩层 , 轮播图

情况1案例 :

<style>
    .red{
        width:500px;
        height:500px;
        border:10px solid gray;
        backkground-color:red;
        margin:0 auto;
    }
    .green{
        width:300px;
        height:300px;
        border:5px solid gray;
        background-color:green;
    }
    .blue{
        width:100px;
        heght:100px;
        background-color:blue;
        margin:0 auto;
        /*添加绝地定位*/
        /*此时,元素位于浏览器左上角位置显示,因为红色和绿色元素没有添加任何定位*/
        position:absolute;
        top:20px;
        left:20px
    }
    /*如何展示,参照为左上角body位置呢?我们可以给body添加一个比较大的高度, 然后滚动浏览器, 蓝色的元素倍滚动上去了*/
    body{
        height:1000px;
    }
</style>
<div class="red">
    <div class="green">
        <div class="blue"></blue>
    </div>
</div>

情况2案例 :

<style>
    .red{
        width:500px;
        height:500px;
        border:10px solid gray;
        backkground-color:red;
        margin:0 auto;
    }
    .green{
        width:300px;
        height:300px;
        border:5px solid gray;
        background-color:green;
        /*添加定位:一般为相对定位;形成一个参照物*/
        position:relative;
    }
    .blue{
        width:100px;
        heght:100px;
        background-color:blue;
        margin:0 auto;
        /*添加绝地定位*/
        /*此时,元素位于浏览器左上角位置显示,因为红色和绿色元素没有添加任何定位*/
        position:absolute;
        top:20px;
        left:20px
    }
</style>
<div class="red">
    <div class="green">
        <div class="blue"></blue>
    </div>
</div>

情况3案例:

<style>
    /*
        1) 添加绝对定位的元素, 会脱离文档流,不占页面空间, 后面元素上去补位置;
        2) 只要兄弟关系的元素否添加定位, 必然会产生层叠效果, 默认的后面元素覆盖前面的元素; 
        3) 能否调整层级顺序呢? 可以调整层级顺序, 使用后面要讲解的z-index属性完成
    */
    .red{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
    }
    .green{
        width:200px;
        height:200px;
        background-color:green;
        position:absolute;
    }
    .blue{
        width:300px;
        height:300px;
        background-color:blue;
        position:absolute;
    }
</style>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

4) 固定定位

含义 : 固定定位 , 让元素去窗口的某一个位置进行显示, 在这里需要注意的是 , 固定定位的参照物是浏览器窗口位置;

基本语法 : position:fixed ;

应用场景 : 购物车的删除遮罩层 , 返回置顶 , 楼梯层电梯层效果

注意事项 : 固定定位的参照物是浏览器窗口位置, 不会收到滚动条的的影响;

案例 :

<style>
    body{
        /*作用:为了让浏览器有*/
        height:1000px;
    }
    div{
        width:120px;
        height:60px;
        text-align:center;
        line-height:60px;
        border:5px solid gray;
        border-radius:10px;
        /*定位*/
        position:fixed;
        right:0px;
        bottom:0px;
    }
</style>
<div>返回置顶</div>

5) 粘性定位

含义 : 粘性定位 , 是相对定位和固定定位的结合体 , 通过滚动浏览器窗口判断元素是否达到对应的窗口距离; 如果达到进行吸附展示, 如果没有达到则恢复默认样式 , 或者是继续滚动;

基本语法 : position:sticky

应用场景 : 滚动吸顶;

案例 :

<style>
    *{
        margin:0;padding:0
    }
    header,footer{
        height:100px;
        text-align:center;
        font-size:50px;
        font-weight:bold;
        background-color:red
    }
    nav{
        width:1200px;
        height:80px;
        background-color:orange;
        text-align:center;
        margin:0 auto;
        line-height:80px;
        font-size:50px;
        /*粘性定位*/
        position:sticky;
        top:0px;
    }
    section{
        background-color:aqua;
        height:1500px;
        font-size:100px;
        text-align:center;
    }
</style>
<header>头部区域</header>
<nav>导航区域</nav>
<section>主体区域</section>
<footer>尾部区域</footer>

6) 定位的使用区分

含义 : 学习了这么多定位, 有的小伙伴还是不能却分清楚到底什么时候使用什么定位 ? 在这里我们可以使用排除法来决定到底使用啥定位

排除法 :

1) 首先排除 : 静态定位 ; 因为这个是默认值 , 在开发的时候没有人使用此定位

2) 再次排除 : 粘性定位 ; 因为这个定位只用来实现滚动吸顶的效果 , 除了使用CSS定位完成还可以使用js完成

3) 再次排除 : 固定定位 ; 因为此定位知识用来完成相对于窗口为参照的定位效果 ; 应用频率就是几个固定的场景

4) 使用频率最高的就是, 相对定位 和绝对定位, 但是在这里两个一定要区分好 ; 相对定位只用来调整几个简单的像素距离; 但是 绝对定位调整的距离比较大

7) 定位中的问题 (相对,绝对,固定)

1)脱离文档流 : 绝对定位和固定定位脱离文档流, 不占空间; 相对定位定位特殊情况不会脱离文档流, 因为还占据原来的位置呢 ;

2)父相子绝 : 父元素使用相对定位, 子元素使用绝对定位; 在这里, 注意的是, 父元素可以使用其他的定位 ( 相对 , 绝对 , 固定 ) 完全没有问题的, 只不过是绝对定位和固定定位, 容易产生脱离文档流不占位的情况, 所以我们推荐使用相对定位

3)定位与margin:0 auto之间的关系问题; margin:0 auto; 拥有固定的宽度, 并且正常文档流中的元素实现水平居中; 但是脱离文档流中的元素不能实现

4)定位与自适应(width:auto;)不设置宽度的元素; 相对定位不会影响自适应的盒子; 但是绝对定位和固定定位会影响自适应的盒子, 会让宽度突然消失, 因为没有设置宽度, 元素添加定位之后, 仍然属于自适应的元素, 此时的宽度是被内容撑开的;

4. 定位的层级

含义 : 前面多处案例中我们已经见到了定位 , 再使用的过程中, 如果兄弟元素都使用了定位的话 , 会产生层级堆叠的效果 ; 如何调整这种堆叠效果呢?

基本语法 : z-index : number 取值为数值, 可以为正数, 可以为负数, 取值越大层级显示顺序越高

案例 :

<style>
    /*
        默认都添加定位的话则会产生一种层叠堆叠的效果; 默认的后面的定位元素覆盖前面的定位元素; 如果解决这个问题; 
        我们通过z-index来解决; 
    */
    .red{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
        z-index:100
    }
    .green{
        width:200px;
        height:100px;
        background-color:green;
        position:absolute;  
    }
    .blue{
        width:300px;
        height:100px;
        background-color:blue;
        position:absolute;
    }
</style>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

5. 溢出

含义 : 元素拥有固定的大小 ; 当内容或者是里面的区域不能再这个区域中正常显示 , 有超出的请款 , 这种超出的效果倍称之为溢出 ;

基本语法 : overflow : visible / hidden / scroll / auto;

释义 :

visible : 超出溢出的时候默认值 , 显示的意思

hidden : 超出的时候将超出的部分 , 进行隐藏 ;

scroll : 溢出滚动 ; 无论是否有超出的效果 , 默认都会带有两个滚动条 ; 哪一个方向超出的时候 , 哪一个方向有滚动的功能

auto : 溢出自动 ; 没有超出的话没有任何的滚动条 , 哪一个方向超出的话 , 哪一个方向才会有滚动的功能 ;

案例 :

<style>
    div{
        width:300px;
        height:300px;
        border:5px solid gray;
        /*溢出属性*/
        overflow:hidden;
    }
</style>
<div>
	欢迎来到千锋教育 学习HarmonyOS鸿蒙生态开发; 我们拥有最新的开发技术, 拥有最优秀的开发研发团队以及优秀讲师队伍; 每一名讲师都拥有很高的开发经验
    欢迎来到千锋教育 学习HarmonyOS鸿蒙生态开发; 我们拥有最新的开发技术, 拥有最优秀的开发研发团队以及优秀讲师队伍; 每一名讲师都拥有很高的开发经验
    欢迎来到千锋教育 学习HarmonyOS鸿蒙生态开发; 我们拥有最新的开发技术, 拥有最优秀的开发研发团队以及优秀讲师队伍; 每一名讲师都拥有很高的开发经验
</div>

常用效果1 : 应用场景 ; 单行文本溢出显示省略号

<style>
    div{
        /*1) 需要设置宽度*/
        width:300px;
        /*2) 让文本不折行*/
        white-space:nowrap;
        /*3) 文本溢出隐藏*/
        overflow:hidden;
        /*4) 溢出文本显示省略号*/
        text-overflow:ellipsis;
    }
</style>
<div>
	欢迎来到千锋教育 学习HarmonyOS鸿蒙生态开发; 我们拥有最新的开发技术, 拥有最优秀的开发研发团队以及优秀讲师队伍; 每一名讲师都拥有很高的开发经验
</div>

常用效果2 : 应用场景 ; 多行文本溢出显示省略号

<style>
    div{
        border:5px solid gray;
        /*1) 注意在这里多行文本溢出显示省略号, 不要设置高度, 设置高的话不能完成*/
        width:300px;
        /*2) 让盒子触发可可伸缩的弹性盒子*/
        display:-webkit-box;
        /*3) 元素中的内容纵向显示*/
        -webkit-box-orient:vertical;
        /*4) 让省略号显示在第几行*/
        -webkit-line-clamp:2;
        /*5) 让后面的文本隐藏掉*/
        overflow:hidden;
    }
</style>
<div>
	欢迎来到千锋教育 学习HarmonyOS鸿蒙生态开发; 我们拥有最新的开发技术, 拥有最优秀的开发研发团队以及优秀讲师队伍; 每一名讲师都拥有很高的开发经验
</div>

6. 元素类型

1) 含义

在实际开发的过程中 , 有些元素能实现宽度高度设置 , 有些元素不能实现宽度高度的设置 , 这是什么情况呢 ? 是因为在开发之前W3C以及浏览器早已经把对应的元素 ( 标签 ) 设置了对应的类型 , 导致不能实现 , 我们如何查看元素的显示类型呢 ? 我们可以再控制台里面的computed计算属性中查看对应的元素类型 ,

2) 分类 ( * )

元素类型总共分为三类 :

1) 行内元素

行内元素 ; 元素不能实现宽度高度 ( 切记这里注意的是不能实现, 不是不能设置 ) , 元素默认横向显示 ;

代表作 : a , b , strong , span , i , em , var , u , ins , s , del , sup , sub; 实际开发过程中此类元素使用频率比较低 , span应用频率比较高

2) 块级元素

块级元素 : 元素能实现宽度高度 , 并且默认是独占一整行纵向排列的 ;

代表作 : div , ul , ol , li , p , h1-h6 , header , footer .....等等;

3) 行内块元素

行内快元素 : 元素既有行内元素的特点 , 也有块级元素的特点 , 元素既能横向显示 , 也能实现宽度和高度 ;

代表作 : input , img , textarea , select

3) 元素类型转换

元素类型显示类型是通过一个display属性来进行控制 ; 如果想要让元素类型改变 , 我们也可以更改display的取值来改变元素的类型

<style>
    div{
        width:200px;
        height:100px;
        border:10px solid gray;
        /*默认div是一个块级元素, */
        dispaly:inline;
        /*此时div拾取宽度高度, 与span横向显示*/
    }
</style>
<div>我是一个div</div>
<span>111</span>

4) 元素类型

元素类型的取值 : 通过display属性控制

取值分为两类 : 常用取值和不常用取值

常用取值 :

inline; == 元素显示以行内元素显示

block; == 元素显示已块级元素显示

inline-block; == 元素显示已行内快元素显示

none; == 元素再页面中消失

flex; == 元素触发弹性盒子

grid; == 元素触发网格

不常用取值 :

list-item; == 元素显示以列表项类型显示

table ; == 元素显示以表格类型显示

table-row ; ==元素显示以表格的的行类型显示

table-cell ; == 元素以表格的单元格类型显示

5) 扩展 隐藏元素的方法 ;

方法1 : display:none ; 隐藏元素不占页面空间

方法2 : visibility:hidden ; 隐藏元素占页面空间

方法3 : width:0px;height:0px; 隐藏元素,不占页面空间

方法4 : opacity:0; 隐藏元素,占页面空间

方法5 : transform:scale(0); 隐藏元素; 占页面空间

7. 面试题

1. 定位有几种, 取值分别是? 参照物分别是啥

2. 单行文本溢出显示三个圆点

3. 定位的特殊问题

4. 隐藏元素方法

5. 元素类型的切换及种类; 以及取值

8. 案例

1. 案例1

2. 案例2

3. 案例3