发表于： 2018-10-27 09:48:51
1 642
今天完成的事情：
今天主要给师兄查看任务四，同时发现header紧贴顶部，虽然呈现的效果已经跟演示一致，但还是需要进行修改，通过师兄提示，用两种方法进行修改，完成任务四提交，上传服务器及GitHub，可以进行本地访问，同时查找学习任务四后面深度思考的内容，开始任务五，复习之前的知识，学习flex的知识，切图，布局header。
明天计划的事情：
继续深入理解学习flex的知识，今天有点没看到具体怎么用，对任务五进行布局，继续复习以前的知识点，包括盒子模型，定位，浮动等，发现现在做任务还是需要想很久用什么知识点，用了某个知识还需要不断调试，还是对概念及用法不能深入理解，完成任务有点吃力，需要花费很长时间，不断调试。
遇到的问题：
主要是任务四中改成header紧贴顶部，因为头部设了固定定位，发现下面的普通流的内容都到头部的位置了，有点不知道该怎么好，经过师兄指点，可以给header下面的内容设置margin，让magin撑开头部那部分的位置，另外就是header下面的内容都设置为定位，就完成任务了
收获：
1、任务四中当header脱离文档流时，可以给header下面的内容设置margin，让magin撑开头部那部分的位置，如下图
另外可以将header下面的内容都设置为定位，而且设置绝对定位和相对定位都可以设定，从而有两种不同的写法，如果都用绝对定位，那之后下面每个元素的绝对定位都需要算距离到顶端的距离，就是top的距离，而使用相对定位，则top就是相对固定的，计算比较简单（下图的备注就是用了两种不同的定位设置，都可以实现任务）
2、学会了对Z-index 的使用
z-index 属性设置元素的堆叠顺序。它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
3、继续深入学习position的概念及相关特点
通过position属性，可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。position的属性值共有四个常用的：static、relative、absolute、fixed。
static所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。
relative俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
relative的特点
仍在文档流之中，并按照文档流中的顺序进行排列。
- 参照物为元素本身的位置。
- 设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。
absolute俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
absolute的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为第一个定位祖先或根元素（<html> 元素）
俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
fixed的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
定位：top,right,bottom,left;
盒模型：height,width,margin,padding,
背景：background-position,background-size(css3),
文本：text-indent，
字体：font-size;
各个属性使用详细：
top,right,bottom,left:全兼容,
height：基于包含它的块级对象的百分比高度。
width：基于包含它的块级对象的百分比宽度。
margin：百分数是相对于父元素的 width 计算的。
padding：百分数是相对于父元素的 width 计算的。
容器的属性
- flex-direction 属性决定主轴的方向（即项目的排列方向）。
- flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content 定义了项目在主轴上的对齐方式。
- align-items 定义项目在交叉轴上如何对齐。
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
以下6个属性设置在容器上。
项目的属性
- order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
以下6个属性设置在项目上。
返回列表
评论