用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 ...
随机推荐
- PAT1106:Lowest Price in Supply Chain
1106. Lowest Price in Supply Chain (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CH ...
- 闪回工具flashback
Ⅰ.背景 早先操作数据误操作后,我们一般通过全量备份+binlog的方式来实现恢复(前滚) 有时只想撤销一个几分钟前的操作,采用这种方式就会显得很笨重 大家都知道Oracle有个叫做flashback ...
- LeetCode Javascript实现 344. Reverse String 292. Nim Game 371. Sum of Two Integers
344. Reverse String /** * @param {string} s * @return {string} */ var reverseString = function(s) { ...
- this.state.menuList.toArray()[0].get('id')
用toArray()处理传过来的list用get(")获取里面的值 而我用的是attributes得方法
- 如何深度复制一个javascript对象
前言 最近有人问我,如何将一个对象复制一份,因为他遇到了一个需求,需要将后端获取的数据,保存一份,原始数据会因为交互而发生变化,最终需要对比两份数据的异同. 他是一个刚入行的小朋友,他的实现方式就是新 ...
- Extjs--12种布局方式
按照Extjs的4.1的文档来看,extjs的布局方式大致有12种,下面一一介绍,有些代码就是文档中的. 1.Border 边界布局 border布局,最多可以将页面分割为"东南西北中&qu ...
- python之12306自动查票
一.导读 本篇文章所采用的技术仅用于学习.研究,任何其他用途请自行承担后果. 12306自动查票使用到的python库主要是splinter,同时也涉及到查票的城市编码,具体的城市编码请在网络上搜 ...
- Python3.6安装报错 configure: error: no acceptable C compiler found in $PATH
安装python的时候出现如下的错误: [root@master ~]#./configure --prefix=/usr/local/python3.6 checking build system ...
- 了解tomcat的server.xml文件
<?xml version='1.0' encoding='utf-8'?> <!-- Note: http://201605130349.iteye.com/blog/229898 ...
- 在MFC中UpdateData()的作用
UpdateData()用来刷新数据,其中UpdateData(true)将控件中的数据传递到控件捆绑的变量中去.UpdateData(false)将变量值传递到控件中去.例如:窗口中用 DDX_Te ...