正在回答
你好，关于第一个问题，比如每个区都有标题和段落，为了提高代码的复用性，不用为每个区域的标题和段落都分别设置样式，可以统一设置一次，这样减少代码的冗余。
第二个问题，内容区没有指定宽度，内容的宽度是由每个内容元素的宽度组成，但是当窗口的宽度小于这个宽度时，元素在一行显示不下，就会到第二行，导致排版错乱，所以建议为内容层指定宽度。
希望对你有帮助，祝学习愉快，欢迎采纳。
你好，回复不能配图，在回答中回复。你的代码设置了position , 具体看下面：
margin:0px auto将对象设置为水平居中对齐。这是因为auto属性值能够使浏览器自动为对象判断外边距大小，但是在下面的情况下却失效了.
>当设置position:absolute的元素，它的“margin:auto”会失效。
因为，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，绝对定位层的margin:auto 会失效。
>在设置position:absolute属性后，实现水平、垂直居中的解决方法：
在对子对象使用top:50%和left:50%之后，并没有实现对象的居中，而是实现了元素左上角那一点的垂直居中，如下图:
其实我们需要的是元素的中心实现居中，假设背景为红色的元素(高:100px,宽：200px;),，于是使用margin:-50px 0 0 -100px，让元素向上和向左分别移动元素高度的一半和宽度的一半即可。
>这块其实也可以不设置，position属性，来实现居中，html代码调整如下：
<section class="banner"> <div class="content"> <h1>Welcome to Website</h1> <p>lorem ipsum dolor sit amet,consectetor adisicing elit</p> </div> </section>
css代码：
.banner {
height: 650px;
width: 100%;
background-image: url(banner.jpg);
text-align: center;
}
.banner > .content {
padding-top:280px;
color: red;
}这样就实现了。希望对你有帮助，祝学习愉快，欢迎采纳。
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星