老师代码为什么没有居中啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.test{
width: 800px;
height: 100px;
background: red;
/*此处写代码*/
position:fixed;
left:50%;
}
.out{
width: 100%;
height: 2000px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div class="out">
<div class="test"></div>
</div>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕夭夭
2019-01-08 12:16:18
@阿扬在自律路上 同学 , 设置left:50% , 参照的是它的父元素 , 也就是它移动的是自己父元素宽度的一半 ,而这个时候元素的左边是在它父元素中心的 .所以这里需要移动自身宽度的一半才能够中心水平居中
而你设置left25% ,只是盒子移动了父元素宽度的25% ,并没有实现居中效果
margin是设置盒子与盒子直接的间距 ,并不会把盒子撑开的 . 老师在最近一段时间帮助同学答疑时 ,想给同学一些建议 . 像很多问题 , 可能自己去尝试做一做 . 例如本题中也是 , 同学可以自己去修改成25%试一试 ,也能够看出来效果的 . 这样能够提升自己独立思考和解决问题的能力 .
因为在工作中 , 会遇到很多的问题 , 独立思考以及独立解决问题是一种常态 . 所以这是一项很重要的能力 . 所以老师也是希望 ,同学在学习知识的同时 , 也能各方面的能力一起提升 . 这样你才会有更大的进步 , 也会让你未来的在职业生涯中 , 走的更远,,飞的更高 .长风破浪会有时 ,直挂云帆济沧海 ! 加油 !
祝学习愉快 ,望采纳 .
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星