css

1、无论在IE还是FF浏览器下 , width(实际的宽度)=padding+width(自定义的width)

2、border:hidden ==border:none;  hidden用于处理表格边框冲突的问题。

3、background-color在IE下作用于content+padding   而在FireFox作用于content+padding+border。

4、input{border:0;background:transparent;/*背景改为透明色*/}

5、list-style-image:url(01.jpg);   //可以设置图片符号 浏览器支持不好 不推荐使用。 //

<ul>通过设置{list-style-type:decimal;}可以转换成<ol>

list-style-type:decimal  circle  disc  square upper-alpha

6、行内元素 不支持 width、 height 、margin上下、  padding上下     支持line-height(行间距)

ff浏览器不支持width和padding

7、对于margin,左右间距=margin-left+margin-right;上下间距=margin-top和margin-bottom中的较大者

子块级元素的margin=父级元素的padding+子块级元素定义的margin

8、float会使子元素脱离父级元素,无法撑起父级元素。div:after,ul:after,dl:after{clear:both;content:"";display:block;height:0;visibility:hidden;}可以清除子

级元素浮动对父级元素的影响,重新撑起父级元素。

一个兄弟元素float,它的不浮动的兄弟元素将会把它环绕,而不会互相重叠。即图文混排。两个元素同时向一个方向浮动,则会并排浮动。

9、在IE浏览器中,如果子div的高度大于父div,会自动扩大父div,而在FF浏览器不会扩大父div,子div将以超出父div的形式显示。

实际工作中,要设置容器的背景色,以防子容器大于父容器。

10、position:absolute; 子元素不属于父元素,相对于窗口定位。如果希望子元素相对于父元素定位,可设置父元素position为relative或者absolute。

如果子元素定位在父元素外面,子元素将无法显示。

position:relative;子元素属于父元素,相对于原来的位置定位。

position:fixed;相对于浏览器窗口。

11、

自身属性

son.offsetWidth  //son自身宽度,包含左右边框

son.offsetHeight // son 自身高度,包含上下边框

son.clientWidth  //son可视区域宽度,不包含作用边框和垂直滚动条宽度

son.clientHeight // son 可视区域高度,不包含上下边框和水平滚动条高度

 自身位置

son.scrollWidth  // son垂直滚动条宽度

son.scrollHeight //  son 水平滚动条高度

son.scrollTop   // son 竖直滚动条滚动到最低端时,被卷去的高

son.scrollLeft  //son 水平滚动条滚动到最右端时,被卷去的左。

son.offsetTop   //son到父元素上边界

son.offsetLeft  // son到父元素左边界 父元素padding+子元素margin+子元素postion =子元素.offsetLeft

son.clientTop  // son的上边框(border-top)

son.clientLeft  // son的左边框(border-left)

 

//获取屏幕可用的宽高(屏幕分辨率)

window.screen.availHeight   //高

window.screen.availWidth    //宽

 

window.screen.height // 估计是包括导航栏 菜单栏各种

window.screen.width

 

//获取body网页正文的位置

var posTop =

(typeof window.screenTop ==”number”)?window.screenTop:window.screenY;

var posLeft =

(typeof window.screenLeft ==”number”)?window.screenLeft:window.screenX;

 

window.innerHeight

window.innerWidth    //  浏览器的视口,不包括工具栏和滚动条

原文地址:https://www.cnblogs.com/yaodi/p/4081948.html