一、今天完成的事情

1.学习了position里absolute、fixed、relative的区别。

1.1 absolute 是绝对定位，相对于static定位以外的第一个父元素进行定位。绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

1.2 relative 是相对定位，相对于元素初始的位置定位。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

1.3 fixed 也是绝对定位，但是是相对于浏览器窗口进行定位。fixed可用于对页面header和footer进行固定，固定失效的时候，可对上级元素添加 display:inline 样式解决。

2.学习了页面header和footer固定的方法

对要固定的header或者footer添加 position:fixed 样式，如果失效的话，就对上级元素添加 display:inline 样式解决。进行固定的时候还要注意给固定的元素添加 width:100% 样式还有固定高度。如果是header固定则需注意给content添加 padding-top:header的高度 ，否则content会被header遮住。如果是footer的话，则给content添加 padding-bottom:footer的高度 。

3.学习了input的使用

主要学习了各种 type 属性的使用，button 用来设置按钮，checkbox 用来设置复选框，password 用来设置密码输入，radio 用来设置单选，submit 设置提交信息，text 设置文本输入。

在文本和密码输入里，vavlue 里输入的文本会在页面一加载的时候显示出来，用作提示，但有个缺点用户输入时需自己删除提示文本。用 placeholder 也可显示提示文本，且用户点击输入框时，提示文本自动消失。

二、明天计划的事情

查看html和css的代码规范，使代码写得更加具有语义，也便于修改和维护。

学习了解flex弹性布局，尝试用flex写页面

学习了解bootstrap布局

三、遇到的问题

1.任务4 header 的中间的元素水平居中不了，一开始使用 margin:0 auto 居中，但没有效果。用margin-left居中后，一改变宽度，就会有些误差，宽度变化越大误差越大，使得元素居中不了。后来在父元素添加 text-align:center 居中了。但任务要求去掉三个元素任意一个，剩下的元素位置都不能改变。后来左右两个元素不使用 float ，改用 position:absolute 来进行定位，去掉任意一个元素，剩下的元素都不会改变，解决了问题。

2.任务5 在自我介绍栏制作的时候遇到不知如何实现文本内容随着页面宽度的改变而自动向下排，并且所在方框也会随着文本高度的改变而改变。后来通过取消父元素固定高度，取消文本元素向左浮动，给文本元素添加相等的padding-top/bottom，解决了该问题。但左边的元素垂直居中不了，后通过给本元素添加position:absolute，添加top高度，给父元素添加position:relative，较好的解决了该问题，但是在文本高度变化的时候，该元素位置会有些偏移，不知如何更好地解决该问题。

四、收获

通过今天的学习，学习到了position:absolute/relative/fixed的区别和用法，还有header和footer固定的方法，以及input的使用。