1. 前言

在移动开发中，有时候需要设置一个宽高相等的div，并且为了使它能够适配更多的屏幕，于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案，让一些后端开发不用再写繁琐的js。

2. 实现代码

html:

<!DOCTYPE html>

<html>

<head>

    <title>test</title>

</head>

<body>

    <div class="wrapper">

        <div class="box"></div>

    </div>

</body>

</html>

css:

<style>

    .wrapper {

        position: relative;

        height:;

        padding-top: 80%;

    }

    .box {

        position: absolute;

        width: 80%;

        height: 100%;

        left: 10%;

        top:;

        border: 1px solid #ccc;

    }

</style>

效果：

这样我们就得到一个适应屏幕宽度的正方形，在实际应用中，我们还可以给这个box设置border-radius以及其他各种属性，得到一个更加酷炫的效果。现在我们来分析一下为什么这个css会实现这个效果，了解它的原理有助于我们能够更加得心应手的去修改它。

给wrapper设置height:0;padding-top:80%;会让wapper占据一个宽高比例为10：8的区域。有了这么一个区域是不是就感觉突然有点灵感了。是的，我们在给它的子元素的宽度再取一个百分比，就可以让它的宽高一样了。这里还有一个注意的，warpper的内部其实是没有高度，于是这个子元素就必须使用position:absolute，同时需要给wrapper加上position:relative。

作为一个前端小菜的我，快快努力学习吧，fitting。

css 设置div基于父元素宽度的宽高相等的样式的更多相关文章

  1. 注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度

    定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...

  2. 解决：子元素设置margin-top，父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  3. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  4. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  5. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题

    好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: ...

  7. 纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

  8. 子元素设置margin-top，父元素也受影响

    这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...

  9. CSS设置DIV边框为圆角，添加背景色溢出的问题

    这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...

随机推荐

  1. linux100day（day5）--编程原理和shell脚本

    通过前面的学习,我们对于linux文件系统有了一定的了解,我们接下来会初步接触编程原理和尝试编写shell脚本来实现功能. day05--编程原理和shell脚本初步认识 编程原理 在早期编程中,因为 ...

  2. Git--03 git分支

    目录 Git分支 1.新建testing分支 2.合并分支 3.合并冲突 4.删除分支 Git标签使用 1.查看标签 02.删除标签 Git分支 ​ 分支即是平行空间,假设你在为某个手机系统研发拍照功 ...

  3. 从__name__=='__main__'说到__builtin__

    一.__name__ 我们在写好代码进行自测的时候一般会先写这样一行代码: # inter_method if __name__ == '__main__': 为什么呢,可能并不是所有人都考虑过,这个 ...

  4. tomcat启动一闪而过解决办法报错The CATALINA_HOME environment variable is not defined correctly

    解决办法: Tomcat无论在windows上还是Linux上只需要吧安装包传上去解压就行,不需要配置环境变量,吧之前有可能别人别配置的环境变量统一删掉即可(网上一大堆说需要配置的都是胡说八道).把以 ...

  5. Unparseable date: "Mon Aug 15 11:24:39 CST 2016",时间格式转换异常

    String datestr= "Mon Aug 15 11:24:39 CST 2016";//Date的默认格式显示 Date date=new SimpleDateForma ...

  6. Python的"random"函数的使用（一）

    random.randrange(1,10) 随机产生0~7之间的整数,不包含7. random.sample(range(100), 5) 随机从range(100)中产生5个数,放入一个list. ...

  7. 【leetcode】1019. Next Greater Node In Linked List

    题目如下: We are given a linked list with head as the first node.  Let's number the nodes in the list: n ...

  8. Ext js-02 -官方API文档使用

    官方API文档地址: http://docs.sencha.com/extjs/6.5.3/classic/Ext.html 打开网页如下: 1.选择所使用的Ext js版本,后面offline do ...

  9. a标签指定的url，在表单提交前进行js验证的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. luogu P3768 简单的数学题 杜教筛 + 欧拉反演 + 逆元

    求 $\sum_{i=1}^{n}\sum_{j=1}^{n}ijgcd(i,j)$   考虑欧拉反演: $\sum_{d|n}\varphi(d)=n$   $\Rightarrow \sum_{i ...