一段没看懂的代码，求HTML高手解释下！！拜谢！

退一步海阔天空l忍一时风平浪静 2018-10-30 04:18:21

下面的d1的4个值为什么会不一样，而d2的值却一样。
求大神详细解析一下代码！！！



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #d1{width: 330px;height: 330px;background: darkkhaki;margin: 0 auto;padding:20px 50px 50px 20px}

        #d2{width: 300px;height: 300px;background: red;padding:30px 30px 30px 30px}

        #d3{width: 300px;height: 300px;background:yellowgreen;}

    </style>

</head>

<body>



<div id="d1">



    <div id="d2">



        <div id="d3">



        </div>

    </div>



</div>



</body>

</html>

...全文

123 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

anlu0830 2018-10-31

打赏
举报

引用 12 楼 sunle818 的回复:

[quote=引用 10 楼 anlu0830 的回复:]
实际的总宽度/总高度=width/height+padding，这样应该很好理解了
假如你实际需要一个300px*300px的div，内边距为20px时，你需要写成width:260px;height:260px;padding:20px

感谢，正解！是我脑子没反应过来。。。。。[/quote]
没事，互相学习

天际的海浪 2018-10-30

打赏
举报

引用 5 楼 sunle818 的回复:

[quote=引用 3 楼 jslang 的回复:] padding:20px 50px 50px 20px 这4个值分别是第一个是上内边距，第二个是右内边距，第三个是下内边距，第四个是左内边距

这个我懂，为什么不是一样的值，内边距不一样，为什么也能达到这个效果？[/quote] 因为d1元素的宽高不够容纳d2元素，d2元素会溢出到d1元素的外面，所以d1元素加大右内边距和下内边距扩大背景色的范围。只要d1元素的宽高够容纳d2元素，就不用加大右内边距和下内边距了。


        #d1{width: 360px;height: 360px;background: darkkhaki;margin: 0 auto;padding:20px}

退一步海阔天空l忍一时风平浪静 2018-10-30

打赏
举报

引用 10 楼 anlu0830 的回复:

实际的总宽度/总高度=width/height+padding，这样应该很好理解了
假如你实际需要一个300px*300px的div，内边距为20px时，你需要写成width:260px;height:260px;padding:20px

感谢，正解！是我脑子没反应过来。。。。。

___紫菜 2018-10-30

打赏
举报

引用 9 楼 sunle818 的回复:

[quote=引用 7 楼 u013116426 的回复:]
[quote=引用 4 楼 sunle818 的回复:]
[quote=引用 2 楼 u013116426 的回复:]
4个值分别代表上下左右。如果都一样的话就可以直接写成padding:30px

如果第一个d1如果取值一样的话，就会没有这个效果啊。[/quote]
没懂你什么意思。4个值你需要多少就写多少啊[/quote]

简单的说就是：padding:20px 50px 50px 20px 为什么要取值这些，才会让最底下那个正方形看到效果，他们是怎么计算出来的。[/quote]
内边距改变了div的高度和宽度。你可以调试看看你的d2 高和宽是360px ,d1高和宽是400px

anlu0830 2018-10-30

打赏
举报

实际的总宽度/总高度=width/height+padding，这样应该很好理解了
假如你实际需要一个300px*300px的div，内边距为20px时，你需要写成width:260px;height:260px;padding:20px

退一步海阔天空l忍一时风平浪静 2018-10-30

打赏
举报

引用 7 楼 u013116426 的回复:

[quote=引用 4 楼 sunle818 的回复:]
[quote=引用 2 楼 u013116426 的回复:]
4个值分别代表上下左右。如果都一样的话就可以直接写成padding:30px

如果第一个d1如果取值一样的话，就会没有这个效果啊。[/quote]
没懂你什么意思。4个值你需要多少就写多少啊[/quote]

简单的说就是：padding:20px 50px 50px 20px 为什么要取值这些，才会让最底下那个正方形看到效果，他们是怎么计算出来的。

退一步海阔天空l忍一时风平浪静 2018-10-30

打赏
举报

引用 7 楼 u013116426 的回复:

[quote=引用 4 楼 sunle818 的回复:]
[quote=引用 2 楼 u013116426 的回复:]
4个值分别代表上下左右。如果都一样的话就可以直接写成padding:30px

如果第一个d1如果取值一样的话，就会没有这个效果啊。[/quote]
没懂你什么意思。4个值你需要多少就写多少啊[/quote]

你用浏览器打开这张页面就知道了，

要求是实现：三个层叠正方形的展示，并且四个内边距一样。

那么，他的d2四个取值，我懂，

但是d1的四个取值要不一样才有这样的展示效果，那么他们的取值是根据什么计算过来的。

___紫菜 2018-10-30