html/css中关于轮播图的叠层和居中

关于叠层和居中

  小弟初出江湖,错误之处敬请见谅。

  制作类似于淘宝网首页的轮播图片效果,我们不可避免的会遇到有关叠成和居中的问题。以下是我参考网上各位大牛共享的总结

  一、叠层问题

  轮播图的效果即是同一区域内依次轮流显示图片,这也就需要我们将若干张图片放置于同一区域。实现这一功能一般要用到Css中的Positon属性。其有四个值,默认为static(遵循基本定位规定),我们将用到的是absoluterelative

  Absolute是绝对定位,定位方式是TRBLtoprightbottomleft)。可以z-index分级。若元素的父级未设置定位属性,那么将以body原点定位。若设置了,则以父级原点定位。

  Relative是相对定位,确切的说是相对自身位置的定位。定位方式、分级与上相同。但注意它是不可叠层的,不可叠层的,不可叠层的,重要的事情说三遍。

  所有,我们做叠层效果时,做好父级元素后,要对子级元素设置absolute绝对定位(因为relative相对定位是不叠层的)。Absolute效果会使元素脱离原本的文本流,因而其可以叠层;而relative效果并不会使元素脱离文本流,因而它不能产生叠层。

  二、居中问题

  这里我主要说说auto实现的自动计算居中效果。我以body作为父元素,子元素以absolute设置好绝对定位(left:0  top:0)和自身模块的宽度,那现在我是不是可以对子元素模块”margin0px auto;来实现未知宽度的浏览器都达到居中显示的效果呢?经实践,margin失效了。Marginauto原理是:通过father的宽度减去son的宽度,再自动分配两边的像素宽度。条件都符合为什么上面方法不行呢?原来,经过了absolute的设置,son元素的性质发生了变化:son元素变为了浮动元素,也就是说其宽度等于其内容的宽度而不再是原本设置好的宽高了(这种性质被叫做包裹性),son的宽度变为未知量了,所以auto无法再计算,margin失效。

  问题来了,那要怎么实现居中啊?请看下面一段代码。

#entirety

  Width:1000px;

  Height:560px;

  Position:absolute;

  Left:0px;

  Right:0px;

  Margin:auto;

  有人会说了,小曦你在逗我么,刚刚还说的absolutemargin会失效的啊。

  告诉你,上面的代码运行之后是正确的。我个人的理解是这样的:

  entirety元素的父元素是bodyentirety的绝对定位是左右两个0,也就是说它的内容是要横向铺满body的,但是!我们设置了宽度啊,entirety就那么宽,让它横向铺满它做不到啊。这时候,我们的margin出场了,你不是做不到么,我帮你啊。因为绝对定位的左右两个0(即左右横向撑满body),margin知道body的宽度;entirety的宽度在那摆着呢,margin可以轻松的计算出两边的留白从而实现居中。

  所以...嘿嘿,其实我也不知道这样理解对不对,不过代码确实是可以实现的。

  小小新人一枚,缔曦是也。欢迎各位大牛批评指正,不胜感激。

你可能感兴趣的:(前端,css,叠层,居中,auto,absolute)