CSS消除波动方式小结

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

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

1、设定父元素高宽比

假如1个元素要波动,那末它的先祖元素1定要有高宽比.高宽比的盒子,才可以关住波动

要是波动在1个有高宽比的盒子中,那末这个波动就不容易危害后边的波动元素.因此便是消除波动带来的危害了.

缺点:工作中上,大家肯定不容易给全部的盒子加高宽比,这是由于不便,而且不可以融入网页页面的迅速转变。

2、overflow

撑起父元素的高宽比

1个父亲不可以被自身波动的儿子撑出高宽比。可是,要是给父亲再加overflow:hidden; 那末,父亲就可以被儿子撑出高了。

overflow:hidden;可以让margin起效。

overflow:hidden;
overflow:auto;

缺点:假如有外溢要显示信息的內容,也都另外给掩藏了。

3、提升子元素(块级),而且设定其clear特性值为both来处理

<div>
      <p></p>
      <p></p>
     <p></p>
  </div>
   <div>   → clear:both;
       <p></p>
       <p></p>
     <p></p>
  </div>

最简易的消除波动的方式,便是给盒子提升clear:both;表明自身的內部元素,不会受到别的盒子的危害。

缺点:便是margin无效。两个div之间,沒有任何的空隙了。

3.1、隔墙法:

在两一部分波动元素正中间,建1个墙。分隔两一部分波动,让后边的波动元素,不去追前面的波动元素。

墙用自身的人体作为了空隙。

<div>
       <p></p>
       <p></p>
       <p></p>
  </div>
   <div class="clear"></div>
   <div>
      <p></p>
      <p></p>
      <p></p>
  </div>

大家发现,隔墙法功能强大,可是第1个div,還是沒有高宽比。假如大家如今想让第1个div,全自动的依据自身的儿子,撑出高宽比。

3.2、内墙法:

<div>
       <p></p>
       <p></p>
       <p></p>
       <div class="clear"></div>
   </div>
  <div>
       <p></p>
      <p></p>
      <p></p>
  </div>

内墙法的优势便是,不仅可以让后一部分的p不去追前一部分的p了,而且能把第1个div撑出高宽比。

这样,这个div的情况、边框就可以够依据p的高宽比来撑开

4、应用after或before伪目标消除波动

div:after{content:"";display:block;clear:both;}
div:before{content:"";display:block;clear:both;}

这类方法用的较为多,在新项目中提议应用这类方法

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!

上一篇:CSS3完成内凹圆角的案例编码 返回下一篇:没有了