[外门弟子]JS-8|2019年01月15日的日报-技能树.IT修真院

发表于： 2019-01-15 16:50:36

1 759

Day 14(一不小心又过了十二点，索性跟15号合并成一篇日报）

完成的事情

1.学习Flex弹性盒子

2.复习position

3.text-align-last、font-size、line-hight、letter-spacing

4.学习Form表单

遇到的问题

1.webstorm还是不能实时调试，而且最近debug任务三也只能出来404了

解决：查找了很多资料但好像没有人遇到跟我一样的情况，注意到旁边的下拉菜单，点开看觉得可能是没有选对文件，不知道为什么这里的路径跟名称都有点问题，修改之后恢复正常（师兄知道这个菜单是什么吗，我需不需要每次都修改）

第二天又不能实时刷新了

2.中间的content部分不能直接居中，要保持同设计图一样的样式

师兄说布局最好使用弹性盒子来做，只有在细部必须用到绝对定位的时候才使用position，而且绝对定位容易与其他的冲突，所以帮我修改并简化了代码，改为flex，并添加了justify-content使其居中，

复习position：

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果父元素设置绝对或相对定位，则相对于距离最近的祖先元素进行定位。如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。随着滚动并不一直停留在屏幕中。

fixed：基于浏览器窗口（或手机等终端窗口）浮动与文档流之上，随滚动一直停留在屏幕之中。

z-index （重叠---帧布局）: 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

收获

1.弹性盒子：任何一个容器都可以指定为Flex布局。

注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性都将失效

在flex布局的时候，需要注意行内元素（a, input, textarea, span, i等），需要根据情况设置成display: block;

弹性容器(Flex container)

包含着弹性项目的父元素，通过设置display属性的值为flex或inline-flex来定义弹性容器。

flex ：任何一个容器都可以指定为 Flex 布局。
inline-flex ：行内元素也可以使用 Flex 布局。

弹性项目(Flex item)

弹性容器的每个子元素都称为弹性项目。弹性容器直接包裹的文本将被包覆成匿名弹性单元。

轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为交叉轴(cross axis)。

flex-direction 确立主轴。
- row（默认值）：主轴为水平方向，起点在左端；

- row-reverse：主轴为水平方向，起点在右端；

- column：主轴为垂直方向，起点在上沿；

- column-reverse：主轴为垂直方向，起点在下沿。

justify-content 定义弹性项目沿主轴如何排布。

- flex-start（默认值）：左对齐；
- flex-end：右对齐；
- center：居中；
- space-between：两端对齐，项目之间的间隔都相等；
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 定义弹性项目沿交叉轴默认如何排布。

- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：与交叉轴的中点对齐；
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；

- stretch（默认值）：轴线占满整个交叉轴。

align-content 只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。对于只有一行的flex元素，align-content是没有效果的。

align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

方向(Direction)

弹性容器的主轴起点(main start)/主轴终点(main end)和交叉轴起点(cross start)/交叉轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与交叉轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

行(Line)

根据

flex-wrap

属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

- nowrap（默认）：不换行；
- wrap：换行，第一行在上方；
- wrap-reverse：换行，第一行在下方。

flex-flow 是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

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

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

项目属性

order属性将元素与序号关联起来，以此决定哪些元素先出现（数值越小排名越靠前，默认为0）

flex-grow 属性定义项目的放大比例，按照比例分配剩余空间，默认为0，即如果存在剩余空间，也不放大。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。