CSS普遍11条技能与工作经验搜集

2021-01-20 21:18 jianzhan
1.怎样消除照片正下方出現几像素的空白空隙?

拷贝编码
编码以下:

方式1:
img{display:block;}
方式2:
img{vertical-align:top;}
备注:除top值,还能够设定为text-top
| middle | bottom | text-bottom,乃至特殊的<length>和<percentage>值都可以以
方式3:
#test{font-size:0;line-height:0;}
备注:#test为img的父元素

2.怎样让超连接浏览后和浏览前的色调不一样且浏览后仍保存hover和active实际效果?

拷贝编码
编码以下:

方式:
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
备注:按L-V-H-A的次序设定超连接款式便可,可速记为LoVe(喜爱)HAte(反感)

3.为何Standard mode下IE没法设定翻转条的色调?

拷贝编码
编码以下:

方式:
html{
scrollbar⑶dlight-color:#999;
scrollbar-darkshadow-color:#999;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eee;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ddd;
scrollbar-track-color:#eee;
scrollbar-base-color:#ddd;
}
备注:将原先设定在body上的翻转条色调款式界定到html标识挑选符上便可

4.怎样使文字外溢界限不换行强制性在1行内显示信息?

拷贝编码
编码以下:

方式:#test{width:150px;white-space:nowrap;}
备注:设定器皿的宽度和white-space为nowrap便可,其实际效果相近<nobr>标识

5.怎样使文字外溢界限显示信息为省略号?

拷贝编码
编码以下:

方式(此方式Firefox5.0尚不适用):
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
备注:最先需设定将文字强制性在1行内显示信息,随后将外溢的文字根据overflow:hidden断开,并以text-overflow:ellipsis方法将断开的文字显示信息为省略号。

6.怎样使持续的长标识符串全自动换行?

拷贝编码
编码以下:

方式:#test{width:150px;word-wrap:break-word;}
备注:word-wrap的break-word值容许单词内换行

7.怎样去掉超连接的虚线框?

拷贝编码
编码以下:

方式:a{outline:none;}
备注:IE7及更早访问器因为不适用outline特性,必须根据js的blur()方式来完成,如<a
onfocus="this.blur();"...

8.规范方式Standard mode和奇异方式Quirks mode下的盒实体模型差别?

拷贝编码
编码以下:

方式:
规范方式下:Element
width = width + padding + border
奇异方式下:Element
width = width
备注:有关材料请参考CSS3特性box-sizing

9.怎样在文字框中禁用汉语键入法?

拷贝编码
编码以下:

方式:input,textarea{ime-mode:disabled;}
备注:ime-mode为非规范特性,写该文本文档时仅有IE和Firefox适用

10.怎样让层在falsh上显示信息?

拷贝编码
编码以下:

方式:<param
name="wmode" value="transparent" />
备注:设定flash的wmode值为transparent或opaque

11.怎样设定IE下的iframe情况全透明?

拷贝编码
编码以下:

方式:
设定iframe元素的标识特性allowtransparency="allowtransparency"随后设定iframe內部网页页面的body情况色为transparent。但是由此会引起IE下1些其它难题,如:设定全透明后的iframe将不可以遮挡住select