zoukankan      html  css  js  c++  java
  • 定位、浮动、叠放

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

        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”之一。

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    Linux上将文件夹复制到指令目录
    将PC版网页转为手机端自适应网页
    WCF初探-18:WCF数据协定之KnownType
    WCF初探-17:WCF数据协定之等效性
    WCF初探-16:WCF数据协定之基础知识
    WCF初探-15:WCF操作协定
    2018数学二21题解法分析
    柯西不等式:简单常考形式
    等价、合同、相似、正交变换;二次型,正定,惯性指数
    高数狄利克雷收敛条件(傅里叶)
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/5376587.html
Copyright © 2011-2022 走看看