如何欺骗你的用户

本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52878834,未经博主允许不得转载。
在前端,很多时候你需要欺骗你的用户,比如说,你希望用户看到下面这样的布局:
这里写图片描述
去实现这样一个布局并不是什么难事,实现的方法也有多种,在这里,我想说的是,眼睛所看到的东西,往往不一定是真实的。
因为上面的布局实际上可能是这样的:
这里写图片描述
当右上角的flex项目被处理掉后,你就成功欺骗了你的用户。
这其实是一种逻辑思维,当你发现一种布局有更简单的实现方法时,欺骗一下你的用户又何妨?
在这里,我们采用flex布局方式,不论flex容器大小如何改变,两个蓝色的flex项目总是处于对角线上。
在这个Demo中,一共存在3个flex项目,我对其进行了归类及划分,以便减少代码的不必要冗余。下面是实现代码:

HTML:

<div class="box">    <!-- 容器 --> 
  <span class="item"></span>    <!-- 项目 --> 
  <span class="item item2"></span>    <!-- 项目 --> 
  <span class="item item3"></span>    <!-- 项目 -->
</div>

CSS:

.box{
  height: 100px;
  width: 100px;
  background-color: gray;
  display: flex;    /*采用flex布局方式 */
  justify-content: space-between;    /*设置项目在主轴上的对齐方式*/
}

.item {
  height: 10px;
  width: 10px;
  background-color: blue;
}

.item2{
  align-self: center;    /*设置在项目上的属性align-self覆盖了容器的align-items属性
                         (这里并没有写明,因为默认不写为align-items:flex-start),
                         允许该项目的对其方式与其它项目不同*/
}
.item3 {
  background-color: transparent;    /*对右上角的项目进行处理(使其透明,不可见)*/
}

你可以尝试改动flex容器的大小,不论如何改变,两个蓝色的flex项目将总是处于同一条对角线上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值