使用html+css完成宽高比2:1的自适应盒子

最新推荐文章于 2024-07-19 15:32:49 发布

A青火

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量75

点赞数

文章标签： html css 前端 javascript css3

本文链接：https://blog.csdn.net/qq_34006340/article/details/130525619

版权

要求: 距离左右10px,高度为宽度的一半,内部有水平垂直居中a,并且显示宽度和高度的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body {
            width:100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #aa {
            width:calc(100vw - 20px);
            height:calc(50vw - 10px);
            background:red;
            color:#fff;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            align-content:center;
        }
        #aa p{
            width:100%;
            height:20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="aa"><p>A</p></div>

</body>
</html>
<script>
    function gettext(){
        if(!document.querySelector('#a')) {
            var a = document.createElement('p');
            a.id = 'a';
            var a_text = document.createTextNode('宽度:'+document.querySelector('#aa').offsetWidth);
            a.appendChild(a_text);
            document.querySelector('#aa').appendChild(a);
        }else {
            document.querySelector('#a').innerHTML = '宽度'+ document.querySelector('#aa').offsetWidth
        }

        if(!document.querySelector('#b')) {
            var b = document.createElement('p');
            b.id = 'b';
            var b_text = document.createTextNode('高度'+document.querySelector('#aa').offsetHeight);
            b.appendChild(b_text)
            document.querySelector('#aa').appendChild(b)
        }else {
            document.querySelector('#b').innerHTML = '高度'+ document.querySelector('#aa').offsetHeight
        }
    }
    gettext();
    window.onresize = function(){
        gettext();
    }
</script>