发表于: 2018-07-28 22:37:45
1 666
前言:
之前感觉日报需要有点东西才能写,后来听了师兄的话感觉也颇为道理,日报写的目的是对今天一天事情的复盘,时刻了解自己的任务进展如何,有没有认真学习,从自己的日报中可以很好的体现出来,同时也可以警醒自己的任务进度。
今天掌握的内容:
- 1.掌握了flexbox布局的大体含义:
- 通过青蛙练习(http://flexboxfroggy.com/)和网上参考的内容(https://css-tricks.com/snippets/css/a-guide-to-flexbox/),大致的了解了flexbox的用法,对一般常用的参数有了了解。下面做下总结,先对flex容器做个介绍。通常我们把采用flex布局的元素,都称之为flex容器(flex container),容器的所以子元素相应的成为它的成员,称为flex项目(flex item)。
容器默认有两根轴线,水平主轴线(main axis)和垂直的交叉轴线(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿着主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
-
- 容器flex container的属于有六个(常用的用红色标注):
-
- flex-direction(row/row-reverse/column/column-reverse)决定主轴的方向,也就是项目的排列方向
- flex-wrap(nowrap/wrap/wrap-reverse)表示一条轴线排不下是否进行换行
- flex-flow flex-direction和flex-wrap的简写形式
- justify-content(flex-start/center/flex-end/space-between/space-around) 项目在主轴上的对齐方式
- align-items(flex-start/flex-end/center/baseline/strench) 项目在交叉轴上的对齐方式,strench(默认值)如果未设置高度或设为auto,将占满整个容器的高度。
- align-content 定义多跟轴线的对齐方式
- 项目flex item的属于有六个(常用的用红色标注):
order 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 定义了在分配多余空间之前,项目占据的主轴空间。该属性可以设为跟width和height属性一样的值(比如350px)则该项目将占据固定空间。然后浏览器再根据这个属性,计算主轴是否有多余空间。
flex flex-grow,flex-shrink,flex-basis的缩写形式 该属性的快捷值:auto(1 1 auto)和none(0 0 auto)
align-self(auto/flex-start/flex-end/center/baseline/strench) 允许单个项目有和其他项目不一样的对齐方式,可覆盖align-items属性。
2.学会了用ps的选择工具选中图层:
之前一直都是一个一个小眼睛去找图层,今天找五角星的时候一直找不到图层,找了好久,浪费了好多时间于是乎开始需求真理所在,开始了网上各种搜索,发现都不是想要的答案,后来自己误打误撞知道了一种办法可以用来选中图层。就是先转到放大,或者切图的形式,然后按住Ctrl键不放,点击要找的图标即可,就是再右侧显示出想要的图层,然后进行隐藏图层,开始切图,也就是无背景的切图。这里由于截图问题就不截图演示了,说的也很清楚。
明天计划的事:
今天已经对flex布局有了一定得了解,也进行了整体的布局。
完成任务五css的全部工作。
总结任务五的任务,并写出任务总结。
评论