demo1

一个高度随宽度变化的正方形

 

(缩小屏幕试试)

原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的。

.Square{
display: inline-block;
background:#FF0000;
width:%;
}
.Square:before{
display: inline-block;
content:"";
padding-top:%;
}
.Square:before的父元素可以看作是.Square,把.Square:before的padding-top设置为100%;那么伪元素的高度就是父元素.Square的宽度了,这时候就能把.Square的高度撑开成为宽度大小
注意需要设置display: inline-block(IE6不支持该属性);

css的小demo的更多相关文章

  1. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  2. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  3. React问答小demo

    在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...

  4. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  5. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  6. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  7. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  8. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  9. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

随机推荐

  1. Linux中命令行编译java接口总是提示找不到符号的疑难杂症的解决

    今天学习java的接口,在linux的命令行下写代码练练手吧,啪啪啪一顿猛敲,写了一个接口UsbInserface,UDisk继承UsbInterface,写完了那就编译到bin目录呗. 当时写程序的 ...

  2. spring-data-mongodb一个系统xml文件里面配置两个数据源

    spring-data-mongodb一个系统xml文件里面配置两个数据源 参考文档如下: http://www.iteye.com/problems/92789 http://stackoverfl ...

  3. DIV布局之道一:DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  4. php代码结尾不要添加结尾标记

    如果文件内容是纯 PHP 代码,最好在文件末尾删除 PHP 结束标记.这可以避免在 PHP 结束标记之后万一意外加入了空格或者换行符,会导致 PHP 开始输出这些空白,而脚本中此时并无输出的意图.

  5. Arcgis server - ' packaging failed '

    我在使用ARCCatalog发布地图服务时,报这个错:packaging failed 然后我从头试,发现它提示说我的目录'C:\Users\Administrator\AppData\Local\E ...

  6. print流

    PrintWriter和PrintStream都属于输出流,分别针对字符和字节. PrintWriter和PrintStream提供了重载的print,println方法用于多种类型的输出 Print ...

  7. 你好,C++(30)“大事化小,小事化了”5.4.3 工资程序成长记:函数

    5.4.3 工资程序成长记:函数 自从上次小陈“程序员”的工资程序得到老板的夸奖,口头许诺给他涨工资以后,老板再也没有找过他,涨工资的事自然也就没有下文了.这天,老板又突然召他去办公室.这下可把小陈高 ...

  8. 逆天的IE7中,绝对定位元素之间的遮盖问题

    个人比较支持IE9以上的版本,认为他们的样式和效果都是比较人性化的,不过很多时候还是不得不考虑其他版本浏览器的感受,这里IE6就不用考虑他了,这货简直就是IT史上的奇葩,这里要说一个IE7的绝对定位和 ...

  9. php知识点总结(待续)

    function_exist()如果没有函数,返回空. is_string($str) 如果$str是布尔型的值,返回为空.是返回1,错误返回空is_array() 同上 字符串输出时,加逗号就自动空 ...

  10. postgres安装 以及修改postgres 密码

    #postgres安装 apt-get install postgresql-9.3 postgresql-client-9.3 postgresql-contrib-9.3 postgresql-s ...