用CSS如何实现宽高等比布局,思路和方法是什�

Admin 2022-06-06 群英技术资�

关于“用CSS如何实现宽高等比布局,思路和方法是什么”的知识有一些人不是很理解,对此小编给大家总结了相关内容,具有一定的参考借鉴价值,而且易于学习与理解,希望能对大家有所帮助,有这个方面学习需要的朋友就继续往下看吧�


    

宽度是高度的两�(等比缩放)

实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-top:50% (也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度);

为什么不直接`width: 50%; height: 50%;?

那样高度就成了父级高度的50% (不合题意,除非父级宽高相等);

原题�:

  1. 红色块级元素垂直居中于屏幕中央;
  2. 红色块级元素距离屏幕左右边距�20px;
  3. 红色块级元素里面的内容水平垂直居中;
  4. 红色块级元素的高度始终是红色块级元素宽度�50%�

红色部分宽高之比2:1

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高比例固定</title>
    <style>

        .father{
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #0c8ac5;
        }

        .son{
            width: 100%;
            padding-top: 50%;
            background-color: #c03035;

        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #D8D8D8;
        }

        img{
            float: left;
            margin-right: 10px;
            border: 2px solid #fdf6e3;
        }

    </style>
</head>
<body>
    <section class="father">
        <div class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武当派弟子(现已离开武当),八奇技之一风后奇门的继承人,靠占卜悟出天道,却又作出甘于投身乱世的选择。外表一副老好人的温良相,谦谦有礼如温吞水般,做事也经常是一副没精打采,貌似没睡醒的样子。优哉游哉还脾气软,代表举动经常是歉意笑着作出让步。似乎对什么都无所谓,一副悠然道人之姿,但是在涉及到家人安危时毫不含糊,甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人,实力在后生一辈中甚至称得上头筹,暂时只有一次完全没预料到地阴沟里翻船�</span></div>
    </section>
</body>
</html>

到此这篇关于“用CSS如何实现宽高等比布局,思路和方法是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章,希望大家以后多多支持群英网络!
标签� css等比布局

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部