DIYism schooner能逆风行驶的纵帆船是生命的极好象征,贝努利效应正是化逆为顺的经典!--呆仁 收藏本站 涂鸦本站 来信本站 跟我MSN 跟我QQ GTalk 思想农业天文生物文化饮食娱乐硬件健康语言心理网络物理政治个人编程软件工具 php学习笔记
javascript学习笔记
flash学习笔记
css学习笔记
xsl学习笔记
sql学习笔记
ubuntu安装配置
centos安装配置
damnsmall安装配置
python学习笔记
呓语录
(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, 是因为这样写可以过滤空格不过滤&nbsp;)
(既没有父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, "&lt;").replace(/>/g, "&gt;");
         }
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 = /<&#8203;\/*[&#8203;_\s="'\w]+>/g;
                                               var txt = elem.innerHTML;
                                               var chars = txt.split('');
                                               var newTxt = chars.join('&#8203;');
                                               newTxt = newTxt.replace(exp, reconstructTag);
                                               elem.innerHTML = newTxt;
                                              },
                                      false
                                     );
                function reconstructTag(_tag)
                         {return _tag.replace(/&#8203;/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="个性化首页">&nbsp;<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写法
=====================================================================================

  您的网址:(可能:)呆元:2385年04月19日(17-05-23)访客总人次:433220(自k5a1)  
Copyleft 2364-2378 DIYism
Powered by Ubuntu Server & ZPC-GX
全民备TOR 安全上网