为什么叫这个话题呢？其实刚开始接触前端的时候，我以为界面就跟普通的流式布局一样。这里放一个div，那里放一个div，整个界面就搭建好了。做了几个项目后，好像自己的想法是对的，只要按照之前的思路，界面搭建就可以解决大部分了。但有时，需要进行一些特殊处理，而这些特殊处理可能会破坏你头脑中的流程布局。这里介绍几种情况，仅供参考（持续更新中）1.位置欺骗——图片占位场景从后端拉取一张图片，然后在前端显示。图片宽高为100px，或者宽高比为100px1:1实现//html//cssimg{width:100px;height:100px;}在PC端一般没问题，因为宽高是固定的。但是在移动端，这种方式就显得不合理了。宽度一般设置为百分比，但高度不能设置为百分比。移动端的高度一般都是可以无限拖动的，设置一个百分比显然是不行的。为什么在移动设备上使用百分比？请戳？cssplaceholder是通过margin和padding实现的：margin/padding百分比是以父元素的宽度为参考，假设图片的宽度为20%#father{width:20%;}#father:after{内容:'',显示:块;margin-top:100%;}通过上面的方法可以拉伸div达到等宽等高。如果是这样如何添加图片呢？你可以用绝对定位来做到这一点。#父亲{宽度：20%；位置：相对；}#father::after{内容：''，显示：块；margin-top:100%;}img{position:absolute;宽度：100%；top:0;}Deception通过定位方式和伪类实现内容覆盖侧边消失思维：如何实现这样的场景可以分为两步，先在底部加一条横线，然后让横线移动到实现第一步：通过绝对定位实现一条底部水平线。test{width:180px;高度：25px；行高：25px；颜色：#7E7E99；}.select{位置：相对；}.select:after{位置：绝对；底部：0；左：0px；宽度：100%；高度：2px；内容：'';background:'black';}第二步：让水平线移动。把线段的宽度设置为0就消失了，那么怎么从中间消失呢？敲黑板：设置线段的margin-left为50%，相当于线段从左到右移动了一半。以上两种效果结合起来就是从两边到中间消失。具体代码如下：.test{width:180px;高度：25px；行高：25px；颜色：#7E7E99；}.select{位置：相对；}.select:after{位置：绝对；底部：0；左：0px；宽度：100%；高度：2px；内容：'';背景：“黑色”；transition:all1sease-in-out;}.no-select{position:relative;}.no-select:after{position:absolute;底部：0；左：50%；宽度：0；高度：2px；内容：'';背景：“黑色”；transition:all1sease-in-out;}通过动画（Width和leftmargin）变化组合来欺骗两个表单，变成一个表单（消失）变化。
