请问此处content的尺寸定义了为什么不起作用呢

请问此处content的尺寸定义了为什么不起作用呢

<!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>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2020-02-19 09:38:38

同学你好,设置table之后,是可以设置宽高的,而table-cell;不行。若要设置宽高的话,建议:不要设置table-cell;类型。或者不设置本身的宽高,而设置父级的宽高,因为会继承父级宽高的100%。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

好帮手慕糖 2020-02-18 19:18:06

同学你好,关于你的问题以及代码中其他可以优化的问题如下:

1、是因为块级元素设置display: table-cell;之后,设置宽高就无效了哦。这里可以不设置宽高的。

2、另,水平方向出现滚动条,因为.warp2设置了宽度100%,又设置了左右的边框,导致占据的总宽度超出100%,建议:这里可以只设置下边框。例:

http://img1.sycdn.imooc.com//climg/5e4bc7e20962186004800232.jpg

如果我的回答帮助了你,欢迎采纳,祝学习愉快!

  • 那上面的wrap2设置了table之后也不能设置宽高了对吗?我试了一下高度是可以改变的。如果有需要改变table和teble-cell的宽高应该怎么操作呢?
    2020-02-19 02:56:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师