css布局2-14编程练习

css布局2-14编程练习


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{padding:0;margin:0;}

    .box{

           width:1000px;

           height:700px;

           margin:0 auto;

        }

    

    

    .hight img{float:left;

               margin:20px 50px;

               padding:10px;}

               

    .low img{float:left;

             margin:30px 50px;}

 

    .hight{width:1000px;

           height:300px;

           background:#87CEEB;

           margin:0 auto;}

    

    .low{background:#FFB6C1;

         width:1000px;

         height:120px;

         }

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div class="box">

      <div class="hight">

          <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/>

          <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/>

      </div>

      <div class="low">

          <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/>

          <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/>

          <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/>

      </div>

  </div>

</body>

</html>

  1. 盒子的width和height值、hight的width和height的值、low的width和height的值应该如何定?有规定吗?

  2. 图片如何实现垂直水平居中最好?

  3. 为什么不加img{float:left}仍然能实现一排排列,是因为img标签是行内元素吗?那就不需要加浮动吧?

    4.根据题目的4点要求,以上代码要做哪些改动?

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

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

2回答
卡布琦诺 2018-08-05 10:33:56

1、hight img的margin值和low img的margin值都是根据盒子模型计算出来的,盒子=content(内容)+margin+padding+border;

2、margin是设置盒子与盒子之间的距离的,padding是这是盒子的内填充的,如下图

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

希望可以帮到你!

妮可妮可妮_ 2018-08-03 10:08:28
  1. 我们课程中的编程练习根据任务需求实现效果就可以了~本题中没有规定宽高值哦!

  2. 图片实现垂直水平居中效果的方法不唯一,需要根据项目的需求而定,

  3. img属于行内替换元素,当空间足够时默认是会在一排显示的.

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

  4. 图片没有居中显示,使用填充值需要仔细去计算,下图代码仅供参考:http://img1.sycdn.imooc.com//climg/5b63b772000151e610280364.jpghttp://img1.sycdn.imooc.com//climg/5b63b7840001b63003230141.jpghttp://img1.sycdn.imooc.com//climg/5b63b8f600011fef03830126.jpg

  5. 整个盒子没有在页面中垂直居中显示,建议将子元素设置为绝对定位,top:50%;margin-top:负一半的高度,就可以垂直居中显示了,水平居中的实现方法也是一样的,可参考下图所示代码:http://img1.sycdn.imooc.com//climg/5b63b85a0001f53e03620302.jpg

如果可以解决你的疑惑,记得采纳哦~

祝学习愉快!

  • 提问者 soso_crazy #1
    1.hight img的margin值和low img的margin值是如何计算出来的? 2.为什么图片与盒子的距离不用padding而是采用margin值?
    2018-08-04 15:28:13
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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