鸿蒙应用开发-学习-第一章-CSS元素显示模式＋溢出

求求你别卷啦

已于 2024-01-04 09:21:45 修改

阅读量1.2k

点赞数 29

文章标签：学习 harmonyos 笔记 html 前端 css

于 2024-01-03 17:08:57 首次发布

本文链接：https://blog.csdn.net/weixin_50991227/article/details/135358351

版权

本文介绍了CSS中的溢出控制、元素的显示模式（块级、行内、行内块）、装饰技巧（如HTML嵌套、居中、透明度和光标类型），并提供了创建二级菜单显示和隐藏的实例。

摘要由CSDN通过智能技术生成

Tips：这个只是作者的学习笔记，仅作参考

一.溢出

1.溢出部分显示效果

溢出是什么意思?

指内容超出盒子的大小,效果如下:

这个时候可以使用overflow进行控制:

属性名:overflow(-x 或者-y):

常见属性值:

属性值	说明
visible	默认值,溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出都显示滚动条
auto	根据是否溢出,自动判断是否需要滚动条并显示

    /* 强制文本在一行内显示 */
    white-space: nowrap;
    /* -x为水平方向显示,隐藏,滚动条*/
    /* 默认值:溢出部分可见*/
    overflow-x: visible;
    /* 将溢出的部分隐藏,并配上滚动条 */
    overflow-x: hidden;
    /* 不管有没有溢出都有滚动条 */
    overflow-x: scroll;
    /* 根据是否溢出自动生成滚动条 */
    overflow-x: auto; 
    /* -y则为垂直方向显示,隐藏,滚动条  */
    /* 默认值:溢出部分可见 */
    overflow-y: visible;
    /* 将溢出的部分隐藏,并配上滚动条 */
    overflow-y: hidden;
    /* 不管有没有溢出都有滚动条 */
    overflow-y: scroll;
    /* 根据是否溢出自动生成滚动条 */
    overflow-y: auto;

2.单行溢出省略号

三步操作:
1.先设定其宽度(高度不用)

2.将文本展示限定成一行

3.再将溢出的文本隐藏起来(如果不隐藏效果就会如下:)

代码如下(例):

/* 单行溢出 */
p{
    background-color: bisque;
    color: yellowgreen;
    width: 80px;
    /* 文本一行显示 */
    white-space: nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 溢出文本显示成省略号 */
    text-overflow: ellipsis;
}

效果(HTML代码就不放了,随便打几个字就行):

3.多行溢出省略号

多行的和单行的差别挺大的

五步:

1.设置宽度

2.改变标签使其成为弹性盒子(就是可以根据内容自行撑大)

3.检索标签内容排列方式-内容垂直排列(意思就是第一行挤不下时自行在下面开多一排)

4.设置显示行数(你不设置的话鬼知道你要在第几行省略号)

5.将超出部分隐藏(内容超出显示行数能显示部分的部分隐藏起来)

CSS代码如下(例)

.box>div{
    /* 1.设置宽度 */
    width: 200px;
    /* 背景颜色用于方便看出盒子 */
    background-color: aquamarine;
    /* 2.改变标签显示使其成为弹性设置盒子 */
    display: -webkit-box;
    /* 3.检索标签内容排列方式-内容垂直排列 */
    -webkit-box-orient: vertical;
    /* 4.设置显示行数 */
    -webkit-line-clamp: 2;
    /* 5.超出部分隐藏 */
    overflow:hidden;
}

效果如下:

二.元素显示模式

1.块级元素

特点:1.独占一行(即一行只有一个标签),

2.宽度默认是父元素宽度,高度默认由内容撑开,

3.可以设置宽高

常见块级标签:div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer...

