margin-top和top的区别， bottom0为什么这里不能挨着底部呢？

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

div {

width: 1200px;

margin: 40px auto;

}

div ul {

list-style: none;

}

div ul li {

float: left;

width: 380px;

height: 210px;

margin-right: 20px;

position: relative;

}

div ul li img {

width: 380px;

height: 210px;

}

div ul li .info {

width: 370px;

height: 30px;

padding-left: 10px;

background-color: rgba(0,0,0,.5);

color: white;

line-height: 30px;

position: absolute;

/* margin-top和top的区别 */

/* 为什么这里不能挨着底部呢？ */

bottom: 0px;

}

</style>

</head>

<body>

<div>

<ul>

<li>

<div class="info">北京的故宫</div>

</li>

<li>

</li>

<li>

<div class="info">国家大剧院</div>

</li>

</ul>

</div>

</body>

</html>

qq_慕仰20210716 2021-08-12

源自：过渡与动画 2-8 过渡效果实战课（1）

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-08-12 14:46:32

同学你好，margin-top是用来设置元素的上外边距的，通常用于分隔上下两个元素，如图

而top属性是用来设置元素的上偏移距离的，而且该元素必须要设置position属性为relative、absolute或fixed才生效。通常用于调整元素相对于原点的位置。以绝对定位为例，如图所示

关于不能挨着底部的原因：前面的css代码中通过div元素选择器添加了40px的上下margin，导致div元素距离底部有40px的外边距，如图

建议：在选择器div ul li .info中，将margin设为0，覆盖前面设置的40px，参考如下

祝学习愉快！

收起回答

qq_慕仰20210716 提问者 #1

老师，我把第一个大盒子设置了名字：box，这样也可以吧，老师！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 1200px;
        margin: 40px auto;
        /* overflow: hidden; */
      }
      .box ul {
        list-style: none;
      }
      .box ul li {
        float: left;
        width: 380px;
        height: 210px;
        margin-right: 20px;
        position: relative;
      }
      .box ul li img {
        width: 380px;
        height: 210px;
      }
      .box ul li .info {
        width: 370px;
        height: 30px;
        padding-left: 10px;
        background-color: rgba(0,0,0,.5);
        color: white;
        line-height: 30px;
        position: absolute;
        /* margin-top和top的区别
        margin-top是用来设置元素的上外边距的，通常用于分隔上下两个元素
        而top属性是用来设置元素的上偏移距离的，而且该元素必须要设置position属性为relative、absolute或fixed才生效
        */
        /* 为什么这里不能挨着底部呢？
        因为我大盒子叫div，里边也有一个div，所以误设置了 */
        bottom: 0;
        /* 透明度为0，不是背景的透明度，而是整体的透明度 */
        opacity: 0;
        /* 过渡 */
        transition: opacity 1s ease 0s;

      }
      .box ul li:hover .info {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <img src="./../images/0.jpg" alt="" />
          <div class="info">北京的故宫</div>
        </li>
        <li>
          <img src="./../images/1.jpg" alt="" />
          <div class="info">十七孔桥</div>
        </li>
        <li>
          <img src="./../images/2.jpg" alt="" />
          <div class="info">国家大剧院</div>
        </li>
      </ul>
    </div>
  </body>
</html>

2021-08-14 21:13:00
好帮手慕然然回复提问者 qq_慕仰20210716 #2

同学你好，是可以的，很棒，继续加油，祝学习愉快！

2021-08-15 10:42:26