浅谈CSS 高宽比塌陷难题

日期:2021-03-01 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

主要表现

比如:

HTML:

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
</div>
<div class="second">
    second
</div>
<div class="third">
    third
</div>

CSS:

.first{
    width: 300px;
    background-color: pink;
}
.first .first-child1,.first .first-child2{
    float: left;
    width: 100px;
    height: 100px;
}
.first .first-child1{
    background-color: purple;
    margin-right: 10px;
}
.first .first-child2{
    background-color: red;  
}
.second{
    width: 200px;
    height: 150px;
    background-color: blue;
}
.third{
    width: 100px;
    height: 150px;
    background-color: green;
}

主要表现为:

造成的缘故

由上面的事例能够看出,first盒子沒有设定高宽比,由子元素撑开,可是因为子盒子设定了波动,摆脱了规范流,因此致使first盒子沒有高宽比,主要表现为second和third盒子向上挪动了。

能够得生产生高宽比塌陷的缘故:

在文本文档流中,父元素的高宽比默认设置是被子元素撑开的,也便是子元素多高,父元素就多高。可是当为子元素设定波动之后,子元素会彻底摆脱文本文档流,此时可能致使子元素没法撑起父元素的高宽比,致使父元素的高宽比塌陷。因为父元素的高宽比塌陷了,则父元素下的全部元素都会向上挪动,这样可能致使网页页面合理布局错乱。

高宽比塌陷的处理方法:

1、给父元素设定固定不动高宽比。可是应用这类方法后,父元素的高宽比就不可以依据子元素全自动撑高了,能够依据自身网页页面的特性,假如能够固定不动高宽比,可使用这类方法,不然,不强烈推荐这类方法。

2、附加标识法,这是w3c强烈推荐的处理计划方案,可是不强烈推荐,由于html的标准是写出词义化的标识,这类方法会附加提升不经意义的标识。

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
    <div style="clear: both;"></div>
</div>

3、父元素的overflow特性(打开元素的BFC):

.clearfix{
    overflow: hidden;
}

应用这类方法,特性值能够是是非非visible(hidden/auto/scroll)中随意,可是提议用hidden。

这类方法不良反应较小,这类方法在ie6中不适用,能够外加zoom: 1;

.clearfix::after{
    content: "";/*伪元素內容为空*/
    display: block;/*非默认设置的就行,还可以是table这些*/
    height: 0;/*伪元素高宽比为0,不危害别的元素*/
    clear: both;/*消除波动*/
    visibility: hidden;/*不能见*/
}
.clearfix{
    zoom: 1;/*ie6元素沒有BFC方式,可是这句编码会打开ie6中的hasLayout方式,只在ie中适用*/
}

4、单伪元素after消除波动(打开元素的BFC):

.clearfix::after{
    content: "";/*伪元素內容为空*/
    display: block;/*非默认设置的就行,还可以是table这些*/
    height: 0;/*伪元素高宽比为0,不危害别的元素*/
    clear: both;/*消除波动*/
    visibility: hidden;/*不能见*/
}
.clearfix{
    zoom: 1;/*ie6元素沒有BFC方式,可是这句编码会打开ie6中的hasLayout方式,只在ie中适用*/
}

这类方法如今应用较为普遍,许多大网站全是应用这类方法,不良反应较小,只必须在相互配合解决ie6便可以了。

5、双伪元素消除波动(打开元素的BFC):

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/*ie6元素沒有BFC方式,可是这句编码会打开ie6中的hasLayout方式,只在ie中适用*/
}

这类做法写法较为不便,也不强烈推荐。

消除波动对父元素的危害后的实际效果:

BFC有关

依据W3C的规范,在网页页面中元素都1个暗含的特性叫做Block Formatting Context,简称BFC,该特性能够设定开启或关掉,默认设置是关掉的。

当打开元素的BFC之后,元素可能具备以下的特点:

1.父元素的竖直外边距不容易和子元素重合

2.打开BFC的元素不容易被波动元素所遮盖

3.打开BFC的元素能够包括波动的子元素

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:有关CSS引进方法的详尽看法小结 返回下一篇:没有了