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. 读书笔记--用Python写网络爬虫01--网络爬虫简介

    Wiki - Web crawler 百度百科 - 网络爬虫 1.1 网络爬虫何时使用 用于快速自动地获取网络信息,避免重复性的手工操作. 1.2 网络爬虫是否合法 网络爬虫目前人处于早期的蛮荒阶段, ...

  2. EF 已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭

    在以下代码中,当第二次foreach时会抛出该异常,原因是:由于Entity在读取数据的时候使用的是DbDataReader进行读取,当作为IEnumuerable<T>对象MoveNex ...

  3. php获取某个目录下面文件的内容

    if(!defined('PATH'))define('PATH', dirname(dirname(__FILE__)).'/');ini_set ( 'include_path', '.:' . ...

  4. 关于在repeater中的checkbox实行多选和全选

    今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...

  5. no drawer view found with gravity RIGHT(Android实现侧滑菜单从右面滑出) 解决办法

    代码如下: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width ...

  6. 可清空文本的EditText

    代码如下: public class DeleteEditText extends EditText { private Context mContext; //删除图标 private Drawab ...

  7. android SQLite使用SQLiteOpenHelper类对数据库进行增删查改

    一个简单的例子,当点击按钮时进行相应的操作,效果图如下: 项目代码如下: DatabaseHelper类 package com.example.sqlitedatebasetest; import ...

  8. cognos开发与部署报表到广西数据质量平台

    1.cognos报表的部署. 参数制作的步骤: 1.先在cognos里面把做好的报表路径拷贝,然后再拷贝陈工给的报表路径. 开始做替换,把陈工给的报表路径头拿到做好的报表路径中,如下面的链接http: ...

  9. 初探react

    知道这个框架有一段时间了,可是项目中没有用到,也懒得整理,最近两天比较清闲,又想起了它.好了,废话不多说了,都是干货. react是个什么框架? 为什么用react? react 的原理 react有 ...

  10. python requests 基础学习

    首先,Python 标准库中的 urllib2 模块提供了你所需要的大多数 HTTP 功能,但是它的 API 不友好.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来 ...