js_css页面定位归纳.doc

页面定位问题在页面表现中，常常遇到页面或元素静态或动态定位的问题，下面将对定位问题涉及到的CSS和JavaScript基础知识进行归纳。一 CSS相关的定位属性1.1 box模型1.1.1 折叠的外边距（margin）垂直的外边距会折叠，但水平的则不会。（IE中外边距和内边距也会折叠）1.1.2 盒子到底有多大IEFF/chromeheightborder + padding + content-height content-heightwidthborder + padding + content-width content-width1.1.3 默认值很多元素都有默认的外边距或内边距，为方便定位，常常使用：*padding:0; margin:0;1.1.4 消失的padding-right当出现水平滚动条时，FF(chrome)的padding-right为0，IE8则不会。1.1.5 Overflow属性有四个可选值：visible(默认) | hidden | scroll | auto当盒子设置了高度或宽度，当内容超过了这个值时：IEFF/Chromevisible盒子会给内容撑大超出盒子的内容是可见的，但会渲染的盒子的外面去，盒子外的内容将不会受到影响Hidden会将所有超出盒子的所有内容都给隐藏掉Scroll在水平和垂直方向上出现滚动条Auto在需要时才出现滚动条Overflow的另外一个常见的作用是用于清除浮动（见1.3.2）。另外在IE中无论是否需要，总是要添加一个滚动条，可以在body上添加样式overflow:auto;清除。1.2 display 与 visiable属性多数元素都有display属性，或者为block或者为inline。元素能够有改变其display值的能力，如将block元素改变为inline元素。当display为none时，有必要将visible做比较。display:none 当元素设置为此属性时，该元素以及嵌套在其中的任何元素，都不会再显示在页面中。而且这个元素原先占据的任何空间都会被移除，就像不存在一样。visibility:visible 会隐藏该元素，但这个元素占据的空间仍然会得到保留。1.3 浮动与清除1.3.1 float属性float是将元素从常用规文档中移出的一种方式。位于浮动元素之后的元素，会在空间充足的情况下向上移动到浮动元素旁边。fload属性有四个可用的值：left 和right 分别浮动元素到各自的方向，none (默认的) 使元素不浮动，inherit 将会从父级元素获取float值。浮动与绝对定位都是从文档流中移出，但两者的区别是是否占据文档的空间，前者是占有的，后者就完全同相邻的元素脱离了关系。1.3.2 清除浮动的技术1. clear clear能够清楚元素的浮动。其原理是带有清除样式的元素的margin-top能够被自动重写并设置，从而使该元素只有可见部分会显示在浮动元素下方。因此，如果我们为清除元素设置了上外边距，这个上外边距也将被clear声明撤销。但通过JS打印其marginTop值，仍为设置了的值。（此原理经验证只适合FF和Chrome）;2. 空div方法。从字面来看，是一个空的 div。有时可能会用。3. overflow方法。在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，因为他不需要额外元素。但是，如果需要增加一个新的 div 来使用这个方法，其实就和空 div 方法一样没有语义了。而且要记住，overflow 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。4. Aslett清除方法。这种方法使用CSS的:after伪元素清除非浮动的内容，它需要在浮动元素的父级元素后加入一点看不见的内容。具体代码为：1.4 position属性CSS中最常用的布局类属性，一个是float(CSS浮动属性Float详解)，另一个就是CSS定位属性position。position有4个值：static（默认，正常的文档流），absolute，fixed和relative。1. relative值可以通过设置元素的top/left/bottom/right来设置相对于原来默认位置的偏移值。该元素并为移出文档流，原来的位置不会给其它元素占据。2. 当指定为position:absolute时，原始完成移出文档流，不会占据文档流的空间。可以利用top/left/bottom/right相对于已定位的父级元素进行相对定位。3.当指定为position:fixed时，与绝对定位的区别在于定位的相对环境是窗口，所以在页面滚动时不会随之移动。ie6不支持此属性，但可以有相关技巧予以修正。（值得强调的后三者定位环境的差异。相对定位时相对于自身原来的位置，绝对定位是相对于父级以定位的元素，即offsetParent，固定定位为window）4. 常用相对定位+绝对定位进行定位。父元素设为position:relative，子元素设为position:fixed。其核心是让绝对定位的元素的定位环境是其设为相对定位的父元素。5.Z-index: z-index 属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z 轴）上的层叠顺序（stack order）。每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 auto 的 z-index 值），定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序。并且 stacking context 和 containing block 之间并没有必然联系。当 stacking context 一样的时候，就用 z-index 的值来决定怎样显示，如果 z-index 也相同（即 stack level 相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的 stacking context 下才会用 z-index 来决定先后，不同时则由 stacking context 的 z-index 来决定。例如：定位元素 A（z-index:100）里面有定位元素 A1（z-index:300），而定位元素 B 和元素 A 兄弟关系（z-index:200）。你会发现无论 A1 的 z-index 是多大，也会被 z-index 是 200 的 B 所覆盖，因为 A 的 z-index 只有 100。二 Dom相关的定位属性2.1 认识DOM相关的坐标属性（注：B=border， P=padding，C=content， S=滚动条）offsetTop : 该元素与offsetParent上空白距离，即两元素border间(不包括)的距离；offsetLeft : 同上(左空白)；offsetHeight : 元素自身高度，即上下两border（包括）间的距离，即（B+P+C(可见)+S）；offsetWidth : 同上(左右)；clientTop : 上边宽(border-top-width);clientLeft : 左边宽(border-left-width);clientHeight : 元素的高度，不包括border和滚动条，即(P(可见)+C);clientWidth : 同上（宽度）;scrollTop : 滚动条卷起的上高度;scrollLeft : 同上（左）;scrollHeight : 该元素在document中绝对高度(包括border)， 即(B+P+C(全部)+S);scrollWidth : 同上。*Height和*width是只读属性，*Top和*Left是可读写，可以调整具体值来进行页面定位。2.3 求元素在页面当中的绝对位置2.2.1 offsetParent与parentNode区别2.2.2 算法详见all.js function calcPos(_aoDomObj)，算法原理是递归元素的offsetParent，叠加其到上一级offsetParent的offsetTop和offsetLeft