js_css页面定位归纳

《js_css页面定位归纳》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、页面定位问题在页面表现中，常常遇到页面或元素静态或动态定位的问题，下面将对定位问题涉及到的CSS和JavaScript基础知识进行归纳。一．CSS相关的定位属性1.1box模型1.1.1折叠的外边距（margin）垂直的外边距会折叠，但水平的则不会。（IE中外边距和内边距也会折叠）1.1.2盒子到底有多大IEFF/chromeheightborder+padding+content-heightcontent-heightwidthborder+padding+content-widthcontent-width1.1.3默认值很多元素都有默认的外边

2、距或内边距，为方便定位，常常使用：*{padding:0;margin:0;}1.1.4消失的padding-right当出现水平滚动条时，FF(chrome)的padding-right为0，IE8则不会。1.1.5Overflow属性有四个可选值：visible(默认)

3、hidden

4、scroll

5、auto当盒子设置了高度或宽度，当内容超过了这个值时：IEFF/Chromevisible盒子会给内容撑大超出盒子的内容是可见的，但会渲染的盒子的外面去，盒子外的内容将不会受到影响Hidden会将所有超出盒子的所有内容都给隐藏掉Scroll在水平和垂直

6、方向上出现滚动条Auto在需要时才出现滚动条Overflow的另外一个常见的作用是用于清除浮动（见1.3.2）。另外在IE中无论是否需要，总是要添加一个滚动条，可以在body上添加样式overflow:auto;清除。1.1display与visiable属性多数元素都有display属性，或者为block或者为inline。元素能够有改变其display值的能力，如将block元素改变为inline元素。当display为none时，有必要将visible做比较。display:none当元素设置为此属性时，该元素以及嵌套在其中的任何元素，都不会再

7、显示在页面中。而且这个元素原先占据的任何空间都会被移除，就像不存在一样。visibility:visible会隐藏该元素，但这个元素占据的空间仍然会得到保留。1.2浮动与清除1.2.1float属性float 是将元素从常用规文档中移出的一种方式。位于浮动元素之后的元素，会在空间充足的情况下向上移动到浮动元素旁边。fload属性有四个可用的值：left和right分别浮动元素到各自的方向，none(默认的)使元素不浮动，inherit将会从父级元素获取float值。浮动与绝对定位都是从文档流中移出，但两者的区别是是否占据文档的空间，前者是占有的，后者

8、就完全同相邻的元素脱离了关系。1.2.2清除浮动的技术1.clearclear能够清楚元素的浮动。其原理是带有清除样式的元素的margin-top能够被自动重写并设置，从而使该元素只有可见部分会显示在浮动元素下方。因此，如果我们为清除元素设置了上外边距，这个上外边距也将被clear声明撤销。但通过JS打印其marginTop值，仍为设置了的值。（此原理经验证只适合FF和Chrome）;2.空div方法。从字面来看，是一个空的div。有时可能会用。3.overflow方法。在父元素上设置overflow这个css属性。如果父元素的这个属性设置为auto

9、或者hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，因为他不需要额外元素。但是，如果需要增加一个新的div来使用这个方法，其实就和空div方法一样没有语义了。而且要记住，overflow属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。4.Aslett清除方法。这种方法使用CSS的:after伪元素清除非浮动的内容，它需要在浮动元素的父级元素后加入一点看不见的内容。具体代码为：1.1position属性CSS中最常用的布局类属性，一个是float(CSS浮动属性Float详解)，另一个就是CSS定位属性po

10、sition。position有4个值：static（默认，正常的文档流），absolute，fixed和relative。1.relative值可以通过设置元素的top/left/bottom/right来设置相对于原来默认位置的偏移值。该元素并为移出文档流，原来的位置不会给其它元素占据。2.当指定为position:absolute时，原始完成移出文档流，不会占据文档流的空间。可以利用top/left/bottom/right相对于已定位的父级元素进行相对定位。3.当指定为position:fixed时，与绝对定位的区别在于定位的相对环境是窗口，

11、所以在页面滚动时不会随之移动。ie6不支持此属性，但可以有相关技巧予以修正。（值得强调的后三者定位环境的差异