首页 > 代码库 > css
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 // 浏览器的视口,不包括工具栏和滚动条
css