内容简介:20181123技能遗忘清单写给未来的自己,也许几个礼拜,也许几年。今天突然接到一个任务,做一个专题。那么我肯定用html+css+js写,但是由于我写了大半年的小程序,我已经忘记了动画怎么写,特效怎么写,甚至连单位布局都忘记了。
20181123技能遗忘清单
- flex的用法
- rem的计算方式
- font发光,字体效果
写给未来的自己,也许几个礼拜,也许几年。
今天突然接到一个任务,做一个专题。那么我肯定用html+css+js写,但是由于我写了大半年的小程序,我已经忘记了动画怎么写,特效怎么写,甚至连单位布局都忘记了。
于是我开始百度/谷歌,像一个初学者一样,一步一个脚印。写页面的速度慢的连我自己都无法想象,一个移动端的页面,我居然调试了一天。按照以前这个复杂的页面我只需要2小时。
可怜弱小又无助。
所以记录一下技能点,以备不时之需。也许下一次写网页又是半年后了呢。
在整理的过程中,竟然发现以前理解的一些东西是错误的。
写给自己的flex笔记
关于flex是我之前一直用的布局,由于浏览器的限制,我每次写都要查询兼容模式。这次查了下canIuse,关心了下flex当前的支持程度。除了ie令人捉急,其他的没毛病。所以这次我写flex只加了-webkit-这一个前缀的兼容以防万一。
重点!Flex的css3数行都和这个重要的概念有关。flex一共有两根轴:main axis和cross axis,大家一般认为主轴就是水平,交叉轴就是垂直的。但是!这是错误的!请与水平垂直这两个方位的概念区分开,这是一个方位,如果说当年定义的时侯为什么不命名为vertical&horizon??原因就是main axis没有一个固定的方位,所以请不要再通过水平垂直的方位来理解了。那么主轴是怎么区分的呢?其实很简单按照当前flex的方向,是水平排列还是垂直排列。如果是水平排列(row),主轴就是水平的,交叉轴就是垂直的,反之亦然。这是一个很重要的概念。
flex容器的参数:
- flex-direction:
- row(从左到右默认)
- row-reverse(从右到左)
- column(从上到下)
- column-reverse:(从下到上)//确认主轴的方向
- flex-wrap(和word-warp一样控制换不换行):
- nowrap(不换行,大家挤一挤,默认)
- wrap(正常向下换行)
- wrap-reverse(逆流而上换行)
- justify-content:
- flex-start(头)
- flex-end(尾)
- center(中间)
- space-between(头尾然后中间散开)
- space-around(有点像margin:0 XXpx的感觉)//按照主轴排列flex项目
- align-items:
- flex-start(头)
- flex-end(尾)
- center(中间)
- baseline(基准线)
- stretch(顶天立地);//按照交叉轴对齐flex项目
flex布局下的元素:
- flex-shrink:0(不缩小)|1(能屈)
- flex-grow:0(屹立不动)|>1(能伸)
- flex-basis: 固定大小//如果使用百分比,那就是按照主轴的方位来的,如果是水平的就是宽度的%,垂直就是高度的%
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ](上述三个参数的简写)
布局结构一:N个相同元素的并列
遇到这样的布局,尤其是移动端,我的内心是拒绝的。普通的操作是用float布局,然后%控制定义元素宽度。但是这样元素之间的间距就很难控制,一个不小心最后一个元素就会掉到第二行。这个时候我们要用新技术flex来布局,flex的弹性功能我很看好。那么这个布局的好处是什么呢?就是即使每个元素高度不一样,他也会一行一行排好,而不是像float一样,如果元素的高度又高低,那么就很容易错位。而且float也没有伸缩自如的功能。主要是我可以和margin sya goodbye!另外,注意flex换行之后,如果设置了 justify-content:space-between;
,元素之间就会自动留出相同的空隙,并且头尾紧贴。
.flexbox{ width:320px; display:flex; margin-bottom:30px; } .flex1{ flex-wrap:wrap; justify-content:space-between; background:#444; } .flexbox .item{ flex:0 0 23%; width:23%; height:80px; background:#eee; margin:10px 0; } 复制代码
布局结构二:垂直居中
一般这种垂直居中的布局我们会用 position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);/*或者margin:-xx*/
;但是这种布局是固定的,无法伸缩自如,那么换成了flex会怎么样呢?很可惜是垂直排列换行的需求感觉效果很不错,可惜需要在一个固定的容器内。所以这里,我们可以加上flex-shink,让他收缩。同时不要加上 flex-wrap:wrap;
,不然优先换行。这样就可以实现垂直居中了。
.flex2{ flex-direction:column; align-items: center; justify-content: space-around; height:320px; } .flex2 .item{ margin:10px 10px; flex:0 1 25%; } 复制代码
布局结构三:搜索框,一固定一随意伸缩
这个布局可以说是很经典,相信大家日常也在用。那么没有flex的时候我们是怎么实现的呢?一般是随意伸缩的元素宽度100%,然后利用 padding-left:固定元素的宽度px;box-size:border-box;
,预留固定的位置。然后固定的元素定位absolute定位到这个预留的位置,好了完成了。那如果是flex?一个 flex-shrink:1|flex:0 1 auto;
即可解决所有问题。
.flex3{ align-items:center; flex-wrap:no-wrap; } .flex3 .item{ height:40px; line-height:40px; } .flex3 .item:first-child{ flex:0 1 100%; } .flex3 .item:last-child{ flex:0 0 25%; margin-left:1%; text-align:center; } 复制代码
可以参考的flex文章:
rem的计算方式
搞定了布局,我开始思考用什么单位。为了保证移动端不变性,首选rem。但是rem是怎么计算的?按了半天的计算器,我已经遗忘了rem的计算方式。毕竟小程序都是rpx,基本上就是设计稿照搬过去px变成rpx即可。
rem也就是font size of the root。他的原理,简单的说就是在html上设置字体,然后整个页面的字体基准就是来自于html的字体大小,也就是说所有的参照物都是一个,这样方便计算。至于root怎么计算的,一般就是按照设计稿的大小,如果是640px的设计稿,那么就按照640px的屏幕下是100px大小的基准来,如果是750px的设计稿,那么就按照750px下100px的基准来。这样px就不用换算了,直接除以100,就可以了。
想用vm,vh
然后vm的支持,还不够完美。
vm/vh是直接按照屏幕的尺寸来的,因此可以适配各种屏幕,比如我想要页面height:100%,通常做法是html,body{height:100%},这样设置之后我们才可以使用element{height:100%},但是这样会影响其他元素,也许这个页面我只是需要这一个元素100%呢?使用js也可动态控制大小,但是太麻烦了,这个时候我们就可以用height:10vh(因为1vh就是10分之一的屏幕高度),这样就是100%了。
字体发光效果
最近设计师很喜欢字体带有外发光的效果,这让我们很难做啊。如果是固定的字体,切图就可以了。但是如果是动态的,难道每次都切图吗。不不不,耗时耗力。这个时候text-shadow帮你打造华丽的bilingbiling效果。
当然在使用之前,我还是先查了一波canIuse,发现支持率还不错,可以放心地用了。
这个语法很简单,但是可以有很多玩法。如果需要做外发光地话,只需要偏移量都设置为零,然后设置模糊半径和阴影颜色即可。
text-shadow:X偏移量 Y偏移量 模糊半径 阴影颜色; 复制代码
这个属性最友爱地地方一是可以有很多阴影,二是阴影动画效果很绚丽。
.textShadowChange{ ///... animation: bilingbiling 2s ease infinite alternate; } @keyframes bilingbiling { from { text-shadow: 0 0 1px white, 0 0 2px white, 0 0 4px pink, 0 0 8px pink; } to { text-shadow: 0 0 5px white, 0 0 10px white, 0 0 18px red, 0 0 20px red; } } 复制代码
以上所述就是小编给大家介绍的《一个中年girl的技能遗忘清单——曾今理解的Flex是错误的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 拒绝遗忘:高效的动态规划算法
- 「译」Goroutine 泄露——被遗忘的发送者
- 编程语言学习心得 (精简版):不要害怕遗忘
- 「遗忘」在神经网络中的重要性
- 结构化数据不应该被人工智能遗忘!
- [译] 被遗忘的面向对象编程史(软件编写)(第十六部分)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。