css高宽比塌陷难题的处理计划方案

日期：2021-02-27 类型：科技新闻我要分享

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

1. 高宽比塌陷

在文本文档流中，父元素的高宽比默认设置被子元素撑开，也便是说子元素多高，父元素就多高。可是，当为子元素设定波动后，子元素会彻底摆脱文本文档流。此时，可能致使子元素没法撑起父元素的高宽比，致使父元素的高宽比塌陷。

因为父元素的高宽比塌陷了，则父元素下的全部元素都会向上挪动，这样可能致使网页页面合理布局错乱。
因此在开发设计中1定要防止出現高宽比塌陷的难题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

結果：父元素box1的高宽比被子元素box2的a內容撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
    }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

結果：父元素的高宽比被子元素的高宽比100撑开。

若为子元素设定波动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

結果：子元素波动，父元素沒有了高宽比。footer向上挪动。

为父元素设定高宽比，防止塌陷：

.box1{
        border: 10px solid red;
        height: 100px;/* 设定父元素的高宽比*/
    }

結果：

可是当子元素的高宽比较高时，又会造成外溢的难题。父元素的高宽比1旦固定不动，父元素的高宽比将不可以全自动融入子元素的高宽比，因此这类计划方案不强烈推荐应用：

  .box2{
        width: 100px;
        height: 200px;
        background-color: greenyellow;
        float: left;
    }

結果：

2. 处理塌陷难题

依据w3c的规范，在网页页面中的元素都有1个暗含的特性叫做Block Formatting Context, 简称BFC。该特性能够设定开启或关掉，默认设置是关掉的。
当打开元素的BFC之后，元素可能具备以下的特点：
(1) 父元素的竖直外边距不容易和子元素重合
(2) 打开BFC的元素不容易被波动元素所遮盖
(3) 打开BFC的元素能够包括波动的子元素

怎样打开元素的BFC:

设定元素波动

应用这类方法，尽管能够撑开父元素，可是会致使父元素的宽度遗失，并且应用这类方法也会致使下边的元素上移，不可以处理难题

设定元素肯定精准定位

也是有上面的难题

设定元素为inline-block

能够处理难题，可是会致使宽度遗失，不强烈推荐应用这类方法

将元素的overflow 设定为1个非visible的值

强烈推荐方法：将父元素overflow设定为hidden，是不良反应最少的打开BFC的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
        overflow: hidden;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

結果：

留意：可是在IE6中是不适用BFC的。因此引进hasLayout。

在IE6中有另外一个暗含的特性叫做hasLayout,该特性的功效和BFC相近，因此IE6访问器能够根据开hasLayout来处理难题。打开方法有许多，可是不良反应最少的方法是：立即将元素的zoom设定为1便可。

zoom表明变大的意思，后面跟1个标值，写几便是将元素变大几倍。

zoom:1 表明不变大元素，可是根据该款式能够打开hasLayout。

zoom这个款式，只在IE中适用，别的访问器都不适用。

zoom: 1;/* 适配ie6*/
overflow: hidden;/* 适配非ie6*/

到此这篇有关css高宽比塌陷难题的处理计划方案的文章内容就详细介绍到这了,更多有关css高宽比塌陷內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：css+svg完成b站充电实际效果的示例编码返回下一篇：没有了