最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去

需求是实现一个自适应的正方形卡片,效果如下:

顺便(开个坑)写个系列,总结那些设计精妙的布局结构

本次页面的 HTML 结构如下:

<div class="row clearfix">
<div class="col fl">
<div class="card"></div>
</div>
<div class="col fl">
<div class="card"></div>
</div>
</div>

套路一、垂直 padding + 定位

在 CSS 中,margin 和 padding 的百分比数值总是相对于父元素的宽度来计算

利用这个特性,只要将 padding-top 或者 padding-bottom 设置为与 width 相同的百分比,再将 height 设为 0,最后通过定位实现自适应的正方形盒子

.col {
width: 25%;
height:;
padding-bottom: 25%;
position: relative;
}
.card {
position: absolute;
top:;
right:;
bottom:;
left:;
border: 1px solid #C0C0C0;
}

有很多文章都提到过,因为设置了 height: 0; 导致 max-height 无效

通常会使用伪类元素来解决这个问题,但同时也会有高度溢出的情况

如果采用我上面的 html 结构,只需要将 max-height 写到 .card 上,就不会有这个问题,也就用不着伪类元素了

套路二、新单位 vw

参考文章:http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

除了常用的 px,em,rem 之外,CSS 中还有很多单位,比如 pt,ch,vh,vmin 等

这里提到的单位 vw 是一个 相对于浏览器内部的可视区域(viewport)宽度的单位(敲黑板,不是父元素)

vw 等于 viewport 宽度的 1%,假设浏览器内部宽度为 1000px,那么 1vw = 10px

然后 CSS 代码就很简单了

.col {
width: 25%;
height:25vw;
}
.card {
width: 100%;
height: 100%;
border: 1px solid #C0C0C0;
}

套路三、用透明图片扩充内容

极不推荐!!

大学的时候见过这种布局,这种套路是黔驴技穷的表现,了解一下就行

在 HTML 结构中添加一个  <img> 标签

<div class="col fl">
<img src="" alt="正方形透明图片" width="100%"/>
<div class="card"></div>
</div>
.col {
width: 25%;
height:;
position: relative;
}
.card {
position: absolute;
top:;
right:;
bottom:;
left:;
border: 1px solid #C0C0C0;
}

Layout 不可思议(一)—— CSS 实现自适应的正方形卡片的更多相关文章

  1. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  2. css实现自适应正方形的多种方法实现

    方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...

  3. css实现自适应正方形的方法

    页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢? 很简单,我们可以利用元素的padding或margin的百分比值是参照父元素的宽度这一特性来实 ...

  4. css实现自适应正方形

    这里介绍7种方法,仅供参考. 1.vm单位 <div class="square-shape">这是一个可以自适应的正方形,此法适用于移动端web页面.</div ...

  5. CSS 实现一个自适应的正方形

      传统方法正方形用固定的形式写 直接长=宽写固定的值如下   .box{   width: 200px;   height: 200px;   background: pink;   color: ...

  6. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  7. 常见css垂直自适应布局(css解决方法)

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  8. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  9. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

随机推荐

  1. WireShark 使用

    1.干货 Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直 ...

  2. ofBiz-groovy-freemarker

    ofBiz-groovy-freemarker根据浏览器的地址不同进入不同的页面 第一步:(2选一)创建groovy文件,或者java文件.在文件中定义变量 要放在 request.setAttrib ...

  3. dict.get()和dict['key']的区别

    a ={'name':'xxxx'} 1.a.get('gender') :如果不存在则返回一个默认值,如果设置了则返回默认的值,没有设置就返回None 2.a['gender'] :只能获取存在的值 ...

  4. 打印杨辉三角 --JS

    var arr = new Array(); for(var i = 0 ;i < 6 ; i++){ if(i == 0){arr.push(1);} else if(i == 1){arr ...

  5. 一个Web前端自学者的自述

    想来想去还是写下这篇文章,先说明,我精通JAVA编程语言和web前端常见的技术,个人是做JAVA的多,但是更加喜欢前端.因为我从高一开始接触JAVA,家父是黑马的JAVA讲师,自己对编程很热爱,在大学 ...

  6. Python 项目实践一(外星人入侵小游戏)第五篇

    接着上节的继续学习,在本章中,我们将结束游戏<外星人入侵>的开发.我们将添加一个Play按钮,用于根据需要启动游戏以及在游戏结束后重启游戏.我们还将修改这个游戏,使其在玩家的等级提高时加快 ...

  7. 1.移植uboot-分析uboot启动流程(详解)

    本节总结: uboot启动流程如下: 1)设置CPU为管理模式 2)关看门狗 3)关中断 4)设置时钟频率   (FCLK:HCLK:PCLK=1:2:4,FCLK=120Mhz) 5)关mmu,初始 ...

  8. 【HTML5】input元素type属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【java】多线程同步死锁

    package 多线程; class A{ public synchronized void say(B b){ System.out.println("A说:你把你的本给我,我把我的笔给你 ...

  10. 用于文件系统的C库函数

    9/20/2017 学<LINUX C编程实战>中 1.打开 File *fopen(const char *path , const char * mode); fopen实现打开指定的 ...