这里为什么是padding-top,不是margin-top?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多行布局--头中间尾部</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
text-align: center;
}
.header{
width: 100%;
height: 200px;
background: red;
line-height: 200px;
margin: 0 auto;
position: fixed;
}
.content{
width: 800px;
height: 900px;
background-color:#FF9933;
/*line-height: 900px;*/
margin: 0 auto;
margin-top: 200px;
}
.foot{
width: 800px;
height: 200px;
background:#00FF33;
line-height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">这是页面的头部</div>
<div class="content">这是页面的内容</div>
<div class="foot">这是页面的尾部</div>
</body>
</html>
老师,两个div之间不是属于外边距吗?第一个div覆盖了第二个,应该是外边距,文字和div 的才是内边距。为什么用外边距的话,显示出来的就是但是我的外边距设置也不是在第一个红色的div里设置,为什么是红色的div下移,不是我设置的那个div移动呢?有2个疑惑点
正在回答 回答被采纳积分+1
你好同学 , 解答如下:
1. margin :0;auto ;是设置上下边距为0 ,左右auto . 但是在它后面又设置了上边距 ,所以后面上边距的会把前面的上边距覆盖 , 即元素会有上边距100px .
2.父元素会跟着下来是属于一个特殊的现象哦 , 特殊记着即可 . 同学在认真看一下老师第一次的回复 .
3.第三个问题老师也在第一次回复中讲到了 . content的父元素是body , body跟着子元素跑下来了 , 而header设置了定位后 , 在没有给他设置top:0的时候 , 它受到body下移的影响 ,也会往下移动 .
祝学习愉快 ,望采纳 .
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星