请问此处content的尺寸定义了为什么不起作用呢
来源：3-12 编程练习
weixin_慕斯卡3305140
2020-02-18 19:06:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.warp1{
height:80px;
width: 100%;
background-color: #14191e;
/*在此补充代码*/
}
.warp1 h1{ color:#fff;
font-size:24px;
text-align:center;
line-height:80px;
/*在此补充代码*/ }
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
display:table;
/*在此补充代码*/
}
.content{
/*在此补充代码*/
display:table-cell;
width:400px;
height:300px;
border:1px black dashed;
border:1px black solid;
vertical-align:middle;
}
.content p{ width:300px;
font-size:14px;
font-family: "微软雅黑";
line-height:1.5em;
margin:0 auto;
/*在此补充代码*/}
</style>
</head>
<body>
<div class="warp1">
<h1>欢迎来到慕课网</h1>
</div>
<div class="warp2">
<div class="content">
<p>慕课网，只学有用的！</p>
<p>慕课网（IMOOC）。慕课网（IMOOC）。慕课网（IMOOC）。慕课网（IMOOC）。慕课网（IMOOC）。</p>
</div>
</div>
</body>
</html>
2回答
-
好帮手慕糖
2020-02-19
同学你好，设置table之后，是可以设置宽高的，而table-cell;不行。若要设置宽高的话，建议：不要设置table-cell;类型。或者不设置本身的宽高，而设置父级的宽高，因为会继承父级宽高的100%。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕糖
2020-02-18
同学你好，关于你的问题以及代码中其他可以优化的问题如下：
1、是因为块级元素设置display: table-cell;之后，设置宽高就无效了哦。这里可以不设置宽高的。
2、另，水平方向出现滚动条，因为.warp2设置了宽度100%，又设置了左右的边框，导致占据的总宽度超出100%，建议：这里可以只设置下边框。例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快！
0h020-02-19
相似问题