定位、浮动、叠放

    浮动,可以让页面并排显示,制作干净整洁的布局。有时候需要用到定位的技术。

    position属性值有static、fixed、relative、absolute、inherit

    float属性值有left、right、none、inherit

    设计页面布局时候,常需要用到浮动,它是页面定位的一种基本功能。浮动可以创建一个自然流布局,同时允许元素设置自身尺寸和父元素容器的尺寸大小。

    一个元素浮动时候,其位置依赖于其周边元素,其周边元素及其摆放位置取决于围绕他的元素的文档对象模型(DOM)。

   浮动也会给其父元素带来影响。如页面的内容设置了一个宽度,子元素的浮动确定了他们的位置,但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷,从而使父元素的高度为“0”,以及忽略其他的属性。嵌套的元素也可能出现样式错误。针对这样的问题,我们可以采用在父元素中设置清除浮动来解决。关于清除浮动有几种方式:

1.clear:left;

  clear:right;

  clear:both;

这种方式有一定效果,但不太适合语义化。

2.overflow:auto;

  overflow:hidden;

备注:使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条,这样一来,最好是直接使用“overflow:hidden;”来清除浮动。缺点:可能会影响样式的效果,比如盒子阴影效果

3.clearfix

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类,我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷,使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷,以及用来清除元素的浮动。

定位属性值:

static:默认值,不接受位置属性值设置

relative:相对定位元素的位移是相对于元素自身的边缘进行位移。可以给元素设置位移(offset)“top、right、bottom和left”属性。它们原先的位置仍保留,仍属于自然流。

absolute:脱离文档流。相对于div的父元素进行绝对定位,使用绝对定位的元素可以指定垂直和水平的位移属性,使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。

fixed:相对于浏览器窗口,不会随滚动条滚动。

元素叠放顺序:

z-index属性用来设置元素的层叠顺序。值越大越在上面。给元素设置“z-index”属性及使用盒子位移属性,都要先在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。

宝剑锋从磨砺出,梅花香自苦寒来。
原文地址:https://www.cnblogs.com/haimengqingyuan/p/5376587.html