.div{

   width: 100%;

   height: 0;

   padding-top: 100%

}

这个时候，padding-top的值与width相等，所以可以让div宽高一样，值为width的值

css中width和padding-top实现正方形的更多相关文章

  1. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  2. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  3. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  4. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  5. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  6. css中width的计算方式，以及width:100%的参考系

    PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertic ...

  7. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  8. js中width,height,left,top计算

    ①offset    包括了元素的边框和内边距和滚动条 offsetWidth.offsetHeight元素的宽度和高度 offsetLeft .offsetTop元素相对于文档左边和顶部的距离(定位 ...

  9. 网页CSS中*{margin:0; padding:0;}有什么用

    * 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或p ...

随机推荐

  1. Linux命令（十三） 建立目录 mkdir 删除目录 rmdir

    一.建立目录 mkdir 命令简介 mkdir 命令用于创建指定的目录.创建目录时当前用户对需要操作的目录有读取权限.如果目录已经存在,会提示报错并推出. mkdir 可以创建多级目录. 常用参数说明 ...

  2. 5Java异常处理

    五.异常 异常概念总结:   练习一:异常的体系    问题:    1. 请描述异常的继承体系    2. 请描述你对错误(Error)的理解    3. 请描述你对异常(Expection的理解) ...

  3. 【题解】 [HNOI2005]狡猾的商人（差分约束）

    题面懒得复制,戳我戳我 Solution: 其实这个差分是挺显然的,我们可以用\(s[i]\)表示从第\(1\)到\(i\)中间的收入和 重点就在式子,比如读入\(a\),\(b\),\(c\),显然 ...

  4. 【Luogu1344】追查坏牛奶（最小割）

    [Luogu1344]追查坏牛奶(最小割) 题面 洛谷 题解 裸的最小割,但是要求边的数量最小. 怎么办呢?给每条边的权值额外加上一个很大的值就了. #include<iostream> ...

  5. 【数论Day1】 最大公约数（gcd）题目

    20170529-3数论_gcd 题解: http://www.cnblogs.com/ljc20020730/p/6919116.html 日期 序号 题目名称 输入文件名 输出文件名 时限 内存 ...

  6. suoi14 子树查找 (dfs)

    把询问记下来,然后开个桶差分 #include<bits/stdc++.h> #define pa pair<int,int> #define lowb(x) ((x)& ...

  7. 解题：NOIP 2018 保卫王国

    题面 最小支配集=全集-最大独立集 所以先把点权改成正无穷/负无穷来保证强制选/不选某个点到独立集里,然后变成了洛谷的动态DP模板 GTMDNOIP2018ZTY #include<stack& ...

  8. linux系统下开机启动流程

    在了解开机启动流程之前,还是得先了解一些磁盘的基本知识.磁盘主要由盘片,机械手臂,磁头,主轴马达构成.盘片就是存储数据的物理单位了.然后盘片上我们可以分成扇区(sector)和柱面(cylinder) ...

  9. 【hihocoder】二分·归并排序之逆序对

    描述 在上一回.上上回以及上上上回里我们知道Nettle在玩<艦これ>.经过了一番苦战之后,Nettle又获得了的很多很多的船.这一天Nettle在检查自己的舰队列表:我们可以看到,船默认 ...

  10. HTML5 快速学习二 Canvas

    本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...