老师有个关于padding的问题！

overflow:hidden;

width:25%;

height:0;

float:left;

padding-bottom:25%;

1.像这样设置他应该是有宽度没有高度的，显示出来的高度都是他的内边距撑开的，而不是那种我们可以用来填装内容的高度？

2.icon-img他是icon下的DIV元素他的宽度应该是父元素的100%高度应该是0啊。他的高度哪里来的？难道是left top bottom top 拉扯的到的高度？

3.icon-img 和icon-text通过绝对定位，定位在icon上。看起来像是处于icon内。那前面视频中轮播图我们也是通过

.wrapper

overflow:hidden;

width:100%;

height:0;

padding-bottom:50%;

这种形式设置的。按道理讲这个wrap是没有高度的他下面的组件是怎么显示在页面上的了？？

功不唐捐终入海 2020-06-07

源自：项目-首页开发 2-7 Vue项目首页 - 图标区域页面布局

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-06-07 14:53:18

同学你好，关于同学的问题回答如下：

1、显示出来的高度是由它的内边距撑开的，但是也可以用来填充内容。例如：

2、是的，就是left top bottom right拉扯到的高度。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            width: 25%;
            height: 0;
            padding-bottom: 25%;
            position: relative;
            background-color: red;
        }
        .two {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>

</html>

3、icon-img和轮播图的实现是不一样的。由1我们可以知道，里面是可以显示内容的。

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

收起回答

功不唐捐终入海提问者 #1

老师突然想起一个问题:在好像是实现垂直居中的方法也和这个left right bottom top 然后是margin啥的。忘了是怎么写来着。。

2020-06-07 17:35:13

好帮手慕粉 2020-06-07 18:41:36

同学你好，是水平垂直居中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .two {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>

</html>