css正方形盒子 自适应
| <!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正方形盒子 自适应的更多相关文章
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- 移动端 css/html (box-flex)自适应、等比布局
移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- CSS 屏幕大小自适应
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法: @medi ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
随机推荐
- Raspberry Pi3 ~ 使用eclipse进行远程调试
为了开发方便需要在电脑上对树莓派进行远程Debug. l 在eclipse中安装交叉编译(参照开发环境搭建) arm-linux-gnueabihf-gcc l 树莓派中检查是否安装了gdb ...
- Ubuntu编译Android使用的FFmpeg
本文介绍在Ubuntu平台编译FFmpeg库,用于Android使用.前提需要配置好NDK的环境.可以参考之前的文章Android NDK环境搭建. 下载FFmpeg 在官网下载FFmpeg源码,ht ...
- 通过崩溃trace来查找问题原因
从友盟中, 我们可能会得到如下信息: Application received signal SIGSEGV (null) ( 0 CoreFoundation 0x359348a7 __except ...
- pip 安装模块报错解决
系统版本 ubuntu Kylin 16.04 LTS 报错1:安装pip3 安装 Django 总是提示time out,无法安装. 改用国内源: 豆瓣源: sudo pip3 install - ...
- TS流分析
http://blog.csdn.net/zxh821112/article/details/17587215 一 从TS流开始 数字电视机顶盒接收到的是一段段的码流,我们称之为TS(Transpor ...
- h5打电话发短信写邮件怎么实现
// 一.打电话<a href="tel:0755-10086">打电话给:0755-10086</a> // 二.发短信,winphone系统无效< ...
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- 高并发压力下导致数据库bug
环境信息: linux 6.1 + oracle11.2.0.3 RAC 问题现象: 学校晚上6点选课,人数大概有3000,7点时,数据库报错如下(数据库到6点多还是可以连接的),数据库hu ...
- Unity 官方自带的例子笔记 - Space Shooter
首先 买过一本叫 Unity3D开发的书,开篇第一个例子就是大家经常碰见的打飞机的例子,写完后我觉得不好玩.后来买了一本 Unity 官方例子说明的书,第一个例子也是打飞机,但是写完后发现蛮酷的,首先 ...
- ACM学习历程—Hihocoder编程之美测试赛B题 大神与三位小伙伴（组合数学 ）
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给你一个m x n (1 <= m, n <= 100)的矩阵A (0<=aij<=10000),要 ...