CSS完成元素波动和消除波动的方式

日期:2020-12-12 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

波动基础详细介绍

  • 在规范文本文档流中元素分成2种,块级元素行内元素,假如想让1些元素既要有块级元素的特性也另外保存行内元素特性,只能让这些元素摆脱规范文本文档流便可。
  • 波动可让元素摆脱规范文本文档流,能够完成让好几个元素排在同1行,而且能够设定宽高宽比。
  • 实际上波动是根据float特性来完成的。
  • float特性值表明表:    

  特性值 叙述 left 设定元素向左波动。 right 设定元素向右波动。

右波动实践活动

  • 让大家进到右波动的实践活动,实践活动內容如:将class特性值为.box1元素设定为右波动。
  • 在进到有波动实践活动以前大家先看看要波动元素构造是甚么。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

为何結果图是1条边框线呢?由于在div标识中都还没內容呢,如今大家将子div标识设定宽高宽比为100px像素而且加上情况色调。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

  • 为何会排序为3行呢,由于3个div标识全是块级元素。
  • 如今大家将class特性值为.box1的元素设定为右波动。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:right;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

留意:如今大家发现calss特性值为.box元素高宽比变矮了,这就表明了(波动元素它早已摆脱了规范文本文档流,已不占有室内空间了)、而且向右波动,波动到本身的父元素的边沿部位就终止了波动。

左波动实践活动

让大家进到左波动的实践活动,实践活动內容如:将class特性值为.box1元素设定为左波动。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

  • 大家先了解波动的基本原理以后再解释下class特性值为.box2元素看看不到的缘故。
  • 如今笔者给大伙儿看2张实践活动結果图如:

結果图A

結果图B

  • 根据这2张結果图大家能够把波动简易的了解为“漂”举例:
  • 假定class特性值为.box是1个池塘,3个子元素全是可以漂浮在池塘水面上的物品,如今大家将calss特性值为.box1元素波动起来,漂在池塘水面上,是否就已不占有池塘内的室内空间了。
  • 既然大家了解为“漂”它1定是漂浮在池塘水面之上,可是沒有波动的元素在池塘水面以内,因此class特性值为.box2元素看看不到,其实不意味着它不存在只是被class特性值为.box1元素给遮挡住了,如今大家将class特性值为.box2元素宽度设定为150px像素。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

留意:客观事实证实class特性值为.box2元素是存在的。

下面大家将calss特性值为.box2元素设定为左波动看看有甚么不1样的实际效果

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

  • 可是class特性值为.box2的元素左波动并沒有左波动到自身父元素的边沿部位,为何在class特性值为.box1后边呢?由于父元素早已有了波动的子元素后边的子元素在波动就波动到前面波动的元素以后。
  • 如今大家将class特性值为.box3的元素设定为左波动,看看有甚么不1样的实际效果。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果图

留意:波动元素波动之后,其父元素已不将波动的子元素包裹在父元素以内,因此結果图出現1条黑色的边框线,若有不搞清楚的看第1个实践活动內容。

将行内元素设定波动

  • 假如大家给行内元素设定了波动,行内元素就有着了块级元素的特性。
  • 让大家进到行内元素设定波动实践活动,实践活动內容如:将div标识中的span标识设定为左波动。
  • 在设定左波动以前大家先看看给span标识设定宽高宽比和情况色调有甚么实际效果。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">笑容是最开始的信念1</span>
    <span class="box2">笑容是最开始的信念2</span>
    <span class="box3">笑容是最开始的信念3</span>
  </div>
</body>
</html>

結果图

  • 如今发现大家给span标识设定了宽高宽比为100px像素并沒有起效,由于如今span标识還是行内元素。
  • 如今大家给span标识设定左波动,随后大家在看看实际效果怎样。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
        float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">笑容是最开始的信念1</span>
    <span class="box2">笑容是最开始的信念2</span>
    <span class="box3">笑容是最开始的信念</span>
  </div>
</body>
</html>

結果图

留意:行内元素设定为波动以后就有着了块级元素的特性。

 

设定波动总结

  • 波动的特性如:
  • 波动元素摆脱了规范的文本文档流,已不占有父元素的任何室内空间。
  • 波动元素比规范文本文档流的元素等级要高,会将规范文本文档流的元素遮挡住。
  • 波动元素会向左波动或向右波动。波动元素会遇到父元素的边沿就终止了波动。
  • 波动元素会遇到早已有了波动的元素,后者会波动到前者以后就终止了波动。
  • 波动元素波动以后就摆脱了父元素,而且父元素已不包裹波动的元素。
  • 行内元素设定为波动,就有着了块级元素的特性。

为何要消除波动呢?

  • 由于波动的元素会危害到下面元素,实际看实践活动結果图大伙儿就搞清楚了。
  • class特性值为.box元素的子类元素沒有波动前的实际效果实践活动。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消除波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
        
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>消除波动</h1>
</body>
</html>

