为什么我出来的效果与效果图不同

为什么我出来的效果与效果图不同

我看了其他同学的提问,发现代码都一样 为什么我出来的效果和效果图不同呢?


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

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

3回答
好帮手慕糖 2017-09-06 11:01:01

你好,你说的不一样是指文字换行么?这个没有问题哟。换行是因为,字体的宽度,超出了,本身的宽度。(由于每个浏览器识别的字体大小不同,不同的浏览器会有点误差);这里可以使用font-sizel来设置字体的大小。总的来说,不影响效果,实现很好,继续加油!祝学习愉快~

提问者 慕用5482996 2017-09-06 10:46:23

<html>

<head>

    <meta charset="UTF-8">

    <title>border属性</title>

    <style type="text/css">

        .container{

          width:200px;

          height:200px;

          background-color:pink;

            /*补充样式*/

            padding-top:50px;

            padding-left:100px;

            

        }

        .content{

          width:100px;

          height:100px;

          

           /*补充样式*/

          padding-top:30px; 

         padding-right:30px;

         padding-left:30px;

         background-color:orange;

        }

span{background-color:yellow;

}

    </style>

</head>

<body>

    <div class="container">

      <div class="content">

         <span>

           我是span元素

          </span>

</div>

    </div>

</body>

</html>


好帮手慕糖 2017-09-06 10:44:16

你好,建议将你的代码粘贴过来哟,方便大家测试与解决问题!

祝学习愉快~

  • 提问者 慕用5482996 #1
    <html> <head lang="en"> <meta charset="UTF-8"> <title>border属性</title> <style type="text/css"> .container{ width:200px; height:200px; background-color:pink; /*补充样式*/ padding-top:50px; padding-left:100px; } .content{ width:100px; height:100px; /*补充样式*/ padding-top:30px; padding-right:30px; padding-left:30px; background-color:orange; } span{background-color:yellow; } </style> </head> <body> <div class="container"> <div class="content"> <span> 我是span元素 </span> </div> </div> </body> </html>
    2017-09-06 10:46:59
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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