前端学习第二周

前言：

    经过两周的学习后，目前对属性的运用，定位，伪类，布局的学习已经结束，但在布局上仍有较大的问题。在对这周的学习要点进行简单的总结后对下一周的学习做好规划，并为第一次考核内容做好时间规划。

---

学习产出：

一，css段落首行缩进的两种方式。

1，text-indent文本缩进样式属性。text-indent的值跟数字+单位组成缩进样式。

例：.divcss5{text-indent:25px}
这里divcss5对象内段落首行开头文字缩进了25像素。

如果使用了html P段落标签段落换行，将会出现每个p段落换行开头都将缩进。

如果使用html br换行标签，第二个换行开始不会出现缩进效果。

2，使用空格符号：html空格字符“ ”。html空格字符“ ”实现空格字符占位缩进。

二，background属性。

　简写顺序：color-image-repeat-attachment-position

例:body{background:#ffffffurl('img.png')no-repeatrighttop}

 其中background-image：url（‘img.jpg’）

 图片地址可以是相对路径也可以是绝对路径；默认平铺重复显示；

background-attachment:scroll;fixed;local;inherit;

background-attachment的意思是指背景图像是否固定或者随着页面的其余部分滚动；默认scroll；

scroll是指背景图片随着页面其余部分滚动；fixed为固定；inherit是从父元素继承；local是随滚动元素滚动。

background-clip:border-box;padding-box;content-box;规定背景图的绘制区域。

background-origin:border-box;padding-box;content-box;规定背景图的定位区域。

（注意：如果背景图像background-attachment是“固定”，这个属性没有任何效果。）

三，绝对定位和相对定位的浅理解。

绝对定位是相对于最近的有定位设置的父元素进行定位，如果它的祖先元素中均没有定位设置，就相对于body元素的左上角作为参考定位，绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

相对定位则是相对于它原本的位置定位。可以通过left,right,top,bottom等属性偏移自身位置，也可以通过z-index属性进行分层控制。

---

下周学习任务：

1，css不透明度。

2，div应用。

3，图像精灵。

4，背景。

5，阴影。

6，box-shadow。

7，过渡。

8，object-fit.

---

结语：

     本周的学习过于急躁，知识掌握不牢，在实践中发现盒子的运用和布局很差，在网页制作过程中过于依赖定位，还有其他大大小小的问题，这些都需要在接下来的学习中调整和改正。临近期末，各种考试和各科作业都在路上，这几周时间紧任务多，希望能尽量安排好时间，不要出问题。总的来说本周略有收获，下周仍需继续努力。