結果图

class特性值为.box元素的子元素左波动以后危害到下面的元素排版合理布局实践活动。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>消除波动</h1>
</body>
</html>

結果图

如今大伙儿应当搞清楚了为何要消除波动了,有波动就务必消除波动,由于上面的元素设定了波动就会危害到下面元素排版合理布局。

消除波动有3种方法

第1种方法

  • 给波动的元素父元素设定1个固定不动的高宽比,从视觉效果上看到波动的元素在父元素包裹以内。
  • 大家给波动元素的父元素设定1个固定不动600px像素的高宽比,1起看来看实际效果怎样。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消除波动</title>
    <style>
       .box{
         width: 600px;
         height: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>消除波动</h1>
</body>
</html>

結果图

这样是处理了下面元素排版合理布局难题,可是笔者不强烈推荐这么做,由于高宽比是由子元素的內容撑起来的高宽比,而并不是大家给的固定不动高宽比。

第2种方法

实际上在CSS中也是有消除波动的特性,消除波动特性名为clear。

clear特性值表明表 

       特性值 叙述 left 消除左边波动元素。 right 消除右边波动元素。 both 消除上下侧波动元素。

 

  • 要应用这个clear特性务必建立1个新的div元素,建立新的div元素不可以置放任何內容,它只能做1个件事儿,那便是消除波动而且将这个新建立的div元素放在最终1个波动元素的后边才会起效。
  • 上下消除波动的特性值笔者在这里就不11实践活动了,1般大家就用both特性值便可以了,上下消除波动,干吗还要计较它是左波动或右波动呢,立即消除上下波动就ok了。
  • 实际的看大家实践活动的結果图。

编码块

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消除波动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
         
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
       .clear{
         clear: both;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
  </div>
  <h1>消除波动</h1>
</body>
</html>

結果图

留意:这才是大家真实要想的結果,而且从视觉效果上看来波动的元素包裹在父元素以内的实际效果。

第3种方法

  • 应用特性为overflow而且特性值为hidden来消除波动,务必将这个特性设定在波动元素的父元素身上。
  • 给大伙儿普及属下性为overflow而且特性值为hidden,它原意是用来将外溢的一部分內容开展掩藏,可是它还能够消除波动。
  • 笔者先将內容外溢随后在掩藏外溢的內容,那大家1起看来看呗。

编码块

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外溢內容开展掩藏</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            
        }
    </style>
</head>
<body>
    <div>
        笑容是最开始的信念,笑容是最开始的信念,笑容是最开始的信念。
        笑容是最开始的信念,笑容是最开始的信念,笑容是最开始的信念。
        笑容是最开始的信念,笑容是最开始的信念,笑容是最开始的信念。
        
    </div>
</body>
</html>

結果图

下面笔者将外溢的內容开展掩藏。

编码块

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外溢內容开展掩藏</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        笑容是最开始的信念,笑容是最开始的信念,笑容是最开始的信念。
        笑容是最开始的信念,笑容是最开始的信念,笑容是最开始的信念。
        笑容是最开始的信念,笑容是最开始的信念,笑容是最开始的信念。
        
    </div>
</body>
</html>

結果图

  • 应用特性为overflow而且特性值为hidden来消除波动。
  • 消除波动以前大家先看看构造是怎样的。

编码块

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消除波动</title>
    <style>
       ul{
           list-style: none;
          
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>笑容是最开始的信念1</li>
        <li>笑容是最开始的信念2</li>
        <li>笑容是最开始的信念3</li>
        <li>笑容是最开始的信念4</li>
        <li>笑容是最开始的信念5</li>
        <li>笑容是最开始的信念6</li>
        <li>笑容是最开始的信念7</li>
        <li>笑容是最开始的信念8</li>
    </ul>
</body>
</html>

結果图

留意:在这里笔者都还没给波动元素消除波动呢,大伙儿能够显著的看到ul标识高宽比为0

消除波动实践活动

编码块

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消除波动</title>
    <style>
       ul{
           list-style: none;
           overflow: hidden;
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>笑容是最开始的信念1</li>
        <li>笑容是最开始的信念2</li>
        <li>笑容是最开始的信念3</li>
        <li>笑容是最开始的信念4</li>
        <li>笑容是最开始的信念5</li>
        <li>笑容是最开始的信念6</li>
        <li>笑容是最开始的信念7</li>
        <li>笑容是最开始的信念8</li>
    </ul>
</body>
</html>

結果图

如今大家很清晰的看到ul标识高宽比为23px像素,为何要应用:特性为overflow而且特性值为hidden来消除波动,由于ul标识中只能应用li标识元素不可以应用其它元素,因此特性为overflow而且特性值为hidden来消除波动是最好是但是啦。

总结

以上所述是网编给大伙儿详细介绍的CSS完成元素波动和消除波动的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!