.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. Python 实现数据库更新脚本的生成

    我在工作的时候,在测试环境下使用的数据库跟生产环境的数据库不一致,当我们的测试环境下的数据库完成测试准备更新到生产环境上的数据库时候,需要准备更新脚本,真是一不小心没记下来就会忘了改了哪里,哪里添加了 ...

  2. wordpress点击中文tag标签出现404解决方案

    TypeCho转WordPress之后,发现点击中文tag出现404页面,也就是点击无效了.试了几种修改链接样式,都没效果.也尝试了各种网上找的3中方法: 第一种方法:打开 WP-include/cl ...

  3. 51nod 1673 树有几多愁(链表维护树形DP+状压DP)

    题意 lyk有一棵树,它想给这棵树重标号. 重标号后,这棵树的所有叶子节点的值为它到根的路径上的编号最小的点的编号. 这棵树的烦恼值为所有叶子节点的值的乘积. lyk想让这棵树的烦恼值最大,你只需输出 ...

  4. c++11 基于范围的for循环

    c++11 基于范围的for循环 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> # ...

  5. MT【171】共轭相随

    $\textbf{证明:}$对任意$a,b\in R^+$, $\dfrac{1}{\sqrt{a+2b}}+\dfrac{1}{\sqrt{a+4b}}+\dfrac{1}{\sqrt{a+6b}} ...

  6. 【刷题】LOJ 6227 「网络流 24 题」最长k可重线段集问题

    题目描述 给定平面 \(\text{xoy}\) 上 \(n\) 个开线段组成的集合 \(\text{I}\) ,和一个正整数 \(k\) ,试设计一个算法. 从开线段集合 \(\text{I}\) ...

  7. 【HDU5687】Trie

    题目大意:需要维护一个支持以下操作的数据结构:(1)支持插入一个字符串(2)支持删除所有前缀等于给定字符串的单词(3)查询该数据结构中是否存在一个以给定字符串为前缀的字符串 题解:由题目可知,需要维护 ...

  8. 【codevs1245】最小的 N 个和

    题目大意:给定两个有 N 个数字的序列,从这两个序列中任取一个数相加,共有 \(N^2\) 个和,求这些和中最小的 N 个. 题解:由于数据量是 10W,必须减少每次选取的决策集合中元素的个数.可以发 ...

  9. Linux上shell脚本date的用法

    在shell脚本里date命令的用法: %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星期名全称 (如:星期日) %b 当前local ...

  10. SSM搭建Spring单元测试环境

    原文链接:https://jingyan.baidu.com/article/93f9803f5a97a4e0e46f55c8.html SSM搭建Spring单元测试环境