js_css页面定位归纳.doc

页面定位问题 在页面表现中，常常遇到页面或元素静态或动态定位的问题，下面将对定位问题涉及到的CSS和JavaScript基础知识进行归纳。 CSS相关的定位属性 box模型 折叠的外边距（margin） 垂直的外边距会折叠，但水平的则不会。（IE中外边距和内边距也会折叠） 盒子到底有多大 IE FF/chrome height border + padding + content-height content-height width border + padding + content-width content-width 默认值 很多元素都有默认的外边距或内边距，为方便定位，常常使用： *{padding:0; margin:0;} 消失的padding-right 当出现水平滚动条时，FF(chrome)的padding-right为0，IE8则不会。 Overflow属性 有四个可选值：visible(默认) | hidden | scroll | auto 当盒子设置了高度或宽度，当内容超过了这个值时： IE FF/Chrome visible 盒子会给内容撑大 超出盒子的内容是可见的，但会渲染的盒子的外面去，盒子外的内容将不会受到影响 Hidden 会将所有超出盒子的所有内容都给隐藏掉 Scroll 在水平和垂直方向上出现滚动条 Auto 在需要时才出现滚动条 Overflow的另外一个常见的作用是用于清除浮动（见1.3.2）。另外在IE中无论是否需要，总是要添加一个滚动条，可以在body上添加样式overflow:auto;清除。 display 与 visiable属性 多数元素都有display属性，或者为block或者为inline。元素能够有改变其display值的能力，如将block元素改变为inline元素。 当display为none时，有必要将visible做比较。 display:none 当元素设置为此属性时，该元素以及嵌套在其中的任何元素，都不会再显示在页面中。而且这个元素原先占据的任何空间都会被移除，就像不存在一样。 visibility:visible 会隐藏该元素，但这个元素占据的空间仍然会得到保留。 浮动与清除 float属性 float?是将元素从常用规文档中移出的一种方式。位于浮动元素之后的元素，会在空间充足的情况下向上移动到浮动元素旁边。 fload属性有四个可用的值：left 和right 分别浮动元素到各自的方向，none (默认的) 使元素不浮动，inherit 将会从父级元素获取float值。 浮动与绝对定位都是从文档流中移出，但两者的区别是是否占据文档的空间，前者是占有的，后者就完全同相邻的元素脱离了关系。 清除浮动的技术 clear clear能够清楚元素的浮动。其原理是带有清除样式的元素的margin-top能够被自动重写并设置，从而使该元素只有可见部分会显示在浮动元素下方。因此，如果我们为清除元素设置了上外边距，这个上外边距也将被clear声明撤销。但通过JS打印其marginTop值，仍为设置了的值。（此原理经验证只适合FF和Chrome）; 空div方法。从字面来看，是一个空的 div。有时可能会用。 overflow方法。在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，因为他不需要额外元素。但是，如果需要增加一个新的 div 来使用这个方法，其实就和空 div 方法一样没有语义了。而且要记住，overflow 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。 Aslett清除方法。这种方法使用CSS的:after伪元素清除非浮动的内容，它需要在浮动元素的父级元素后加入一点看不见的内容。具体代码为： position属性 CSS中最常用的布局类属性，一个是float(CSS浮动属性Float详解)，另一个就是CSS定位属性position。position有4个值：static（默认，正常的文档流），absolute，fixed和relative。 relative值可以通过设置元素的top/left/bottom/right来设置相对于原来默认位置的偏移值。该元素并为移出文档流，原来的位置不会给其它元素占据。 当指定为position:absolute时，原始完成移出文档流，不会占据文档流的空间。可以利用top/left/bottom/right相对于已定位的父级元素进行相对定位。 3.当指定为position:fixed时，与绝对定位的区别在于定位的相对环境是窗口，所以在页面滚动时