发表于： 2017-05-08 22:24:57
1 1142
一、今天完成的事情：
把任务7的第三个页面写完了，并通过链接相互串起来了。
二、明天计划的事情：
开始任务8.
三、遇到的问题：
1.元素设置position:fixed或absolute后，margin：0，auto失效，此时要使其水平居中的话，1.可通过设置left:0,right:0实现水平居中；2.可通过设置left:50%,transform:translate(-50%)实现水平居中。
2.给盒子设置宽度的时候最好用百分比，不然页面变宽的时候，盒子不会相应变大，显示效果比较别扭。
四、收获：
学习了怎么解决绝对（固定）定位居中的问题：
1）知道div的大小：
div{
position:absoulte;
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
}
2）不知道div的大小：
div{
position:absoulte;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
或
div{
position:absoulte;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
返回列表
评论