你的位置:首页 > 软件开发 > 网页设计 > CSS易混淆知识点总结与分享-定位与布局

CSS易混淆知识点总结与分享-定位与布局

发布时间:2015-07-26 16:00:13
CSS定位有四种模式:static、relative、absolute、fixed,其它static是默认值,下面分别讲解下各自的特点; static:静态定位,处于动态布局流中,按照页面中的各元素先后顺序、父子关系自动排列与布局,每个静态定位元素均占用动态布局的一块空间;r ...

CSS易混淆知识点总结与分享-定位与布局

CSS定位有四种模式:static、relative、absolute、fixed,其它static是默认值,下面分别讲解下各自的特点; 

static:静态定位,处于动态布局流中,按照页面中的各元素先后顺序、父子关系自动排列与布局,每个静态定位元素均占用动态布局的一块空间;

relative:相对定位,处于动态布局流中,如果设置了偏移量(LEFT或TOP的值),则会有相应的位置调整,位置调整的标准是基于上一个处于动态布局流中的元素(即:设为static及relative元素);

absolute:绝对定位,不在动态布局流中,动态布局流中会忽略该元素的存在(即不计算该类元素的占用空间,且默认处于未设置Z-INDEX的 普通元素的上层),如果设置了偏移量(LEFT或TOP的值),则会有相应的位置调整,位置调整的标准是基于非静态定位的父元素(或者说是 非静态定位包裹的元素),如果没有符合条件的父元素,则以BODY为标准;如果没有设置偏移量,则直接将元素当前的位置做位默认的偏移 量,另外,绝对定位具有包裹性,即块级元素被绝对定位后,除非显示式设置元素的宽度与高度,否则元素的默认宽度与高度是以元素的内 容来自动适应的;

fixed:固定定位,不在动态布局流中,动态布局流中会忽略该元素的存在(即不计算该类元素的占用空间,且默认处于未设置Z-INDEX的普 通元素的上层),如果设置了偏移量(LEFT或TOP的值),则会有相应的位置调整,位置调整的标准是基于浏览器窗口的(可以理解为BODY) ,如果没有设置偏移量,则直接将元素当前的位置做位默认的偏移量,另外,固定定位具有包裹性,即块级元素被固定定位后,除非显示式设置元素的宽度与高度,否则元素的默认宽度与高度是以元素的内容来自动适应的;还有若设置或默认的的位偏移量大于浏览器窗口范围则不会显示;

以下是上面四种定位方法的演示代码:

<!DOCTYPE html><html><head><meta charset="utf-8"/>  <title>CSS Study</title>  <style type="text/css">    html, body {      margin:0px;      padding:0px;      height:100%;    }    #div0{      position:static;      background-color:gray;      height:200px;    }    #div1 {      position:relative;      background-color:green;      height:200px;    }    #div2 {      position: absolute;      height: 50px;      background-color: red;      top: 20px;      left: 50px;      z-index: 9999;    }    #div3{      position:fixed;      background-color:yellow;    }  </style>  <script type="text/javascript">    window.onload = function () {      alertpostion("div2");      alertpostion("div3");    }    function alertpostion(divid)    {      var odiv = document.getElementById(divid);      var top = odiv.offsetTop;      var left = odiv.offsetLeft;      alert("top:" + top +",left:" + left);    }  </script></head><body>  <div id="div0">    div0 content position:static;  </div>  <div id="div1">    div1 content position:relative;    <div id="div2">      div2 content position: absolute;    </div>  </div>  <div id="div3">    div3 content position:fixed;  </div></body></html>

原标题:CSS易混淆知识点总结与分享-定位与布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。