<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  *{
  margin:0;
  padding:0;
  }
  .box{
  display:inline-block;
  margin: 1%;
  width: 30%;
  background: #ff6600;
  padding-top: 30%;
  }
   
  </style>
   
  </head>
  <div class="box"></div>
  <body>
 

//说明：一个不设置宽高的盒子，如何成为一个正方形：为啥padding-top:30%,width:30%就可以呢

因为padding-left；padding-top:padding-right;padding-bottom:设置的百分比是按照父级元素的宽度定的，所有只要其中任何两个组合就，在再加上相同的百分比，就可以成为一个随父级元素自适应的正方形，当然，如果盒子里有东西，会被撑开。
   
  </body>
  </html>

css正方形盒子 自适应的更多相关文章

  1. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  2. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

  3. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  4. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  5. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  6. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  7. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  8. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  9. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

随机推荐

  1. [2018-11-03]2018年10月28日宁波dotnet社区活动回顾及下次活动预告

    离上次活动,有半年了,汗.之后尽量保证每月一次,以组织为主,多邀请嘉宾来分享. 本次活动不足之处 人手不足:由于活动组织事项受限于人手(目前就我一个,这次活动前后我又应邀给大红鹰学院应届生介绍dotn ...

  2. AnkhSVN

    安装和配置 签入签出问题 1.安装和配置 ①安装.(貌似默认的安装到C:\Program Files\AnkhSVN 2下,开始菜单也没快捷?) ②源代码管理器设置:打开vs2012,工具→选项→源代 ...

  3. HTML5/CSS3鼠标滑过图片滤镜动画效果

    在线演示 本地下载

  4. 51Nod 1225 余数之和 —— 分区枚举

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1225 1225 余数之和  基准时间限制:1 秒 空间限制:1 ...

  5. Kafka0.7运行时报错 kafka/javaapi/consumer/ConsumerConnector : Unsupported major.minor version 51.0 解决

    目前中央库中 org.apache.kafka 是用jdk1.7编译的, 故跑在1.6的jvm中会报错 解决方案: 1. 下载kafka源码, 本地sbt进行install, 编译前 java -ve ...

  6. cmake编译后vs编译（build Solution）报错的解决办法

    很久没有写blog了,最近在kdevelop上开发程序的时候,需要在主函数的文件中引用别的文件的函数,添加了对该函数所在的头文件之后仍然出现该函数没有定义的错误.经历了一番波折之后,才发现是忘记了在c ...

  7. BZOJ 1572 [Usaco2009 Open]工作安排Job：贪心 + 优先队列【先放再更新】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1572 题意: 有n个工作,每个工作有一个截止日期dead[i]和收益pay[i]. 完成一 ...

  8. nodejs && apidoc

    1. 安装nodejs      http://www.nodejs.org      源码编译      configure —prefix=/usr/local/nodejs      make ...

  9. fiddler篡改请求数据

    有时需要修改请求或返回结果来验证网站存在的漏洞,因此需要使用到fiddler的断点功能. 如何修改请求前数据? 1.设置请求前断点 Rules--Automatic breakpoints--befo ...

  10. TF-IFD算法及python实现关键字提取

    TF-IDF算法: TF:词频(Term Frequency),即在分词后,某一个词在文档中出现的频率. IDF:逆文档频率(Inverse Document Frequency).在词频的基础上给每 ...