全国服务热线:4008-888-888

技术知识

浅谈CSS波动的特点

本文详细介绍了CSS波动的特点,共享给大伙儿,顺带给自身留个笔记

波动具备下列特点:

  1. 盖不住的文字
  2. 波动元素后边并不是块级元素,后边的元素可能和它并排(除非设定了元素的宽度,而且显示屏放不下时可能换行)
  3. 波动元素的上1个元素假如沒有波动,波动只在当今行波动;当波动遇到波动,它们将在1行排列,除非沒有部位了
  4. 当元素设定精准定位值为absolute、fixed时,波动将被忽视
  5. float引发父元素高宽比塌陷
  6. 波动元素会被后1个元素的margin-top危害

盖不住的文字

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            float:left;
            background-color: pink;
        }
        .item2{
            background-color: #58d3e2;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>

能够看到,item2的div除文字,别的的內容都看看不到了,由于它跑到item1下面了。为何文本不容易被波动的元素盖住呢?由于波动的实质便是用来完成文本围绕的。

从上面还可以得出:波动元素后边的块级元素会占有波动元素的部位,而且波动元素一直在规范流元素上面。

波动元素后边并不是块级元素,后边的元素可能和它并排(除非设定了元素的宽度,而且显示屏放不下时将不容易换行)

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            float:left;
            background-color: pink;
        }
        .item2{
            display: inline-block;
            background-color: #58d3e2;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>

波动元素的上1个元素假如沒有波动,波动只在当今行波动;当波动遇到波动,它们将在1行排列,除非沒有部位了

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            background-color: pink;
        }
        .item2{
            float:left;
            background-color: #58d3e2;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>

 <style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:400px;
           height:100px;
           float: left;
       }
        .item1{
            background-color: pink;
        }
        .item2{
            background-color: #58d3e2;
        }
        .item3{
            background-color: #61dafb;
        }
        .item4{
            background-color: #e9203d;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>

能够设定width为百分比来完成自融入

 div{
           width:25%;
           height:100px;
           float: left;
       }

当元素设定精准定位值为absolute、fixed时,波动将被忽视

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           position: absolute;
           float: left;
           width:100px;
           height:100px;
           border: 1px solid red;
       }
    </style>
 <div class="item1">波动遇到精准定位</div>

行内元素应用波动之后转化成1个块框,因而它便可以应用width,height,margin,padding等特性了

 <style>
        body,div{
            margin:0;
            padding:0;
        }
       [class^='item']{

           float: left;
           width:100px;
           height:100px;
           line-height: 100px;
           text-align: center;
       }
        .item1{
            float: left;
            background-color: pink;
        }
        .item2{
            display: inline-block;
            background-color: #58d3e2;
        }

    </style>
<span class="item1">item1</span>
<div class="item2">item2</div>

float引发父元素高宽比塌陷

网页页面设计方案中,很普遍的1种状况是给內容1个div做为包裹器皿,而这个包裹器皿不设定高宽比,而是让里边的內容撑开包裹器皿的高宽比。假如不给子元素设定波动的话,其实不会出現甚么难题,而1旦给子元素设定了波动,父元素会没法自融入波动元素的高宽比,会出現父元素高宽比为0,从而情况色甚么的都不可以展现了。缘故是:

由于沒有预先设定div高宽比,因此div高宽比由其包括的子元素高宽比决策。而波动摆脱文本文档流,因此子元素其实不会被测算高宽比。此时的div中,非常于div中子元素高宽比为0,因此产生了父元素高宽比塌陷状况。

   <style>
        body,div{
            margin:0;
            padding:0;
        }

        .item{
            float: left;
            width:100px;
            height:100px;
            background-color: pink;
        }

    </style>
   <div class="box">
       <div class="item"></div>
   </div>

处理方法,

1.给父元素提升“overflow:hidden"

自然还可以是"overflow:auto"。但以便适配IE最好是用overflow:hidden。

.box{
  overflow:hidden;
}

那末为何“overflow:hidden"会处理这个难题呢?

是由于“overflow:hidden”会开启BFC,BFC反过来决策了"height:auto"是怎样测算的

,即测算BFC的高宽比时,波动元素也参加测算,因而此时父元素会自融入波动元素的高宽比。

因此呢,还可以设定"display:inline-block"、"position:absolute"、"float:left"来处理父元素高宽比塌陷的难题。由于但凡能建立1个BFC,就可以做到包裹波动子元素的实际效果。因而在网上都说成“BFC能包裹波动元素”.

2.在父元素內容的后边或前面提升伪元素+消除波动

能够给父元素的內容加上1个伪元素,能够用::before或::after,随后內容为空,这样就不容易占有部位,最终为伪元素再加“clear:both"来消除波动。

 <style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::after{
            content: '';
            display: block;
            clear:both;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }

    </style>
<div class="box">
    <div class="item"></div>
</div>

为何这样能够呢?

搞清缘故必须了解两点:1是伪元素的具体功效,2是css的消除波动(clear)只能危害应用消除的元素自身,不可以危害别的元素,而且消除波动能够了解为摆脱横向排序。

最先必须弄清除::after和::before起的功效,它们并不是在1个元素的后边或前面插进1个伪元素,而是会在元素內容后边或前面插进1个伪元素(是在元素里边),以前我1直认为:before和:after伪元素 插进的內容会被引入到总体目标元素的前或后引入,实际上引入的內容将是相关联的总体目标元素的子元素,但它会被置于这个元素的任何內容的“前”或“后”。大家来举个事例,能够看到.box的高宽比为300px,表明两个伪元素早已插进到.box內容里了。

<style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::before{
            content: 'before';
            height: 100px;
            width: 100px;
            display: block;
            clear:both;
            background-color: #61dafb;
        }
        .box::after{
            content: 'after';
            width:100px;
            height:100px;
            display: block;
            clear:both;
            background-color: aquamarine;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }

    </style>
<div class="box">
    <div class="item"></div>
</div>

综上,因此大家常见以下方法来消除波动

.box::after{
  content:'';
  display:block;
  clear:both;
}
或
.box::before{
  content:'';
  display:block;
  clear:both;
}
或
.box::before,.box::after{
  content:'';
  display:block;
  clear:both;
}
//::before和::after务必相互配合content特性来应用,content用来界定插进的內容,content务必有值,最少是空。默认设置状况下,伪类元素的display是默认设置值inline,能够根据设定display:block来更改其显示信息。

在父元素的內容前后左右插进1个伪元素,content为空能够确保不占有部位(高宽比为0)。"clear:both"能够消除父元素上下的波动,致使.box::before和.box::after遇到波动元素会换行,从而会撑开高宽比,父元素会自融入这个高宽比从而不容易出現高宽比坍陷。

别的处理高宽比塌陷的方式全是根据这两个观念的,1个是开启BFC,1个是加上元素+消除波动(clear)。

波动元素会被后1个元素的margin-top危害

<style>
        body,div{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
        }
        div:nth-of-type(1){
            float: left;
            background-color: #61dafb;
        }
        div:nth-of-type(2){
            margin-top: 100px;
            background-color: #58d3e2;
        }

    </style>
<div >div1</div>
<div>div2</div>

能够看到第1个div也跟随下来了,处理方法是给后1个元素设定clear,此时后1个元素的margin-top将失效

<style>
        body,div{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
        }
        div:nth-of-type(1){
            float: left;
            background-color: #61dafb;
        }
        div:nth-of-type(2){
            clear:both;
            margin-top: 100px;
            background-color: #58d3e2;
        }

    </style>
<div >div1</div>
<div>div2</div>

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



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服