CSS宽高等比布局的方法

  发布时间:2018-03-12 16:55:58   作者:木子昭   我要评论
这篇文章主要介绍了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九宫格布局的五种方法,内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现,感兴趣的可以了解下
    2023-09-18
  • CSS实现元素水平垂直居中的几种方法

    在Web开发中,经常会遇到需要将元素水平和垂直居中的情况,今天,将为大家分享几种CSS方法,让你的元素轻松居中,让页面更美观吸引人,感兴趣的小伙伴可以自己动手试一试
    2023-09-08
  • css实现元素居中的6种方法

    相信大家在面试的时候也会经常碰到css实现元素居中的方法,下面我介绍6种方法给大家,欢迎大家评论区交流
    2023-09-07
  • flex布局中使用flex-wrap实现换行的项目实践

    最近需要做个换行的布局,本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
    2022-06-16
  • CSS布局之浮动(float)和定位(position)属性的区别

    今天看到有朋友留言问浮动和定位有什么区别,如何使用?今天找了篇文章,讲的比较通俗易懂,供大家参考
    2021-09-23
  • css实现元素居中的N种方法

    这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • div水平布局两边对齐的三种实现方法

    这篇文章主要介绍了div水平布局两边对齐的三种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2021-01-21
  • waterfall瀑布流布局+动态渲染的实现

    这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2021-01-19
  • 页面中有间隔的方格布局如何完美实现方法

    这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-11-27
  • css实现六种自适应两栏布局方式

    这篇文章主要介绍了css实现六种自适应两栏布局方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-10-28

最新评论