css处理波动造成父原素高宽比塌陷✤的几类方式

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

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

一、文本文档流与波动

1、’什么叫文本文档流?

在html中,文本文档流还可以称为规范流或一般流。原素的显示信息方法是自上而下,从左往右,在其中,块级原素默认设置占有一行,内行人或内行人块级原素只占有內容一部分或本身的所占有的一部分,其实不会像块级原素一样蛮横霸道的占有一行,实际上这也跟当然状况中的瀑布自上而龌龊动是一个大道理^_^。

2、躁动不安分的波动

在上边大家早已基本掌握了文本文档流,可是原素在网页页面中的显示信息只是借助文本文档流不是够的,就例如说天猫商城商城系统的商标logo导航栏一部分,混乱目录ul的每一个目录项li是块级原素(display:list-item),依照文本文档流来讲,块级原素是占有一行的,因此每一个li会自上而下一行行显示信息,但具体上每一个li却只占有了本身的一部分,可以看下面的图:

 

那麼为何这种li原素不依照文本文档流的方法显示信息,缘故便是她们早已摆脱了文本文档流。想让一个原素摆脱文本文档流,方式有二种:第一种是波动(float);第二种便是精准定位(position)。
假如说,文本文档流是他人家干什么事都听爸爸妈妈得话,是个很乖很听话的小孩,哈哈哈,那麼波动便是自己干什么事也不聪明,躁动不安分的小孩。如同大家钟头候,爸爸妈妈常常一件事们说你看看看他人家小孩多么的多么的聪明,你再看一下你,如何如何样…

二、波动是把双刃刀

即然波动早已让原素摆脱了文本文档流,那麼大家便可以让原素的显示信息更加灵便,例如简单导航栏栏的制作:

 body{
        margin:0;
        background-color:#333;
    }
    ul{
        list-style:none;
        width:500px;
        margin:100px auto 0;
        padding:0;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    ul li{
        float:left;
        width:100px;
        height:30px;
        background-color:#fff;
    }
    ul li a{
        display:block;
        height:100%;
        line-height:30px;
        color:#000;
        text-decoration:none;
        text-align:center;
    }
 <ul class="nav clearfix">
        <li>
            <a href="">导航栏1</a>
        </li>
        <li>
            <a href="">导航栏2</a>
        </li>
        <li>
            <a href="">导航栏3</a>
        </li>
        <li>
            <a href="">导航栏4</a>
        </li>
        <li>
            <a href="">导航栏5</a>
        </li>
    </ul>

又例如早以前的圣杯合理布局

   body{
        margin:0;
    }
    .wrap{
        padding:0 300px;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .middle,.left,.right{
        float:left;
        position:relative;
        height:100px;
    }
    .middle{
        width:100%;
        background-color:#333;
    }
    .left{
        left:-300px;
        width:300px;
        margin-left:-100%;
        background-color:#ccc;
    }
    .right{
        right:-300px;
        width:300px;
        margin-left:-300px;
        background-color:#f00;
    }
  <div class="wrap clearfix">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

同时,波动也会有来别的的危害,例如,波动的原素会遮盖后边处在文本文档流中的原素,

  body{
        margin:0;
    }
    .box-1{
        float:left;
        width:200px;
        height:200px;
        background-color:#333;
    }
    .box-2{
        width:200px;
        height:300px;
        background-color:#ccc;
    }
 <div class="box-1"></div>
    <div class="box-2"></div>

以便处理上边这类难题,大家要是给BOX-2消除波动就可以了了

  .box-2{
        clear:both;
        width:200px;
        height:300px;
        background-color:#ccc;
    }

另外,波动原素会造成父原素高宽比塌陷,假如一个沒有高宽比的块级原素的子原素波动得话,则这一块级父原素的高宽比为0,可以看以下编码:

   body{
        margin:0;
    }
    .box-1{
        width:300px;
        background-color:#333;
    }
    .box-2{
        float:left;
        width:200px;
        height:300px;
        background-color:#ccc;
    }
  <div class="box-1">
        <div class="box-2"></div>
    </div>

 

大伙儿应当了解,针对一个原素来讲,不给他们固定不动高宽比的情况下他的高宽比是由內容撑开的,换句话说,假如这一原素里边沒有一切內容,他的高宽比便是0,当这一原素有內容的情况下,他就会有了高宽比(也便是內容的高宽比),可以看下面的图:

 .box-1{
        width:100px;
        background-color:#f00;
    }
<div class="box-1"></div>

<div class="box-1">我是內容</div>

 

而在上边中父原素BOX-1尽管拥有子原素BOX-2,可是他的高宽比却为0,这究竟是什么原因呢?便是由于BOX-2浮起來了,子原素BOX-2和父原素BOX-1没有同一高宽比,进而BOX-1没法包囊住BOX-2,可以看下面的图:

 

图中便是波动产生的父原素高宽比塌陷难题

三、怎样处理波动产生的父原素高宽比塌陷难题

1、子级方式

在子原素的最终加上一个高宽比为0的子原素,而且使他消除波动,可以看一下编码:

   body{
        margin:0;
    }
    .box-1{
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }
    .box-3{
        clear:both;
    }
<div class="box-1">
        <div class="box-2"></div>
        <div class="box-3"></div>
    </div>

实际效果图以下,鲜红色小盒子是父原素,淡黄色小盒子是子原素BOX-2

 

2、父级方式

给父原素设定display:inline-block;
编码以下:

  body{
        margin:0;
    }
    .box-1{
        display:inline-block;
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }
 <div class="box-1">
        <div class="box-2"></div>
    </div>

给父原素设定overflow:hidden;
编码以下:

   body{
        margin:0;
    }
    .box-1{
        overflow:hidden;
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }
  <div class="box-1">
        <div class="box-2"></div>
    </div>

上边这二种方式实际上是依据BFC(块级文件格式化左右文),由于BFC会让父原素包括波动的子原素,进而处理父原素高宽比塌陷难题,因此要是能开启BFC就可以了。

给父原素固定不动的高宽比
这一没有什么好说的,也不过多阐释了,由于在具体开发设计中高宽比一般都由內容撑开。

运用伪原素:after,而且消除波动
可以看以下编码:

  body{
        margin:0;
    }
    .clearfix{
        width:300px;
        background-color:#f00;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .box{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }
 <div class="clearfix">
        <div class="box"></div>
    </div>

四、最终

到此这篇有关css处理波动造成父原素高宽比塌陷的几类方式的文章内容就详细介绍到这了,大量有关css父原素高宽比塌陷內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:网站运营的工作中內容关键有什么 返回下一篇:没有了