黑马程序员技术交流社区

标题: 【西安校区】子元素撑开父元素宽高的问题小结 [打印本页]
作者: 西安前端组    时间: 2018-1-11 09:00
标题: 【西安校区】子元素撑开父元素宽高的问题小结
本帖最后由 西安前端组 于 2018-1-10 22:30 编辑

子元素撑开父元素宽高问题小结
在html中，父元素中拥有子元素是很正常的情况。如果我们不设置父元素的宽度或者高度，默认情况下，父元素的宽度和高度会被子元素撑开。
样式代码如下：
<style>
        .main{
            width: 500px;
            border: 1px solid red;
        }   
        .child{
            width: 200px;
            height: 120px;
            background-color: blue;
        }
</style>

Html结构如下：
<body>
    <div class="main">
        <div class="child"></div>
    </div>
</body>
上述的样式和html结构产生的效果如下：
红色边框的是main，蓝色区域是child，我们只给child设置了宽度和高度，给main设置了宽度，但是没有给main设置高度，我们可以看到main的高度是被child给撑开了。
所以我们可以得出第一个结论，默认情况下，子元素是会将父元素的宽度或者高度给撑开的。

一般情况下，有两种原因会造成子元素无法将父元素的宽度或者高度撑开。
1、子元素设置了浮动
2、子元素设置了绝对定位(absolute)或者固定定位(fixed)
现在我将样式代码做如下修改：
样式代码如下：
<style>
        .main{
            width: 500px;
            border: 1px solid red;
        }   
        .child{
            width: 200px;
            height: 120px;
            background-color: blue;
     float: left;
        }
</style>
Html结构如下：
<body>
    <div class="main">
        <div class="child"></div>
    </div>
</body>
我给child设置了浮动，造成的效果如下图：
我们可以看出来，此时父元素没有高度了。因为将child设置为了float，child就脱离了标准文档流，因此无法撑开父元素的宽度或者高度。

我现在对代码再次进行修改，如下：
样式代码如下：
<style>
        .main{
            width: 500px;
            border: 1px solid red;
        }   
        .child{
            width: 200px;
            height: 120px;
            background-color: blue;
      position: absolute;
        }
</style>
Html结构如下：
<body>
    <div class="main">
        <div class="child"></div>
    </div>
</body>
我给child设置了绝对定位，造成的效果如下图：



我们可以看出来，此时父元素没有高度了。因为将child设置为了绝对定位或者固定定位，child就脱离了标准文档流，因此无法撑开父元素的宽度或者高度。

下面说说关于如果子元素没有撑开父元素宽高，而我们又需要父元素的宽高被子元素撑开，可以采取的解决方案。
1、由于浮动造成
(1) 给父元素的伪元素清除浮动
<style>
         .main::after{
                    content: "";
                    display: block;
                    clear: both;
                }
</style>
注意，此时只能给after增加，给before增加将没有效果。因为所谓清除浮动其实指的是给main的最后在增加一个子元素，给这个子元素增加clear:both的样式。main的伪元素确实是main的子元素，不过before是在child前，而after是在child后，所以after才能符合要求。
(2) 给父元素设置overflow为hidden
<style>
        .main{
            width: 500px;
            border: 1px solid red;
      overflow: hidden;
        }   
</style>
(3) 给父元素设置绝对定位
<style>
        .main{
            width: 500px;
            border: 1px solid red;
      position: absolute;
        }   
</style>
2、由于定位造成
(1) 给父元素也增加position为absolute，相当于父元素和子元素都脱离了标准文档流，可以理解为同流合污了，所以此时子元素绝对定位能够将绝对定位的父元素的宽高撑开。
这里多说一句，通常我们习惯说子绝对布局，父相对布局，其实子绝对布局，父绝对布局，子元素的定位也是参照父元素的。只不过此时的父元素不占位而已。
(2) 貌似没有第二种解决方案。
子绝对父相对看看能否改成子绝对父绝对。
如果一定得要是子绝对父相对，那么此时一般也不需要靠子元素将父元素的宽高撑开。例如：
在这个例子中，我们要给轮播图的上下两个箭头进行定位，那么我们可以采取子绝对父相对，也可以采取子绝对父绝对。咱们的第一目标是要将上下的箭头进行定位。
不过对于子绝对父绝对的话，那么轮播图下面的内容将会向上移动，因为轮播图如果绝对定位，它将不占位置了。
综合考虑，这样的布局我们采取子绝对父相对是比较合适的。不过大家可以仔细想想，这种情况下，轮播图的宽高需要被箭头撑开吗？

讲上述内容用思维导图的方式总结如下：

图片3.png (131.62 KB, 下载次数: 10)

图片3.png
作者: 殷凯老师    时间: 2018-1-11 14:48
作者: 逆风TO    时间: 2018-1-11 15:44
赞赞赞赞
作者: 逆风TO    时间: 2018-1-11 15:44
赞赞赞赞
作者: little_superman    时间: 2018-1-11 22:04
好文章！
作者: superbaby    时间: 2018-1-12 17:32
好好学习
作者: superbaby    时间: 2018-1-12 17:33




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2