发表于： 2019-03-16 12:15:08
1 823
今天完成的事情：学习了position的相关知识，并布局header部分。
1.static，静态定位，html默认的定位方式。
relative，相对定位，相对于他在文档流中的位置而进行的偏移，占有文档空间，后面的元素依据它未偏移前位置进行定位。
absolute，绝对定位，从父类元素找起，寻找以position非static方式定位的祖先类元素，直到<html>标签为止。需注意的是，relativ和static方式在最外层时以<body>标签为定位原点的，absolute以<html>为定位原点。
fixed，以窗口为原点进行定位。
2.“子绝父相"，把脱离文档流的元素放在不脱离文档流的元素上用子绝父相，比如广告横幅右上角关闭按钮。
3.如何实现绝对定位元素居中：父元素是相对定位，子元素
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
明天要完成的事情：切图，用input和button标签完成接下来的页面。
遇到的问题：暂无。
收获：学会了子绝父相并让元素垂直居中显示。
参考资料：css中position属性 https://blog.csdn.net/chen_zw/article/details/8741365
css绝对定位元素居中的几种方法 https://www.cnblogs.com/skura23/p/6530556.html
返回列表
评论