内容简介:前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。这节还是聊天消息中遇到的问题,
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。
场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。
我们要讲什么?
这节还是聊天消息中遇到的问题, 群组消息之头像 ,哈哈是不是感觉好熟悉,对的是我之前抛出的一个问题。
我们先来了解一下需求,微信大家都有吧,拉个群注意观察群头像。会成为如下效果。今天我们就是要实现一下它。
flex 实现微信头像布局
效果地址 ,本来是在 JSRun 的,但是大哥最近有点不稳定老连不上。如果你说 什么Flex我不会啊 ,之前写的Flex的教程一发入魂。
-
看第一个效果(avatar3)一个在上,两个在下,想想有什么属性适合?
flex-wrap
用来规定内容放不下,如何换行- nowrap(不换行)(默认值)
- wrap(换行,第一行在上方)(两个在上,一个在下)
- wrap-reverse(换行,第一行在下方)(两个在下,一个在上)
- 是不是发现,效果对了,但是 排序 的头像错了?微信头像是加群时间升序的。不用担心,渲染的时候取反就ok, 负负得正嘛 。。
- 头像等分,我是参照100px。一个90px,两个45px,三个30px。然后使用 百分比 实现。为什么要用百分比呢?因为你也不能保证所有地方都是100px吧。
- 然后你是不是发现多行的时候,间距有问题?
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。设置一下就好了
background-image 实现微信头像布局
效果地址 ,我还是个孩子,写起来真的烦啊,我就写前几个好不好。
这个效果的实现依赖于多重背景实现, background --MDN
absolute 实现
效果地址 ,写起来感觉比上一个方案要简单一点,但是,还是不好写。我只写了前几个。
文档流+after/before填充
效果地址 ,基本上属于看到哪里不对改哪里,操作上来说,比上两个方案要简单一些。
其他思路
- 需要换行的地方插入br标签,然后水平居中。垂直居中使用padding。
- 方案同上垂直居中换成table-cell。等其他方法。
- grid
方案优缺点
方案 | 理解程度 | 位置控制 | 描述 |
---|---|---|---|
flex | 易 | 弱 | 很好理解,思路清晰,但是无法对于设计稿精细微调 |
背景图 | 难 | 强 | 高可控性,但是代码复杂,不易理解修改 |
绝对定位 | 难 | 强 | 高可控性,但是代码复杂,不易理解修改,比背景图还是要好理解一点 |
文档流 | 中 | 中 | 可控性较好,但是代码无关联,易于修改。不推荐。 |
grid | 中 | 强 |
后记
你有什么方案可以在评论区留言讨论
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端培训-初级阶段(1 - 4)
- 前端培训-初级阶段(5 - 8)
- 前端培训-初级阶段(13) - 类、模块、继承
- 前端培训-初级阶段(13) - ECMAScript (内置对象、函数)
- 前端培训-初级阶段-场景实战(2019-05-09)-聊天框-发送框
- 前端培训-初级阶段-场景实战(2019-06-06)-下载文件&下载进度
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。