为什么叫这个题目呢?
其实,自己刚开始接触前端的时候,以为界面就是和正常的流式布局一样,这里放一个 div,那里放一个 div,整个界面就搭建完成了。做过几次项目后,好像自己想的也没错,就按照前面的思路,可以解决大部分的界面搭建。但是有的时候,需要一些特殊的处理,这些特殊的处理,可能会打破你脑袋中的流式布局。
下面就介绍几种情况,仅供参考(持续更新)
1、位置欺骗——图片占位
场景
从后端拉取一张图片,然后显示在前端,图片宽高各为 100px,或者宽高比为 1:1
实现
//html
<img src=url />
//css
img {
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;
}
欺骗
通过动画的两种形态(宽度和左边距)的变化组合,变为一种形态(消失)的变化。