ûÏëµ½µÄ¡¢²»³£ÓõÄÈý¸öcssÊôÐÔ£¡
×÷Õߣºtinyhill¡¡À´×Ô£ºÀ¶É«ÀíÏë ¶Ô ¡¶5 ¸ö¼òµ¥ÊµÓÃµÄ CSS ÊôÐÔ¡·½øÐбà¼
1¡¢CSS Clip
¼ô¼ (clip) ÊôÐÔ¾ÍÏñÒ»¸öÃæ¾ß¡£ËüÔÊÐíÄãʹÓþØÐÎÑÚ¸ÇÒ³ÃæÔªËØµÄÄÚÈÝ¡£Òª¼ô¼Ò»¸öÔªËØ£ºÄã±ØÐëÖ¸¶¨Æä position ÊôÐÔΪ absolute£¬È»ºóÖ¸¶¨Ïà¶ÔÓÚÔªËØµÄ top£¬right£¬bottom£¬left Öµ¡£
ͼƬ¼ô¼ÊµÀý£¨ÑÝʾ£©
ÒÔÏÂʾÀýÑÝʾÁËÈçºÎʹÓà clip ÊôÐÔÑÚ¸ÇÒ»ÕÅͼƬ¡£Ê×ÏÈ£¬Ö¸¶¨ <div> ÔªËØÎª position:relative£¬È»ºóÖ¸¶¨ <img> ÔªËØÎª position:absolute£¬²¢ÇÒ¸ù¾Ýʵ¼ÊÐèÒªÉ趨 rect Öµ¡£
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
ͼÏñµ÷Õû³ß´çºÍ¼ô¼£¨ÑÝʾ£©
ÔÚÕâ¸öʾÀýÖУ¬ÎÒ½«Õ¹Ê¾ÈçºÎµ÷ÕûͼÏñ³ß´çºÍ¼ô¼Í¼Æ¬¡£ËزÄͼƬÊǾØÐεģ¬ÎÒÏ뽫ÆäÏ÷¼õÖÁ 50£¥ µÄ³ß´ç£¬ÓÃÀ´´´½¨Ò»¸öÕý·½ÐθñʽµÄËõÂÔͼ¡£Òò´Ë£¬ÎÒÓÿí¶ÈºÍ¸ß¶ÈÊôÐÔÀ´µ÷ÕûͼÏñ£¬²¢Ê¹Óà clip ¼ô¼ÊôÐÔÓèÒÔÑڸǡ£È»ºóÓà left ÊôÐÔ½«Í¼Æ¬ÒÆ¿ª×ó²à 15px µÄ¾àÀë¡£
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}
2¡¢White-space£¨ÑÝʾ£©
white-space ÊôÐÔÖ¸¶¨ÁËÔªËØÖпհ׵Ĵ¦Àí·½Ê½¡£±ÈÈ磬ָ¶¨ white-space:nowrap »á×èÖ¹Îı¾×Ô¶¯»»ÐС£
em {
white-space: nowrap;
}
3¡¢Cursor£¨ÑÝʾ£©
Èç¹ûÄã¸Ä±äÁ˰´Å¥µÄÐÐΪ£¬ÆäÖ¸ÕëÒ²Ó¦¸ÃËæÖ®¸Ä±ä¡£±ÈÈ磬µ±Ò»¸ö°´Å¥²»¿ÉÓÃʱ£¬Ö¸ÕëÓ¦¸Ã¸Ä±äΪĬÈϵļýÍ·£¬À´±íÃ÷Ëü²»¿Éµã»÷¡£Òò´Ë£¬cursor ÊôÐÔÔÚ¿ª·¢ Web Ó¦ÓóÌÐòʱÏ൱ÓÐÓá£
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}
Ïà¹ØÎĵµ£º
Ϊµ¥¸ö±êÇ©¶¨Ò壺
br{
text-align: center;
color: #000000;
font-family:ËÎÌå;
}
Ϊbr±êǩָ¶¨ÁË3¸öÑùʽÊôÐÔ£¬°üº¬¶ÔÆä·½Ê½¡¢ÎÄ×ÖÑÕÉ«¼°×ÖÌå¡£
ÔÚÍøÒ³ÖÐÒ»¸öÿ¸öIDÖ»ÄÜʹÓÃÒ»´Î£¬È磺
<div id="main"></div>
ÔÚCSSÑùʽ±íÖУ¬IDÑ ......
Internet Explorer 8Ô¤ÉèÊÇÒÔCSS 2.1Ϊ±ê×¼£¬²¢ÐÞÕýÁËÐí¶àInternet Explorer 7µÄCSS Bug£¬ÕâÒâζ×ÅÓÐÒ»²¿·ÝÒÔÍùÒÀ¾ÝIE 7ËùÉè¼ÆµÄÍøÒ³£¬
ÔÚIE 8ÉϵijÊÏÖ»áÓÐËù³öÈ룬ËùÐÒ°ÝIE 7ÏàÈݼìÊÓ¹¦ÄÜËù´Í£¬Ä¿Ç°ÒòʹÓÃIE 8¶øµ¼Ö°æÃæ´íÎóµÄÍøÕ¾²¢²»¶à¡£
µ«Ò»ÖµÒÀÀµIE 7ÏàÈݼìÊÓ¹¦Äܲ¢·Ç³¤¾ÃÖ®¼Æ£¬¾¡Ôç½«ÍøÕ¾ÐÞ¸ÄΪIE 8ÏàÈݲÅÊdz¤¾Ã ......
Block element ¿é¼¶ÔªËØ
¹ËÃû˼Òå¾ÍÊÇÒÔ¿éÏÔʾµÄÔªËØ£¬¸ß¶È¿í¶È¶¼ÊÇ¿ÉÒÔÉèÖõġ£±ÈÈçÎÒÃdz£ÓõÄ<div>¡¢<p>¡¢<ul>ĬÈÏ״̬϶¼ÊÇÊôÓÚ¿é¼¶ÔªËØ¡£¿é¼¶ÔªËرȽϰԵÀ£¬Ä¬ÈÏ״̬ÏÂÿ´Î¶¼Õ¼¾ÝÒ»Õû¸öÐУ¬ºóÃæµÄÄÚÈÝÒ²±ØÐëÔÙÐÂÆðÒ»ÐÐÏÔʾ¡£µ±È»·Ç¿é¼¶ÔªËØÒ²¿ÉÒÔͨ¹ýcssµÄdisplay:block;½«Æä¸ü¸Ä³É¿é¼¶ÔªËØ¡£´ËÍâ» ......
Ò»¡¢ ÉÆÓÃcssËõд¹æÔò
/*×¢ÒâÉÏ¡¢ÓÒ¡¢Ï¡¢×óµÄÊéд˳Ðò*/
1. ¹ØÓڱ߾ࣨ4±ß£©£º
1px 2px 3px 4px (ÉÏ¡¢ÓÒ¡¢Ï¡¢×ó)
1px 2px 3px £¨Ê¡ÂÔµÄ×óµÈÓÚÓÒ£©
1px 2px (Ê¡ÂÔµÄÉϵÈÓÚÏÂ)
1px & ......
×¢£º"elm"´ú±íij¸öDOMÔªËØ£¬"xxx"´ú±íij¸öCSSÊôÐÔ
Ò»¡¢elm.style.xxx Ö»ÄÜ»ñÈ¡ÄÚÁªÑùʽÀïµÄÖµ
ÒªÏë»ñµÃÕýÈ·µÄcssÖµ£º
IE£ºelm.currentStyle[xxx]
W3C±ê×¼£ºdocument.defaultView.getComputedStyle(elm,"")[xxx]
×¢Ò⣺ÓÃIE·½·¨·µ»ØÖµ¿ÉÄܲ»ÊÇÊý×Ö£¬¶øÊÇauto£»ÓÃw3cµÄ·½·¨×ÜÊǻ᷵»ØÊý×Ö+µ¥Î»
Èý¡¢offsetLeft
......