用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 ...
随机推荐
- 树莓派创建WiFi热点
将代码clone到本地 git clone https://github.com/oblique/create_ap cd create_ap make install 安装依赖的库 有些源中可能使用 ...
- Global一点小经验
Global: Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法,他位于应用程序根目录下. 这个 Global.asax ...
- Python_字符串的大小写变换
''' lower().upper().capitalize().title().swapcase() 这几个方法分别用来将字符串转换为小写.大写字符串.将字符串首字母变为大写.将每个首字母变为大写以 ...
- 如何使用 toml 配置 SpaceVim
配置 SpaceVim 主要包括以下几个内容: 设置 SpaceVim 选项 启动/禁用模块 添加自定义插件 添加自定义按键映射以及插件配置 设置SpaceVim选项 原先,在 init.vim 文件 ...
- String的replaceAll（）用法详解
使用replaceAll实现字符串替换,即把字符串某些字符全部替换成别的 // 将str中的所有数字替换为"数字"二字 String str = "abc123bcd45 ...
- 请注意写代码的习惯与态度(Java)
注: 以下内容引自http://blog.csdn.net/xtayfjpk/article/details/52136686 请注意写代码的习惯与态度(Java) 原创 2016年08月06日 16 ...
- synchronized和volatile简介
简介 volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的存取变量的方式. 2345678 int i1;int geti1() ...
- .net core下使用Thrift
因网站组(.net)与游戏服务端(c++)原来使用REST API通讯效率稍显低下,准备下期重构时改用rpc方式,经比较Thrift和gRPC两者的优劣(参照网上的对比结果),最终决定使用Thrift ...
- OpenCV-Python学习01
import tensorflow as tf 1 # -*- coding: utf-8 -*- 2 """ 3 Created on Tue Dec 31 19:16 ...
- HEOI2018——welcome to NOI2018
我不得不和烈士和小丑走在同一道路上, 万人都要将火熄灭, 我一人独将此火高高举起, 我借此火得度一生的茫茫黑夜. ——海子 弹指一瞬间,翘首以盼的HEOI2018就来了. 我,一个滑稽的小丑,带 ...