如何欺骗你的用户

谁践踏了优雅 2022-07-15 15:29 183阅读 0赞

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

HTML:

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项目将总是处于同一条对角线上。

[http_blog.csdn.net_zhou_xiao_cheng_article_details_52878834]: http://blog.csdn.net/zhou_xiao_cheng/article/details/52878834
[20161020224659324]: /images/20220715/fab70a370bcb448c8a57cd43e58fca0a.png
[20161020235610762]: /images/20220715/3eb1c6b344eb49868a3933f8416b58f9.png