(k88e) =(字体)font --(颜色)color:(红黄蓝...|rgb()|#......) --(样式)font-style:(斜体italic/倾斜oblique/正常normal) --(背景颜色)background-color:(红黄蓝...|rgb()|#......) --(粗细)font-weight:(正常/粗体/较细/较粗|100-900) --(尺码)font-size:(..px|..%|超小-超大) --(装饰)text-decoration:(无/下划线/中划线/上划线/闪烁) --(行高)line-height:(..px|..%|相对-正常) //行高 /*在终极解决方案的style下, span的表现line-height可以小于18px, 但是实际line-height一定>=18px, 需要<18px的实际line-height时加上vertical-align:baseline(不能top,bottom); */ /*在终极解决的style下, 当border-top为奇数px时会莫明奇妙地与上行产生一个1px高的间隔, 加上"vertical-align:baseline;"(或top, bottom)就没有了: <span style="width:206px;height:1px;background-color:red;vertical-align:baseline;"></span><br> <span style="width:200px;height:28px;border-top:red 1px solid;vertical-align:baseline;">ie & firefox</span> */ --(字族)font-family:(...) //等宽字体monospace有courier new和lucida console两种在ie和firefox通用, 只有"font-family: courier new;"可以忍受 =文本(text) --text-align:(左/中/右/对齐) --vertical-align:(..px|..%|基线-文本底部) /*vertical-align:middle表示的是inline垂直居中, 就是说既不是父定位,也不是子定位,而是兄弟定位 在block内要垂直居中一段文字/一个图片(图片也可以放到背景居中): <span style="display:-moz-inline-box;display:inline-block;height:200px;border:red 1px solid;"> <span style="display:-moz-inline-box;display:inline-block;width:0px;height:100%;vertical-align:middle;"></span> <!--注意100%这行不能删掉,否则全部居顶, 而且vertical-align必须是middle, 否则会导致要居中的对象都居顶或居底--> <span style="vertical-align:top;">top</span> <span style="vertical-align:bottom;">bottom</span> <span style="vertical-align:middle;">middle</span> <!--上行要垂直居中多行文字时改成: <span style="display:-moz-inline-box;display:inline-block;vertical-align:middle;"> <div>middle<br>middle</div> </span> --> <img style="vertical-align:middle;" src="img/srch.gif"> </span> 水平居中时, 在firefox下也要有一个width:100%的空span, 但firefox下不能直接写100%(firefox不认, ie倒行): <span style="width:100%;height:0px;vertical-align:baseline;"></span><br>(不要掉了这个"<br>") 要同时水平且垂直居中: <style> .span_v{height:21px;vertical-align:middle;} .span_h{width:52px;height:0px;vertical-align:baseline;} </style> <span style="text-align:center;"><!-- --><span class="span_h"></span><br><!-- --><span class="span_v"></span><span style="vertical-align:middle;">you are fool you are fool</span> </span> 注意:由于只能将自由width转子元素负百分数margin-top, 而无法将自由height转子元素负百分数margin-top或top, 因而div:block元素无法实现垂直居中 text-align:center的意思: ie下:让所有子元素即各行相对于父元素居中 firefox:让所有子元素即各行相对于最宽兄弟元素居中 元素内简单地水平居中: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div style="border:1px solid green;width:200px;"> <div style="border:1px solid red;width:500px;margin:0px auto;">jack</div> </div> */ --变体(小型大写字母/正常) --转换(首字母大写/大写/小写/无) --缩进(..px|..%) --词距(..px|..%|正常)(仅作用于字母文字) --letter-spacing:(..px|..%|正常) //字距 --字体大小调整(相对/无) --字体伸展(极为紧缩-极为扩展) --white-space:normal/pre/nowrap =区块 --width:(..px|..%|自动) --最大宽度(..px|..%|自动) --最小宽度(..px|..%|自动) --height:(..px|..%|自动) --最大高度(..px|..%|自动) --最小高度(..px|..%|自动) --清除(左/右/兼有/无) --可见性(可见/隐藏) --剪切:(自动/矩形),上(..px|..%|自动),下(..px|..%|自动),左(..px|..%|自动),右(..px|..%|自动),溢出(可见/滚动/隐藏/自动) --float:none/left/right{float非none(display非none时)则display被忽略, 也可以不使用float而只使用display和position} --position:static{默认位置} /absolute{相对于首个relative或absolute的上级对象偏移,不占用默认位置} /relative{相对于默认位置偏移,占用默认位置,所以要偏移不如用margin-top/margin-left或relative内absolute, 能让出位置}; 上(..px|..%);下(..px|..%);左(..px|..%);右(..px|..%); z-index(){决定absolute或relative或fixed(firefox)时的覆盖次序} --display:(inline{非block的所有可见对象}/block{div,form,pre,table,tr,td等}/none{让对象不可见并让出位置}) //relative内absolute: 将其父级元素设成relative(无left,top), 然后再相对父元素而非body进行absolute偏移, 能让出位置 //ie7下为了让定高div的内容像firefox那样能撑出去, 给div加relative:<div style="height:23px;position:relative;"><select>...</select></div> //block会在前面和后面都换行, inline串行并自动换行 //block和inline都属于串流(display), float在串流完成之后再插入 //position:relative时可以同时display:block, display:inline, 或float:非none //则共有四种布局方式:display:block, display:inline, float:非none, position:absolute //以下优先级从前到后: //1.display:none 则 postion 和 float被忽略 //2.position:absolute 则 display 和 float 被忽略 //3.float:非none 则 display被忽略, 定位对象被插在默认位置下一行的inline和block串流中 //float有用的话顶多也就是多个div在当前行float:right, 但是可恨的是却到下一行float:right, 而且所有div排列次序跟行文次序相反, //而试图用inline div内嵌这些float div以crack该问题也无效(虽然在ie(非firefox)下定义span的width时有效), 却float出inline div了, //可见float是一切罪恶的根源, 宁愿用absolute也不用float. //试过inline div内嵌多个inline div, 在外inline div施用text-align:right在ie的quirks模式可以但标准模式无效(外inline div宽度无效) //这个东东在ie下正常, 在firefox下宽度被忽略: //<div style="border-width:1px; border-style:solid; width:200px; height:10px;display:inline;text-align:right;"> //<div style="display:inline;">dddd</div> //<div style="display:inline;">jack</div> //</div> //再试inline div内嵌block div的方法,ie和firefox下都分别有问题 //为了顺应愚蠢的w3c和微软, 可以在页面顶部统一设定span{float:left;}, 传统SPAN大法临时解决方案(兼容firefox): (由于float元素能自动被其内float元素撑大, 而不必用after伪对象来撑大了) (不要span>*{float:left}, span内仍然需要tbody,tr,td,div,p,hr等display非inline的元素的表达, 如果确实需要这些元素模仿inline-block布局则外套span) (当然也可以不用br来换行, 而直接在需要换行的元素添加"clear:left;"样式) (需要js来fix不在单独span tag内的text, 默认是inline在normal flow里, 由于没有tag也无法用css来fix) (中间的正则处理不用\s, 是因为这样写可以过滤空格不过滤 ) (既没有父span也没有子span也没有用内联float:left标明的孤立span认为不是布局span而恢复成原始span) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> span{float:left;vertical-align:middle;overflow:hidden;cursor:default;}br{clear:left;} </style> <span style="width:700px;border:blue 1px solid;" id="jack"> <span>lkjkdjsf<div>jack</div></span> <span style="width:200px;height:18px;border:red 1px solid;" id="ppp">aSame appearance in ie and firefox</span> bbbbb <span style="width:200px;height:28px;border:red 1px solid;">ie and firefox</span>cccc<br> <span style="width:150px;height:18px;border:red 1px solid;">ie and firefox</span> </span> <script> function htmlspecialchars(str) {return str.replace(/</g, "<").replace(/>/g, ">"); } function trim(str) {return str.replace(/(^[\r\n\t ]*|[\r\n\t ]*$)/g, ''); } function ib_fix() {var all_span=document.getElementsByTagName('span'); for (var j=0;j<all_span.length;++j) {if (all_span[j].parentNode.tagName!='SPAN' && all_span[j].getElementsByTagName('span').length==0 && all_span[j].style.cssFloat!='left' && all_span[j].style.styleFloat!='left' ) {typeof(all_span[j].style.cssFloat)!='undefined' ? (all_span[j].style.cssFloat='none'):(all_span[j].style.styleFloat='none'); } if (all_span[j].getElementsByTagName('span').length>0 && all_span[j].childNodes.length-all_span[j].getElementsByTagName('span').length>0 ) {var a=all_span[j].childNodes; for (var i=0;i<a.length;++i) {if (a[i].nodeName=='#text' && trim(a[i].nodeValue)!='') {var b = document.createElement("span"); b.innerHTML=htmlspecialchars(a[i].nodeValue); a[i].parentNode.replaceChild(b, a[i]); } } } } } if(window.addEventListener) {window.addEventListener('load', ib_fix, false); } else {window.attachEvent('onload', ib_fix); } </script> //喇叭不响调头吹,在一个大部分用div布局的页面里,在不需要换行的行内所有元素统统使用<div style="float:left;"></div>是最方便的做法 //不过要在包含float left div的div的class里加clearfix以解决float出去的问题: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE|mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE|mac */ 有DOCTYPE时,IE6.0下html高度默认100%,body不是;FF1.5下html和body高度默认都不是100%,为了统一: <style> html{height:100%;}body{height:100%;margin:0;} </style> 这样html和body内部元素100%高度无效的问题也解决了, ie/ff皆有效, 严格如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> html{height:100%;}body{height:100%;margin:0;} span{display:-moz-inline-box;display:inline-block;vertical-align:middle;cursor:default;} </style> <span style="height:100%;border:solid red 1px;">test</span> //firefox3.2起已经支持display:inline-block, 不必费力的使用display:-moz-inline-box了 //span大法采用的时候需要打开服务器缓冲ob_implicit_flush(0)或ob_start()(即不隐藏缓冲或在php.ini里设置), //span大法下firefox中, select元素的以上各层元素要检查是否-moz-inline-box, 否则在选值时有可能坍塌, 直接上级需要设置高度, 否则选值时略有萎缩, select的默认选项的现实值也要足够宽, 否则选值后可能只显示半边 //因为浏览器解析span时会一边解析读服务器(猜测是没有通讯缓存) //table有渲染效率及布局灵活性不足的问题, div有无法控制换行的问题, float有跳到下一行的问题, absolute又容易重叠, //有办法兼容愚蠢的W3C(实际名称3WC)和愚蠢的微软而实现人类传统的从左到右从上到下的布局方法吗?这就是: //传统SPAN大法终极解决方案(兼容firefox): //不要用display:table-cell;取代display:-moz-inline-box;有水平对不齐的问题 //不要去掉vertical-align:middle;因默认的baseline被ie理解为底线却被firefox理解为顶线 //span下的overflow不能去掉(虽然span:-moz-inline-box下的overflow是无效的), 否则在firefox下访问含有该段代码的php页面时会出现无规律的盒子丢失现象 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style>span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:hidden;cursor:default;}</style> <span><div style="width:700px;border:blue 1px solid;"> <span><div style="width:200px;height:18px;border:red 1px solid;">aSame appearance in ie and firefox</div></span> <span><div style="width:200px;height:28px;border:red 1px solid;">ie and firefox</div></span><br> <span><div style="width:150px;height:18px;border:red 1px solid;">ie and firefox</div></span> </div></span> 为了省事, 在firefox下插入div来crack以及调整firefox下span:inline-box的宽度的工作可以交由js来做: (最后的window.onload用来确保在firefox下图片可以显示出来,不能删掉) <script> if(document.addEventListener) {document.addEventListener('DOMContentLoaded', ib_fix, false); } function ib_fix() {var spans=document.getElementsByTagName('span'); for (i=0;i<spans.length;++i) {var eleDiv = document.createElement('div'); eleDiv.innerHTML = spans[i].innerHTML; eleDiv.style.width = spans[i].style.width?spans[i].style.width:spans[i].offsetWidth+'px'; spans[i].innerHTML = ''; spans[i].appendChild(eleDiv); } for (i=0;i<spans.length;++i) {spans[i].style.width=spans[i].offsetWidth+ Number(spans[i].style.borderLeftWidth.slice(0,-2))+ Number(spans[i].style.borderRightWidth.slice(0,-2))+ Number(spans[i].style.paddingLeft.slice(0,-2))+ Number(spans[i].style.paddingRight.slice(0,-2))+ 'px'; spans[i].style.height=spans[i].offsetHeight+ Number(spans[i].style.borderTopWidth.slice(0,-2))+ Number(spans[i].style.borderBottomWidth.slice(0,-2))+ Number(spans[i].style.paddingTop.slice(0,-2))+ Number(spans[i].style.paddingBottom.slice(0,-2))+ 'px'; } window.onload=function(){document.body.innerHTML=document.body.innerHTML;}; } </script> /* <browser> <the width of> |<包含左右边框,包含padding> firefox span.-moz-inline-box |Yes firefox div |No ie6(DOCTYPE) span.-moz-inline-box,div |No ie6 span.-moz-inline-box,div |Yes */ /* 在终极模式下, 要在firefox下自动折行(换行)这么写: <span style="width:320px;overflow:visible;">...</span> */ =边距和填充 --margin:(..px|..%|自动)|上(..px|..%|自动),右(..px|..%|自动),下(..px|..%|自动),左(..px|..%|自动) --padding:(..px|..%|自动)|上(..px|..%|自动),右(..px|..%|自动),下(..px|..%|自动),左(..px|..%|自动) //有时候需要相邻的两个页面元素有部分重叠, 这时可以用负数边界margin:-...px来实现, 而不必用absolute布局 //重叠部分隐藏用父元素overflow:hidden //margin-top,margin-left用来偏移自身, margin-bottom,margin-right用来偏移其后元素, 百分数分母指父对象宽度 //padding都不允许为负数, 百分数分母指父对象宽度 =边框和外框 --border:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无) ---border-top:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无) ---border-bottom:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无) ---border-left:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无) ---border-right:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无) --outline:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无) =列表项 --样式(空心圆/实心圆/罗马数字/阿拉伯数字/.../无) --图像(URL/无) --位置(内部/外部) =杂项 --cursor:auto/default/hand(ie6和firefox里该用pointer)/... --filter:Chroma(Color=?)/Blur(Add=?, Direction=?, Strength=?)/alpha(opacity=30) //半透明效果ie是"filter:alpha(opacity=30);"而firefox是"opacity:0.3;" //ie/firefox都只支持"半透明背景"和"全透明背景色", 不支持"半透明背景色", 可以这样实现: <span style="width: 1015px; position: relative;"> <span style="width: 1015px; height: 427px;position:absolute; background:white; left:0px; filter:alpha(opacity=60); opacity:0.3; z-index:-1;"></span> <span style="border: 1px solid black; width: 125px; height: 425px; text-align: left;">left content</span> <span style="height: 427px; width: 884px; overflow-y: auto;">right content</span> </span> --behavior:url("....htc") url("....htc"); =背景 background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] background:[transparent|#......] [none/URL("...")] [repeat/repeat-x/repeat-y/no-repeat] [scroll/fixed] [0px|0%|left/center/right] [0px|0%|top/center/bottom] 使背景拉伸(仅ie):filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/kk.jpg', sizingMethod='scale'); ===================================================================================== 子选择兼容firefox和ie的写法: /*\*/span>*{float:left;}/**/ * html span *{float:expression(/SPAN/.test(this.parentNode.tagName)? 'left' : getComputedStyle(this,null).styleFloat)} 给ie支持的expression里加计数代码可以发现expression在页面显示\缩放\滚动\鼠标移动时会执行, 为了避免消耗客户端资源最好用这样的代码来实现一次性执行: * html span *{float:expression(document.styleSheets[n].rules[m].style.float=/SPAN/.test(this.parentNode.tagName)? 'left' : getComputedStyle(this,null).styleFloat)} ===================================================================================== css优先权(实际上也是渲染次序从前到后): (ie和firefox相同,除了"*{...}"在firefox里不可被内联css覆盖,可以改用"span{...}") 继承值(内部\外部\内联\属性)<属性值<内部或外部css指定值(跟包含或声明的次序有关)<内联css指定值(即style属性) 例如: <link href="kk.css" rel="stylesheet" type="text/css"> <!--kk.css内容:".kk{width:200px;}"--> <style> .kk{width:300px;} </style> <img src="http://diyism.com/!index/pic/logo.gif" width="100px" class="kk" style="width:400px;"> 调用时class="kk jj"里的顺序是没有作用的,内部css段内的顺序才起作用 内部或外部css内指定性(specificity)越高则优先权(priority)越高: A selector's specificity is calculated as follows: * count the number of ID attributes in the selector (= a) * count the number of other attributes and pseudo-classes in the selector (= b) * count the number of element names in the selector (= c) * Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity. Some examples: * {...} /* a=0 b=0 c=0 -> specificity=000 */ LI {...} /* a=0 b=0 c=1 -> specificity=001 */ UL LI {...} /* a=0 b=0 c=2 -> specificity=002 */ UL OL+LI {...} /* a=0 b=0 c=3 -> specificity=003 */ H1 + *[REL=up]{...} /* a=0 b=1 c=1 -> specificity=011 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity=013 */ LI.red.level {...} /* a=0 b=2 c=1 -> specificity=021 */ #x34y {...} /* a=1 b=0 c=0 -> specificity=100 */ 如果指定性相同再比较先后次序, 越后者优先权越高, 属性值后加!important的优先权最高(firefox支持) ===================================================================================== 制定css标准的时代还没有动态网页, 并没有考虑到区块内容变换, 因而css里没有类似"inherit:no;"的属性阻止继承, 只能在区块顶层元素class属性内加'reset'来重置所有可继承属性来尽力阻止来自上层css的影响, ".reset"定义段要 放在".tpl"定义之前以免影响区块css定义, 但阻止不了上层强指定值的影响: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> span{float:left;vertical-align:middle;overflow:hidden;cursor:default;}br{clear:left;} #jjj{font-size:100px;} #jjj span{font-size:100px;} .reset{font-size:medium;} .tpl{font-size:20px;} </style> <span id="jjj">kkkkkkkkkk <span class="reset tpl" style="border:1px solid red;">aaaaa</span> </span> 可继承属性大致只有这些(见W3C_CSS21_Specification.chm的"Appendix F. Full property table"): (有些内建这几个属性的元素不会继承, 可设值为'inherit'以强制继承) .reset {color: black; cursor: auto; direction: ltr; elevation: level; font-family: sans-serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: left; text-indent: 0; text-transform: none; visibility: visible; white-space: normal; word-spacing: normal; } 为了避免上层强指定值的影响, 只能制定一些自我约束原则来粗略满足ajax动态区块css独立性要求: 在css rule的selector的各个级别: 1.杜绝对tag或id定义样式(id for js, tag for html, class for css), 2.杜绝使用"前辈 后辈"式选择(只用父子式选择, ie6要用expression实现). 每个html小模板块对应一个css style块(供搜索引擎使用的公众页里)或css link文件(不怕文件零碎, 因静态文件浏览器会缓存, 而且ajax程序一个页面可能调无数小模板块(还可能是从外部网站调用的), 把css集中到一个文件不现实, 子模板也应该是一个一个的小文件),并且该css style块或css link文件内所有rule都以对应的html块的顶层class开头(最好前缀"tpl_"以跟下级class区分). ===================================================================================== w3c没有定义"word-wrap:break-word;",firefox要这样写"white-space: -moz-pre-wrap;",但无法让长单词折行 长词折行可以用这个js来实现:http://naironjcg.googlepages.com/micoxWordWrap.js(用TOR代理访问到) 保存于本笔记同目录micoxWordWrap.js (css3里white-space:pre-wrap;是对应firefox里white-space:-moz-pre-wrap;的, 但应该也不能换行长单词) 用js性能太差(用的getElementsByTagName("*"))只能放弃在firefox2.0中换行长单词(hidden起来): <style>* html #the_table {table-layout:fixed;}</style> <table style="border:1px solid red;table-layout:fixed;" id="the_table"><tr> <td width="15%"> <pre style="width:100%;overflow:hidden;word-wrap:break-word;white-space:-moz-pre-wrap;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br> cccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </pre> </td> <td width="85%"> </td> </tr></table> 把整个pre放在用百分数定宽的table cell内在firefox也能正常工作, 但是ie6和ie7都不按cell宽度算100%, 而不能隐藏长词或强制换行长词(如果在百分数定宽的div内倒可以), 要在table的style内加"table-layout:fixed;" 但这又导致firefox下格子内容重叠问题, 所有只有用css hack for ie方法:"* html #the_table {table-layout:fixed;}" 看到强制换行还有一种方法 (ie用"word-break:break-all;", firefox用overflow触发binding处理函数, 对pre无效, 而且这种插入特殊字符的方法导致链接不能正常显示): span{overflow-x:hidden; word-wrap:break-word; word-break:break-all; -moz-binding:url('css/word_wrap.xml#word_wrap');} word_wrap.xml文件是: <?xml version = "1.0"?> <bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml"> <binding id = "word_wrap" applyauthorstyles = "false"> <implementation> <constructor> <![CDATA[ var elem = this; elem.addEventListener('overflow', function() {var exp = /<​\/*[​_\s="'\w]+>/g; var txt = elem.innerHTML; var chars = txt.split(''); var newTxt = chars.join('​'); newTxt = newTxt.replace(exp, reconstructTag); elem.innerHTML = newTxt; }, false ); function reconstructTag(_tag) {return _tag.replace(/​/g, ''); } ]]> </constructor> </implementation> </binding> </bindings> ===================================================================================== overflow-x,overflow-y现在firefox也支持了(visible,scroll,hidden,auto) ===================================================================================== 居中简单写法: <div style="position:absolute;top:50%;left:50%;width:100px;height:100px;margin-left:-50px;margin-top:-50px;"> 复杂的写法: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <title>篱笆社区</title> <style> html{height:100%;}body{height:100%;margin:0;} span{display:-moz-inline-box;display:inline-block;vertical-align:middle;cursor:default;} .span_v{width:0px;height:100%;vertical-align:middle;} </style> </head> <body style="text-align:center;"> <span class="span_v"></span><span style="vertical-align:middle;"><input type="button" onclick="location='/my'" value="个性化首页"> <input type="button" onclick="location='/search'" value="搜索"></span> </body> </html> ===================================================================================== 让页面头部不随滚动条滚动的办法(无脚本实现时颤动缺点, 兼容firefox和ie): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!--[if lte IE 6]> <STYLE type=text/css> HTML {overflow: hidden;} </STYLE> <![endif]--> <style> #header {left:0px;min-height:50px;} body {margin:0px;} .fixed_crossb {position: fixed;} * html .fixed_crossb {position: absolute;} * html body {overflow-y:auto;height:100%;width:98.5%;} div{border:1px solid red;} </style> </head> <body> <div id="header" class="fixed_crossb"> header headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader<br> header headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader<br> </div> <div style="height:1200px;padding-top:100px;"> content contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br> content contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br> </div> </body> </html> 利用.fixed_crossb还可以做lightbox(覆盖对话框), ie要用iframe来覆盖select, 且仍需要overlay: #overlay_select {display:none; left:0px; top:0px; z-index:997; width:120%; height:100%; background-color:black; filter:alpha(opacity=0.75); opacity:0.75; } #overlay {display:none; left:0px; top:0px; z-index:998; width:120%; height:100%; background-color:black; filter:alpha(opacity=75); opacity:0.75; } #div_pop {display:none; left:50%; top:50%; margin-left:-250px; margin-top:-100px; z-index:999; width:500px; height:200px; background-color:white; border:4px solid #525252; } <a href="javascript:show_div_pop()">Show</a> <div id="div_pop" class="fixed_crossb">...</div> <iframe id="overlay_select" class="fixed_crossb"></iframe> <div id="overlay" class="fixed_crossb" onclick="hide_div_pop()"></div> <script> function hide_div_pop() {$('#div_pop').hide(); $('#overlay').hide(); if (typeof(document.body.style.maxHeight)=== "undefined")//ie {$('#overlay_select').hide(); } //clearInterval(window.hdl_interval); } function show_div_pop() {if (typeof(document.body.style.maxHeight)=== "undefined")//ie {$('#overlay_select').show(); } $('#overlay').show(); $('#div_pop').show(); //window.hdl_interval=setInterval('resize_div_add()', 200); } /* function resize_div_add() {$('#div_add')[0].style.overflow='auto'; var the_width=$('#div_add')[0].scrollWidth; var the_height=$('#div_add')[0].scrollHeight; $('#div_add')[0].style.width=the_width+'px'; $('#div_add')[0].style.height=the_height+'px'; $('#div_add')[0].style.marginLeft=-the_width/2+'px'; $('#div_add')[0].style.marginTop=-the_height/2+'px'; } */ </script> ===================================================================================== 有时需要特殊字体的文字作标题, 但是用样式无法实现, 只能用文字图片, 但要让搜索引擎容易知道图片内容, 同时在浏览器禁用图片时文字能显示出来, 能显示图片时文字也不能遮住文字图片(span临时大法下): <span style="width:150px;height:105px;overflow:hidden;border:1px solid red;"> <span>Google TM Checkout</span> <span style="margin-top:-16px;width:150px;height:105px;background: url(http://www.google.com/images/nav_logo3.png) no-repeat;"></span> </span> ===================================================================================== css2 selector pattern(Pattern //Meaning): * //Matches any element. E //Matches any E element (i.e., an element of type E). E F //Matches any F element that is a descendant of an E element. E>F //Matches any F element that is a child of an element E. E:first-child //Matches element E when E is the first child of its parent. E:link E:visited //Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active E:hover E:focus //Matches E during certain user actions. E:lang(c) //Matches element of type E if it is in (human) language c (the document language specifies how language is determined). E+F //Matches any F element immediately preceded by a sibling element E. E[foo] //Matches any E element with the "foo" attribute set (whatever the value). E[foo="warning"] //Matches any E element whose "foo" attribute value is exactly equal to "warning". E[foo~="warning"] //Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". E[lang|="en"] //Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". DIV.warning //Language specific. (In HTML, the same as DIV[class~="warning"].) E#myid //Matches any E element with ID equal to "myid". ===================================================================================== 在css文件里载入css文件, 以避免到页面里修改加载css: @import "mystyle.css"; ===================================================================================== css诡计, 利用border生成箭头: <style> .right_arrow {line-height:0px; border-top: 0.5em solid white; border-bottom: 0.5em solid white; border-left: 1em solid green; position:absolute; } </style> <span class="right_arrow"></span> 结合border实现折线可以实现流程图, 从最外画布<div style="position:relative;width:20em;height:20em"></div>, 统统用em来做距离单位, 变换字体的时候, 所有相对位置\折线\箭头都不会变形 ===================================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style>span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:hidden;cursor:default;}</style> <body style="font-size:100.1%;"> <span style="font-size:12px;width:2.25em;height:1.5em;border:1px solid red;">hello 中国</span> <span style="font-size:0.75em;width:36px;height:24px;border:1px solid red;">hello 中国</span> <span style="font-size:12px;width:36px;height:24px;border:1px solid red;">hello 中国</span> <span style="font-size:0.75em;width:2.25em;height:1.5em;border:1px solid red;">hello 中国</span> </body> a:px em, b:em px, c:px px, d:em em ie7调整字号时, 错位:0100 ie7缩放时, 错位:0000 firefox3缩放文本时, 错位:0110 firefox3缩放时, 错位:0000 firefox调整字号, 错位:0110 ie6调整字号时, 错位:0100 可见只有a和d效果是好的, 但可惜em是个相对单位(em是相对父元素字号比率, 百分数是相对父元素宽度比率), 对于布局来说需要一个全局单位(除非你整页只有一种字号, em才看起来像个全局单位), 最后仍然只有c比较好接受 ===================================================================================== 没有写doctype时ie下可用scrollbar-base-color:yellow;来指定滚动条颜色. 写了doctype时ie/firefox可用来关掉默认滚动条颜色(浅蓝滚动条与大部分默认灰色环境不搭调): <meta http-equiv="MSThemeCompatible" content="no"> ===================================================================================== 常用表格样式:<table border="1" cellspacing="0">是对所有格子生效的, 没有对应的style写法 =====================================================================================