2020.3.9---2020.3.15

周一

学习了position属性

有时候用margin，padding来定位会导致偏差，其他元素不能很好的定位，用position可以相对很好的解决这个问题,但是如果都用position来定位，也会有很多的麻烦，由于电脑的分辨率不一样，可能在你的电脑上用position定位后感觉还可以，结果一拿到其他人的电脑上就变了样，（大地方用margin，padding。细节上用position。）

周二

position有如下几种属性

1.static:元素没有被定位

2.relative:使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素,但是仍然会占据原来的空间,可能会覆盖其他元素

3.absolute:元素脱离了文档(在文档中已经不占据位置了)，可以准确的按照设置的 top,bottom,left 和 right 来定位。

clip 属性剪裁绝对定位元素,设置元素的形状。用法：rect (top, right, bottom, left)

下面展示用法。

.test{
  position:absolute;
  clip:rect(0px,100px,200px,0px);
  }

一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，不再同一级
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

周三

学了display元素的四种常用属性值

1.Block

单独占一行，可以设置width,height，margin四个方向，padding四个方向；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度；

2.inline

多个内联元素占同一行，直到放不下才换行。设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效； 元素的宽度就是它包含的文字或图片的宽度，不可改变。

3.inline-block

像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。比如：input,select,img等。

4.none

隐藏该区域，不占实际空间。但对后台来说真实存在，可以获取被隐藏的元素

周四

在完善页面的时候了解到flex元素的warp属性

弹性布局：块级元素和行内块级元素都可以使用flex布局

1.flex-direction:此属性决定主轴的方向.

2.flex-wrap:此属性定义，如果一条轴线上排列不下，换行的方式

3.flex-flow 此属性定义，是flex-direction和flex-wrap的方式；

.flex {
	flex-flow: <flex-direction>  <flex-wrap>;
}

4.justify-content
此属性定义项目在主轴上的对齐方式

.flex{
	justify-content: flex-start; // 左对齐（默认）
	justify-content: flex-end;	// 右对齐
	justify-content: center;	// 居中
	justify-content: space-between; // 两端对齐。且项目间间隔相等
	justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍
	justify-content:  space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}

周五

完善页面