css实现自适应正方形
这里介绍7种方法,仅供参考。
1、vm单位
<div class="square-shape">这是一个可以自适应的正方形,此法适用于移动端web页面。</div> .square-shape { width: 50%; height: 50vw; border: 1px solid #f00; }
2、padding-top实现
<div class="square-shape">这是一个可以自适应的正方形,设置高度避免被内容撑开多余的高度。奇怪的是,内容在框框外面。</div> .square-shape { width: 50%; height: 0; padding-top: 50%; border: 1px solid #f00; }
3、padding-bottom实现
<div class="square-shape">这是一个可以自适应的正方形,此法很好用,有内容也是正方形。</div> .square-shape { width: 30%; height: 0; padding-bottom: 30%; border: 1px solid #f00; }
4、伪元素的margin-top
<div class="square-shape">这里如果有内容,就不是正方形喽,限制height也没有用。</div> .square-shape { width: 100%; overflow: hidden; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; margin-top: 100%; }
5、伪元素的padding-top
<div class="square-shape">这里如果有内容,就不是正方形喽。</div> .square-shape { width: 30%; max-width: 200px; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; padding-top: 100%; }
6、子元素margin-top
<div class="square-shape"> <div class="content">这是一个可以自适应的正方形</div> </div> .square-shape{ overflow: hidden; width: 50%; background-color: black; } .content{ margin-top: 100%; }
7、伪元素的padding-bottom,内嵌absolute元素
<div class="square-shape"> <div class="content">这是一个可以自适应的正方形</div> </div> .square-shape { width: 50%; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; padding-bottom: 100%; } .content { position: absolute; width: 100%; height: 100%; }
css实现自适应正方形的更多相关文章
- css实现自适应正方形的多种方法实现
方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...
- css实现自适应正方形的方法
页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢? 很简单,我们可以利用元素的padding或margin的百分比值是参照父元素的宽度这一特性来实 ...
- CSS 实现自适应正方形
在处理移动端页面时,我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果,比如,商品详情页, 方法1.CSS3 vw单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw ...
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 常见css垂直自适应布局(css解决方法)
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
- 常见css水平自适应布局
左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
随机推荐
- npm install --save
1. npm install:本地安装 2. npm install -g:全局安装 我们在使用 npm install 安装模块或插件时,有两种命令把它们写入到 package.json 文件中去, ...
- Spark记录-Scala异常处理与文件I/O
Scala的异常处理类似许多其他语言(如Java).它不是以正常方式返回值,方法可以通过抛出异常来终止. 但是,Scala实际上并没有检查异常. 当您想要处理异常时,要像Java一样使用try {.. ...
- js 语法高亮插件之 Prism.js
之前也介绍过几款语法高亮插件<为博客园选择一个小巧霸气的语法高亮插件>以及关于他们的综合性能<再议 语法高亮插件的选择>.今天在小影志博客看到<使用 Prism.js 实 ...
- Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发
LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件.利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用! 本文由前端交流QQ群管理员—— ...
- CS229 笔记08
CS229 笔记08 Kernel 回顾之前的优化问题 原始问题为: \[ \min_{w,b} \frac{1}{2}||w||^2\\[1.5em] {\text{s.t.}}y^{(i)}\le ...
- HDU 3371 Connect the Cities 最小生成树(和关于sort和qsort的一些小发现)
解题报告:有n个点,然后有m条可以添加的边,然后有一个k输入,表示一开始已经有k个集合的点,每个集合的点表示现在已经是连通的了. 还是用并查集加克鲁斯卡尔.只是在输入已经连通的集合的时候,通过并查集将 ...
- HDU 2544 最短路 最短路问题
解题报告: 这题就是求两个单源点之间的最小距离,属于最短路问题,由于数据量很小,只有100,所以这题可以用弗洛伊德也可以用迪杰斯特拉,都可以过,但是用迪杰斯特拉会快一点,但用弗洛伊德的代码会稍短一点, ...
- 关于cookie和session
在设置cookie的时候,它会保留在本地,无论你有没有退出浏览器都是.但是session只能在登录状态有效.退出浏览器过后就会消除掉.同时设置也是有问题的. @app.route('/login',m ...
- linux磁盘已满,文件占用情况
du -sh /data0/* 如上,/data0/* 表示查看data0文件夹下各个目录的磁盘占用情况 df -h 查看总的磁盘占比
- Git 使用规范流程【转】
转自:http://www.ruanyifeng.com/blog/2015/08/git-use-process.html 作者: 阮一峰 日期: 2015年8月 5日 团队开发中,遵循一个合理.清 ...