<!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. JS性能优化——DOM编程

    浏览器中的DOM  天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...

  2. LeetCode：访问所有节点的最短路径【847】

    LeetCode:访问所有节点的最短路径[847] 题目描述 给出 graph 为有 N 个节点(编号为 0, 1, 2, ..., N-1)的无向连通图. graph.length = N,且只有节 ...

  3. 4.Web工程师的开发工具箱

    第四章 效率工具ShadowSocks window代理服务器FalconProxy chrome代理服务器stackoverflow.com Stack Overflow是一个与程序相关的IT技术问 ...

  4. 【Leetcode-easy】String to Integer(atoi)

    题目要求:字符串->整型 * 1. 首先需要丢弃字符串前面的空格. * 2. 然后可能有正负号(注意只取一个,如果有多个正负号,那么说这个字符串是无法转换的,返回0.比如测试用例里就有个“+-2 ...

  5. android的GPS代码分析JNI如何HAL之间如何设置回调函数【转】

    本文转载自:http://blog.csdn.net/kmesg/article/details/6531577 本文只关注JNI和HAL的接口部分 在jni的android_location_Gps ...

  6. 五子棋AI的思路

    隔了一年才把AI思路给写了... 需求分析与设计方案:http://www.cnblogs.com/songdechiu/p/4951634.html 如需整个工程,移步http://download ...

  7. oracle数据库用户创建删除以及数据导入

    dmp文件的导入:1.首先,先创建表空间与用户--创建表空间create tablespace CCFOCUS01datafile 'D:\app\Administrator\oradata\orcl ...

  8. HDU 2643 Rank：第二类Stirling数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2643 题意: 有n个个选手参赛,问排名有多少种情况(可以并列). 题解: 简化问题: 将n个不同的元素 ...

  9. html5--1.15 style元素与HTML样式基础

    html5--1.15 style元素与HTML样式基础 学习要点: 1.引入样式的三种方式2.了解style元素插入内联样式表与内部样式表 1.引入样式的三种方式 1.外部样式表:通过 link元素 ...

  10. insert …select …带来的死锁问题

    mysql中 insert …select …带来的问题 当使用insert...select...进行记录的插入时,如果select的表是innodb类型的,不论insert的表是什么类型的表,都会 ...