[无名弟子]JS-桂梦|2018年11月17日的日报-技能树.IT修真院

发表于： 2018-11-17 21:11:17

1 864

今天完成的事情：

开始了任务五：

1、第一步还是看任务步骤要求，先下载资料，然后先构造header头部的框架。

2、然后看了之前自己做任务的日报，回顾下前面的知识点。

3、然后了解了下flex的布局，flex布局的元素属性和值得定义作用还有代码的写法。

了解了flex布局

1、flex是flexibie box缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为flex布局，如块级元素和行内元素都可以使用flex布局。

注意：设成flex布局后，子元素的float、clear（清除）和vertical-align（垂直对齐）属性将失效。

2、采用flex布局的元素称为flex容器（flex container），简称“容器”。

它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

容器默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start（主轴起点）。

结束位置叫做main end。

交叉轴的开始位置叫做cross start（侧轴起点）。

结束位置叫做cross end。

3、容器的属性：

有6个属性可以设置在容器上。

（1）flex-direction 决定主轴的方向（即子元素项目的排列反向）

（2）flex-wrap（包裹）

默认情况下，项目都排在一条线上（又称“轴线”），flex-wrap属性定义如何换行

( 3）flex-flow

它的属性是flew-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

（4）justify-content（内容两端对齐）属性定义了项目在主轴上的对齐方式。

（5）align-items属性定义项目在交叉轴上如何对齐。

（6）align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

明天计划完成的事情：

1、了解html中footer（页脚）标签的定义还有代码的实际操作，理解footer在html中起到什么作用。

2、完成下载资料的切图。

3、完成背景图的设置，保证图片拉伸不变形。需要详细看下background的各项属性，如：background-img，background-position，background-repeat（重复），background-size这四点。

遇到的问题：

今天暂时没遇到问题，都是在复习以前的知识和新内容的概念。

收获：今天都只是在书面上了解了新知识，还没有动手用代码的形式写出来，明天打算实际操作下看下效果，增加理解记忆。

返回列表