用css实现正方形div
目标：实现一个正方形，这个正方形边长等于
方法一：使用单位vw， （ps我觉得这个是最简单的方法）
html结构也很简单，只有一个div即可
<html>
<body>
<div class="square">
</div>
</body>
</html>
.square{
width: 50vw;
height: 50vw;
background: blue;
}
方法二： 使用padding-bottom
要点：
- height: 0， 内容会溢出到padding里，不用担心~~
- padding-bottom 值设置为百分比时候，相对于包含块的宽度。
- 需要设置包含块
html结构：
<html>
<body>
<div class="container">
<div class="square">
</div>
</div>
</body>
</html>
css:
*{
margin:;
}
/* 设置撑满页面可见区域 */
.container{
height: 100vh;
width: 100vw;
background: palegoldenrod;
}
.square{
width: 50%; /* 相对与container的width */
padding-bottom: 50%; /* 相对与container的width */
background: palegreen;
}
行了吧，两种就可以了，你也可以使用margin，不过会有塌陷的危险，所以，就这两个够用啦~~
用css实现正方形div的更多相关文章
- css实现正方形div的3种方式
网上百度了几种可以按照百分比画方框的方法 1.CSS3 vw 单位 1vw = 1% viewport width <div class="vw">hello,view ...
- 用css控制一个DIV画图标。
在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...
- 纯CSS写正方形自适应宽高，且左侧高与正方形高保持一致
先上图 虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div class="box"> <div class="le ...
- CSS 奇思妙想 | Single Div 绘图技巧
经常能看到有关 CSS 绘图的文章,譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画.实现的方式就是通过堆叠 div,一步一步实现图画中的一块一块.这种技巧本身没有什么问题,但是就是少了一些 ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- DIV+CSS常见问题：DIV如何设置一个像素高度？
CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...
- CSS布局：div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
随机推荐
- MySQL SHOW TABLE 输出的每列详细介绍
Name: 表名 Engine: 表的存储引擎(旧版本中,该值为Type) Row_format: 行的格式.对于MyISAM表,可选的值为Dynamic.Fixed或者Copressed. Dyna ...
- PAT1061:Dating
1061. Dating (20) 时间限制 150 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Sherlock Holme ...
- vue入坑教程（一）
1.脚手架搭配webpack的安装 (1)需要检查自己的电脑有没有安装node和npm 如果没有安装可以参考官网,以及安装的步骤 官方中文网地址:http://nodejs.cn/ (2)下载webp ...
- Base64 image
[前端攻略]:玩转图片Base64编码 什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样 ...
- PHP设计模式 -- 注册模式
参考文章:https://segmentfault.com/a/1190000007495855 简介 注册树模式又称注册模式或注册器模式.注册树模式通过将对象实例注册到一棵全局的对象树上,需要的时候 ...
- DUBBO报错分析—1（连接zookeeper成功，调用方法无反应，不报错）
思路分析 调用方法时,最后调用执行的是mapper的sql语句,既然调用对应的方法无法获取返回值,多是sql错误,但是并未报sql错误,说明可能是与sql相关的数据源配置错误. 过程调试 经尝试,当直 ...
- html和js，外部js 的下载执行顺序
当用户开始访问,首先下载html资源和外部js资源,在chrome中显示的是html先下载,然后下载外部js,外部js的下载顺序安引用顺序,但是下载到达情况则视情况而定,接着才是图片和其他资源,但是要 ...
- Django+Bootstrap+Mysql 搭建个人博客（六）
6.1.comments插件 (1)安装 pip install django-contrib-comments (02)settings INSTALLED_APPS = [ 'django.con ...
- Elasticsearch笔记六之中文分词器及自定义分词器
中文分词器 在lunix下执行下列命令,可以看到本来应该按照中文"北京大学"来查询结果es将其分拆为"北","京","大" ...
- 使用Onenote & Evernote & VSC+Markdown构建个人笔记系统
Onenote & Evernote & VSC+Markdown构建个人笔记系统 umeowbing(转载请注明出处) 1 Why 笔记本太多,全部带着太重,查找起来也很麻烦-- 笔 ...