Tag Archives: css

CSS Margin，边界重叠

2008年12月5日 – 15:39

在标准浏览器里测试代码(FireFox,Opera,Safari…) <div style=”background-color:#ccc; height:100px; width:400px;”> <div style=”margin-top:30px; background-color:#900; height:50px;”>margin-top:30px; background-color:#900; height:50px;</div> </div> 你以为会是这样： 结果确是这样： 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例外情况： 水平边界永远不会重叠。 浮动盒子、绝对定位盒子、内联块盒子、根盒子的边界永不重叠。 overflow属性不等于visible的元素与它的非浮动子元素之间边界不发生重叠。 常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。 如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。

By FoxLing | Posted in HTML/CSS/XML | Also tagged , | Comments (0)

CSS Reset，CSS初始化处理

2008年11月14日 – 10:22

由于各种浏览器对元素默认属性的定义不同，可能导致页面所有差异，于是，CSS Reset出现了。 对各种元素的CSS属性进行重定义，达到各种浏览器无差异的效果。 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td{ padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:''; } abbr,acronym { border: 0; }

By FoxLing | Posted in HTML/CSS/XML | Also tagged | Comments (0)

各种浏览器CSS选择符的支持情况

2008年11月6日 – 15:23

加入了Chrome的支持情况 包含：Safari，Chrome，FireFox3，FireFox2，FireFox1.5，Opera9，IE8，IE7，IE6 另外还有MAC OS支持情况 很全面了，厉害！很好很强大~~ 猛击这个链接看详情： Google Chrome Browser CSS Selector Support

By FoxLing | Posted in HTML/CSS/XML | Also tagged , | Comments (0)

CSS实现星级评分效果

2008年11月3日 – 17:13

利用z-index和相对定位，自己看例子去琢磨： /examples/star.html HTML+CSS代码： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>CSS实现星级评分</title> <style type=”text/css”> ul,li {margin:0; padding:0; list-style:none;} #star {position:relative;width:95px;height:19px;overflow:hidden;} #star li {display:inline;} #star {background:url(images/star.png);} #star_1, #star_2, #star_3, #star_4, #star_5, #current {position:absolute; top:0; left:0; display:block; height:19px; text-indent:-9999px; outline:none;} #current {background:url(images/star.png) 0 -19px;} #star_1:hover, #star_2:hover, #star_3:hover, #star_4:hover, #star_5:hover [...]

By FoxLing | Posted in HTML/CSS/XML | Also tagged | Comments (3)

Button在IE下的padding

2008年10月21日 – 21:17

.btn_default_1 {border:3px double #F90; height:25px;line-height:18px;padding:0 10px;font-size:12px; background-color:#FFF;cursor:pointer;-moz-background-clip:padding;} 在padding:0 10px的情况下，里面硬是多出了1px的白边，真是百思不得其解，Google,Baidu了一下也没找到什么结果…. 有空再研究，有朋友知道的请指教啊

By FoxLing | Posted in HTML/CSS/XML | Comments (0)