老师,我看不懂注释里写的这些方法,麻烦老师详细解释

老师,我看不懂注释里写的这些方法,麻烦老师详细解释

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

      body,

      p {

        margin0;

        padding0;

      }

      div {

        /*原先的 

        width: 200px;

        height: 200px;

        background-color: blue; */


        /*方法一:不懂

        width: 200px;

        height: 100px;

        background-color: blue;

        padding-top: 100px; */

        /* 方法二: width: 200px;

        height: 200px;

        background-color: blue;

        overflow: hidden; */

        /* 方法三:不懂

        width: 200px;

        height: 200px;

        background-color: blue; 

        border: 1px solid #000; */

        /* 方法四:不懂,给子元素或父元素设置浮动

            float: left; */

        /* 方法五:不懂,子元素设置绝对定位(子绝父相),仅此两行 

        position: absolute;

        position: relative;

        */

        width200px;

        height200px;

        background-colorblue;

     

      }

      p {

        width100px;

        height100px;

        background-colorred;

        margin-top100px;

        

        /* 当p盒子向上踹一脚时,带着它的父亲一起走了,这可咋好 */

        /* 解决margin的传递问题

                        方法一:给父级设置padding属性,注意尺寸

                        方法二:给父级元素设置overflow:hidden;属性 */

      }

    </style>

  </head>

  <body>

    <div>

      <p></p>

    </div>

  </body>

</html>



正在回答

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

1回答

同学你好,margin传递问题的解决方式,不需要去理解,知道有哪几种就可以了。浏览器解析的效果,很难去解释。

祝学习愉快!

  • qq_慕仰20210716 提问者 #1

    啊!老师,是不是学得多了就理解了,只是用语言不好表达。还是说记住这么写就行呢。感觉很抽象,我觉得理解了就好记了,可是不理解o(╥﹏╥)o


    2021-07-31 11:22:29
  • 你好,这里的知识点不是学习多了就理解了,记住怎么使用就好,不需要去理解。

    2021-07-31 14:12:26
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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