请老师检查!顺便问个问题:为什么p标签不设置宽度不能实现效果,不能继承.box的宽度吗

请老师检查!顺便问个问题:为什么p标签不设置宽度不能实现效果,不能继承.box的宽度吗

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .box{

            width: 300px;

            overflow: hidden;

            position: relative;

            top: 100px;

            margin: 0 auto;

        }

        .box p{

            padding-left: 10px;

            line-height: 30px;

            color: white;

            font-family: 'Courier New', Courier, monospace;

            width: 300px;

            height: 30px;

            position: absolute;

            background-color: rgba(0, 0, 0, 0.3);

            bottom: -30px;

            transition: bottom 0.5s linear 0s;

        }

        .box:hover p {

            bottom: 0px;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/duck.png" alt="">

        <p>这是一只小黄鸭</p>

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2023-01-02 10:49:13

同学你好,代码实现效果很棒!

针对提问回复:

因为p设置了绝对定位,脱离文档流,不会继承父元素.box盒子宽度,需要独立设置。

祝学习愉快~

  • 我刚回顾了之前的视频,视频里说“文本属性一般具有继承性”,那是不是说只有文本属性才有,还是一切属性都会有继承性,只要不脱离标准文档流?

    2023-01-02 10:51:43
  • 前面老师说的有些不严谨,宽度一般是不继承的。如果子元素是块元素(不脱离文档流情况下),会和父元素宽度一致,但不是继承来的,可以在控制台中查看

    https://img1.sycdn.imooc.com//climg/63b26059099651f019740978.jpg

    可以看到一般继承的是文本属性。即使子元素脱离了文档流,文本属性也会继承

    https://img1.sycdn.imooc.com//climg/63b260c209045a5b20241308.jpg

    自己再理解下。

    2023-01-02 12:43:06
  • 请问老师有什么属性可以继承的呢?

    2023-01-05 19:11:06
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师