摸了半天 才搞明白一点 太容易忘记了
来源：3-12 编程练习
BIN_King
2022-02-24 03:39:51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 设置了头部div宽度为100%,高度90个像素，背景颜色为黑色 */
.H1{
width: 100%;
height: 90px;
background-color: rgb(0 0 0);
}
/* 利用后代选择器为头部的标题设置了字体颜色为白色，
字体大小为20个像素，文本居中显示，
设置行高为头部的90*90的一半，达到居中效果 */
div.H1 h1{
color: aliceblue;
font-size: 20px;
text-align: center;
line-height: 90px;
}
/* 给p元素中设置字体大小
行高为14像素的1.5倍
字体宽度400像素 由于设置宽度后拥挤到left居中
设置 margin上下为0 左右自适应后转为整个div居中显示*/
p{
font-size: 14px;
line-height: 1.5em;
width: 400px;
margin: 0 auto;
}
/* 设置了div的宽和高 ，1个像素为黑色边框的实线
外层块级元素转单元格（display -表格）
*/
.div1{
width: 100%;
height: 500px;
border: 1px #000 solid;
display: table;
}
/* 内块级元素转一个td */
.div2{
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="H1">
<h1>欢迎来到慕课网</h1>
</div>
<div class="div1">
<div class="div2">
<p>慕课网只学有用的</p>
<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、
php开发、web前端、android开发以及html5等视频教程资源公开课。
并且富有交互性及趣味性，你还可以和朋友一起编程
</p>
</div>
</div>
</body>
</html>
2回答
-
好帮手慕星星
2022-02-25
同学你好，去掉text-align:center;属性，文本不会回到顶部的，改变的水平方向对齐方式，实现左对齐
代码中的vertical-align：middle;是实现垂直对齐的，不需要去掉，这里不适用line-height实现垂直居中对齐。
自己再理解下。
0 -
好帮手慕慕子
2022-02-24
同学你好，整体思路是可以的，其中有几个细节可以再调整一下，如下：
1、水平方向存在滚动条，如下图所示：
原因：.div1元素设置百分百宽度的同时设置了左右边框，导致实际宽度超出了窗口宽度，出现了滚动条
建议修改：只设置下边框
2、练习要求h1标题字体大小为24px，建议修改：
3、第二部分的内容整体居中，里面的文字是居左显示的，如下图所示：
建议：去掉text-align属性，文字默认居左显示即可
4、因为同学刚开始接触，对于一些属性还不熟悉，觉得不容易记忆，这都是正常现象，同学不用焦虑，也不用刻意的去记，多练习练习，熟练后，自然就记住了。
祝学习愉快~
0h022-02-25
相似问题