例(设置背景颜色是为了结果更直观):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式</title>
    <style>
        .box {
            width: 80px;
        }
        div{
            height: 50px;
            background-color: red;
        }
        p{
            height: 30px;
            background-color: yellow;
        }
        h3{
            height: 40px;
            background-color: blue;
            color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>div标签不想学辣</div>
        <p>p标签真不想学辣</p>
        <h3>h系列真不想学辣</h3>
    </div>
</body>

效果如下:可以很明确看到内容超过父级宽度会自动向下延伸,且各自一行

2.行内元素

特点:1.一行可以显示多个

2.宽度和高度均默认由内容撑开

3.无法设置宽高(设置了也不生效)

常见标签:a,span,b,u,i,,s,strong,ins,em,del...

例(给span设置宽高):

span{
            width: 10px;
            height: 10px;
        }

效果如下:看得出来设置了也没用

3.行内块元素

特点:1.一行可以有多个

2.可设置宽高

常见标签:input,textarea,button,select....

特殊情况:img标签由行内元素特点,但是Chrome调试工具中显示结果是inline

例:

        /* outline是外围框线 */
        input{
            width: 350px;
            height: 43px;
            outline: none;
            text-indent: 43px;
        }

<input type="password" class="two" placeholder="密码">

4.元素显示模式转换

应用场景:改变元素默认的显示特点,使其元素符合布局

语法:

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline	转换成行内块元素	较多
display:line	转换行内元素	极少

三.装饰

1.HTML嵌套规范

块级元素一般作为大容器,可以嵌套:文本,块级元素,行内元素,行内块元素等...

Tips:p标签中不要嵌套div,p,h等块级元素

a标签内可以嵌套任何元素(除了a元素自己)

块级元素:可以嵌套块级元素,行内块元素以及行内元素

行内元素:只能嵌套行内元素

特殊块级元素:只能嵌套行内元素->h系列,p,dt

特殊行内元素:可以嵌套任意元素->a(除了自己)

2.居中方法总结

3.元素本身隐藏

使用场景:让元素本身在屏幕中不可见,如:鼠标:hover之后元素隐藏

常见属性:1.visibility:hidden

2.display:none

区别:1.visibiltiy:hidden 隐藏元素本身,并且在网页中占位置

2.display:none 隐藏元素本身,并在网页中不占位置

Tips:开发中经常会通过display属性完成元素的显示隐藏转换:

display:none;(隐藏) , display:block;(显示)

4.元素显示隐藏切换案例

需求：通过代码完成：默认son元素隐藏，当鼠标移入father后让son显示的效果(这个父盒是猛男粉,要再搞个子盒在父盒当中,当鼠标放在父盒上后子盒自动显示)

做法(个人做法仅供参考):

第一步(CSS):先写两个盒子,并对son盒display:none一下;

.father{
            width: 100px;
            height: 100px;
            overflow: hidden;
            background-color: pink;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            margin: auto;
            margin-top: 25px;
            display: none;
        }

第二步:HTML代码部分:父盒嵌套子盒

<div class="father">
    <div class="son"></div>
</div>

第三步:鼠标悬浮:hover,因为是放在父盒上显示子盒,所以要指向子盒

.father:hover>.son{
   display: block;
}

效果:

鼠标没放上去时:

放上去后:

5.元素整体透明度

使用场景:元素需要变得透明

属性名:opacity

属性值:0~1(0为完全透明,1为完全不透明)

Tips:会让元素整个变得不透明,包括内部元素

例:直接用刚刚练习的代码改

.father{
            width: 100px;
            height: 100px;
            overflow: hidden;
            background-color: pink;
            /* 直接加*/
            opacity: 0.3;
        }

效果:肉眼可见比刚才浅了很多

6.光标类型

应用场景:设置鼠标光标在元素上时的样式

属性名:cursor

常见属性值:

练习通过代码完成：二级菜单的显示和隐藏

做法(个人做法仅供参考)

第一步:清除边距,定义三个盒子,大盒子,粉色盒子,橙色盒子(隐藏),粉色盒子浮动,文本水平垂直居中

        * {
            margin: 0;
            padding: 0%;
        }
        .box1 {
            background-color: pink;
            float: left;
            line-height: 56px;
            text-align: center;
            width: 110px;
        }
        .box2 {
            background-color: orange;
            display: none;
            line-height: 56px;
            text-align: center;
            width: 110px;
        }

第二步:鼠标悬停在盒子1上时二级菜单出来(自己在二级菜单上又设置了一层悬停效果)

        .box:hover>.box2{
            display: block;
        }
        .box2:hover{
            background-color: skyblue;
        }

第三步: 两种小盒子都嵌套进大盒子里(HTML)

    <div class="box">
        <div class="box1">手机</div>
        <div class="box1">电视</div>
        <div class="box1">电脑</div>
        <div class="box1">平板</div>
        <div class="box1">手表</div>
        <div class="box2">华为</div>
        <div class="box2">小米</div>
        <div class="box2">vivo</div>
        <div class="box2">三星</div>
        <div class="box2">苹果</div>
    </div>

效果:

求求你别卷啦

关注

29
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
1
评论
鸿蒙应用开发-学习-第一章-CSS元素显示模式＋溢出

Tips：这个只是作者的学习笔记，仅作参考目录一.溢出 1.溢出部分显示效果 2.单行溢出省略号 3.多行溢出省略号二.元素显示模式 1.块级元素 2.行内元素 3.行内块元素 4.元素显示模式转换三.装饰 1.HTML嵌套规范 2.居中方法总结 3.元素本身隐藏 4.元素显示隐藏切换案例 5.元素整体透明度 6.光标类型
复制链接

扫一扫