发表于: 2018-06-03 23:22:50

1 656


2018.6.3


今天完成的事情:

1.重新回顾了html中img,form以及input和button的使用

2.学习了transform属性

4.学习了position属性

3.任务四做了一个demo版本出来


明天计划的事情:

1.提交任务四

2.开始任务五


遇到的问题:

1.position:absolute下如何使得文字居中,一开始使用left:50%;margin-left:-文字长度;但是在垂直方向上又按照字体的大小和块的高度来计算

2.间隔线的产生


收获:

1.position & transform:  translate(-50%, -50%) 实现块元素百分比下垂直水平居中

2.position的相关知识

1).absolute(绝对定位)

a.脱离标准流,在页面中不占位置(浮起来) 

b.如果没有父元素,则相对于body定位;如果有父元素,但父元素没有定位,那么还是相对于body定位;如果父元素有定位,那么相对于父元素来定位 

c.块状元素在position(relative/static)的情况下width为100%,但是设置了position: absolute之后,会将width变成auto(会受到父元素的宽度影响)

2).relative(相对定位)

a.不脱离标准流,在页面中占位置 

b.相对于自己原来的位置来进行定位 

3).fixed(固定定位)

a.脱离标准流,在页面中不占位置 

b.不管页面有多大,永远相对于浏览器的边框来定位 

3.任务四种主要是要了定位,input,button这些知识



返回列表 返回列表
评论

    分享到