css让子元素填充父元素内部空间

学习使我快乐——玉祥

已于 2022-04-28 12:53:31 修改

阅读量1.5k

点赞数

分类专栏： css 文章标签： css3

于 2022-04-28 12:53:25 首次发布

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/124471430

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果如下面这个套娃样式

父组件的属性：

display: flex;

子组件的属性：

flex: 1;

上图示例代码：

<html>
<header>

</header>
<body>
<div style="height: 100%;display: flex;">
    <div class='container' style="margin: 50px;flex: 1;display: flex;">
        <div style="margin: 50px;flex: 1;background-color: white;display: flex;">
            <div class='container' style="margin: 50px;flex: 1;display: flex;">
                <div style="margin: 50px;flex: 1;background-color: white;display: flex;">
                    <div class='container' style="margin: 50px;flex: 1;display: flex;">
                        <div style="margin: 50px;flex: 1;background-color: white;">
                            <table style="width: 100%;height: 100%;">
                                <tr>
                                    <td id="shower" style="font-size: 100px;text-align: center;" ondblclick="getNowTime()"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<script>
    const view=document.getElementById("shower");
    getNowTime();
    function getNowTime(){
        view.innerText=new Date().getTime();
    }


</script>






<style>
    html, body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }


    .container{
        animation-name: likes; /* 动画名称*/
        animation-direction: alternate;
        /*// 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。*/
        animation-timing-function: linear;
        /*// 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；*/
        animation-delay: 0s;
        /*// 动画延迟时间*/
        animation-iteration-count: infinite;
        /*//  动画播放次数，infinite：一直播放*/
        animation-duration: 10s;
        /*// 动画完成时间*/
    }

    @keyframes likes {
        0% {
            background-color: #1f99f6;
        }
        25% {
            background-color: #45e761;
        }
        50% {
            background-color: #cff622;
        }
        75% {
            background-color: #f6a755;
        }
        100% {
            background-color: #d065f5;
        }
    }
</style>

</body>
</html>

学习使我快乐——玉祥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css让子元素填充父元素内部空间

效果如下面这个套娃样式父组件的属性：display: flex;子组件的属性：flex: 1;上图示例代码：<html><header></header><body><div style="height: 100%;display: flex;"> <div class='container' style="margin: 50px;flex: 1;display: flex;"&gt
复制链接

扫一扫