.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. [转帖]Windows 内置端口转发功能

    如何在Windows中使用netsh命令进行端口转发 https://www.freebuf.com/articles/system/176889.html 早上自己做了下实验,的确可以.linux下 ...

  2. [转帖]Windows10七大版本区别在哪？

    Windows10七大版本区别在哪? http://os.51cto.com/art/201804/570132.htm 一.Windows10家庭版 对于绝大多数用户来说,最后可能获得的应该就是Wi ...

  3. Jquery 获取屏幕及滑块及元素的高度及距离

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  4. Java结束线程的三种方法(爱奇艺面试)

    线程属于一次性消耗品,在执行完run()方法之后线程便会正常结束了,线程结束后便会销毁,不能再次start,只能重新建立新的线程对象,但有时run()方法是永远不会结束的.例如在程序中使用线程进行So ...

  5. Java线程池停止空闲线程是否有规则呢？

    Java线程池中线程的数量超过核心线程的数量,且所有线程空闲,空闲时间超过keepAliveTime,会停止超过核心线程数量的线程,那么会保留哪些线程呢?是不是有规则呢? 测试代码: ThreadPo ...

  6. LOG4J 的配置

    公司启动全国支票影像系统,有这样一个功能是和消息中间件打交道,需要记录每一个报文出错情况,因为方便后期开发人员的调试,我选用了log4j作为日志记录,好了废话不多说了! 第一步:首先建立一个WEB工程 ...

  7. Linq查询条件里有可空字段比较时报错variable '<>h__TransparentIdentifier2' of type referenced from scope '', but it is not defined

    当我运行下面的linq查询时报了这个错,   1: var result = (from so in svcContext.new_sales_orderSet 2: join soitem in s ...

  8. CentOS服务器配置SSH免密码登录

    由于工作需要,经常要登录到多台服务器远程操作,每次都是ssh user@host:port 再输入密码,时间长了,难免觉得乏味-- 故而从度娘那里扒来了一些让SSH免密码登录的办法,其实这也是使用Gi ...

  9. luogu2048 [NOI2010]超级钢琴 (优先队列+主席树)

    思路:先扫一遍所有点作为右端点的情况,把它们能产生的最大值加到一个优先队列里,然后每次从优先队列里取出最大值,再把它对应的区间的次大值加到优先队列里,这样做K次 可以用一个前缀和,每次找i为右端点的第 ...

  10. 部署kube-prometheus，添加邮件报警

    这个项目出自coreos,已经存在很久了,第一次尝试的时候还很简陋,现在完善了很多. 项目提供了一键部署脚本,跑起来并不难,不过个人感觉要真正掌握并灵活使用并不是很容易. kube version: ...