为什么叫这个题目呢？

其实，自己刚开始接触前端的时候，以为界面就是和正常的流式布局一样，这里放一个div，那里放一个div，整个界面就搭建完成了。做过几次项目后，好像自己想的也没错，就按照前面的思路，可以解决大部分的界面搭建。但是有的时候，需要一些特殊的处理，这些特殊的处理，可能会打破你脑袋中的流式布局。下面就介绍几种情况，仅供参考（持续更新）

1、位置欺骗——图片占位

场景

从后端拉取一张图片，然后显示在前端，图片宽高各为100px，或者宽高比为1:1

实现

//html//cssimg {    width: 100px;    height: 100px;}复制代码

在pc端一般是没问题的，因为固定宽度和高度。

但是在移动端，这样的方式就显得不太合理，宽度一般通过设置为百分比，但是高度就没法设置为百分比了，移动端的高度一般是无限拖动的，设置百分比明显是不行的。

为什么移动端要用百分比？

css 占位

通过margin和padding实现占位：margin/padding百分比都是以父元素的width为参照物的

假设图片的宽度为20%

#father {
        width: 20%;}#father:after {
        content: '',    display: block;    margin-top: 100%;}复制代码

通过上面的方式，就可以实现将div撑开，实现宽度和高度一致。如果这样怎么把图片给加进去呢？

通过绝对定位就可以了。

#father {
        width: 20%;    position: relative;}#father::after {
        content: '',    display: block;    margin-top: 100%;}img {    position: absolute;    width: 100%;    top: 0;}复制代码

欺骗

通过定位方式和伪类，实现内容覆盖

2、动画欺骗——从中间消失的线

场景

如图所示，div下面有一个横线，当点击它的时候，让他从中间开始向两侧消失

思考：如何实现这样一个场景，可以分为两步，先在底部加一个横线，然后再让横线动起来

实现

第一步：通过绝对定位，实现一个底部横线

.test {    width: 180px;    height: 25px;    line-height: 25px;    color: #7E7E99;}.select {  position: relative;}.select:after {    position: absolute;    bottom: 0;    left: 0px;    width: 100%;    height: 2px;    content: '';    background: 'black';}复制代码

第二步：让横线动起来

线段宽度设置为0就可以消失了，那么怎么可能让它从中间消失呢？

敲黑板：将线段的margin-left设置为50%，相当于将线段从左侧向右移动了一半

上面两个效果合起来就是从两侧向中间消失。

具体代码如下：

.test {    width: 180px;    height: 25px;    line-height: 25px;    color: #7E7E99;}.select {  position: relative;}.select:after {    position: absolute;    bottom: 0;    left: 0px;    width: 100%;    height: 2px;    content: '';    background: 'black';    transition: all 1s ease-in-out;}.no-select {    position: relative;}.no-select:after {    position: absolute;    bottom: 0;    left: 50%;    width: 0;    height: 2px;    content: '';    background: 'balck';    transition: all 1s ease-in-out;}复制代码

欺骗

通过动画的两种形态（宽度和左边距）的变化组合，变为一种形态（消失）的变化。