| div 琛屽唴鏍峰紡style甯哥敤灞炴€? | 瑙傜湅婕旂ず | 聽 | 涓嬭浇婧愪唬鐮? |
銆?浣滆€咃細Nimitz 銆椼€?鍙戝竷鏃ユ湡锛?014-02-16 銆?
| 聽 |
| 涓€銆佸父鐢ㄥ睘鎬э細 1銆丠eight:璁剧疆DIV鐨勯珮搴︺€? 2銆乄idth:璁剧疆DIV鐨勫搴︺€? 渚嬶細 聽 <div style="width:200px;height:200px;"></div> 3銆乵argin:鐢ㄤ簬璁剧疆DIV鐨勫寤惰竟璺濓紝涔熷氨鏄埌鐖跺鍣ㄧ殑璺濈銆? 渚嬶細鐐瑰嚮鏌ョ湅鏁堟灉锛? <div style="width:300px;height:300px;"> 聽 <div style="margin:5px 10px 20px 30px;width:200px; height:200px;"> 聽聽</div> </div> 璇存槑锛歮argin:鍚庨潰璺熸湁鍥涗釜璺濈鍒嗗埆涓哄埌鐖跺鍣ㄧ殑涓?鍙?涓?宸﹁竟鐨勮窛绂伙紱鍙互鐪嬩緥瀛愪腑鐨勭櫧鑹睤IV鍒伴粦鑹睤IV鐨勮竟璺濈鏁堟灉銆傝繕鍙互鍒嗗埆璁剧疆杩欏洓涓竟鐨勮窛绂伙紝鐢ㄥ埌鐨勫睘鎬у涓嬶細 4銆乵argin-left:鍒扮埗瀹瑰櫒宸﹁竟妗嗙殑璺濈銆? 5銆乵argin-right:鍒扮埗瀹瑰櫒鍙宠竟妗嗙殑璺濈銆? 6銆乵argin-top: 鍒扮埗瀹瑰櫒涓婅竟妗嗙殑璺濈銆? 7銆乵argin-bottom:鍒扮埗瀹瑰櫒涓嬭竟妗嗙殑璺濈銆? 聽聽鍦ㄦ爣鍑嗙殑娴忚鍣ㄤ腑锛宐ox妯″瀷棣栧厛纭畾鐨勬槸content鐨勫搴﹀拰楂樺害锛岃€宮argin鍜宲adding涓嶄細褰卞搷content鐨勫搴﹀拰楂樺害鈥斺€斿鏋滃鍔爉agin鍜宲adding灏哄鍚庯紝content灏哄涓嶅彉鑰屾€荤殑box灏哄浼氬澶с€? 鍦↖E涓嵈鐩稿弽,澧炲姞margin鍜宲adding鐨勫昂瀵革紝鍒欎細鍑忓皬content鐨勫昂瀵革紝鑰宐ox灏哄涓嶅彉銆傚井杞伒寰殑閫昏緫鏄幇瀹炰笘鐣岀殑妗嗘灦涓嶅彉锛屽～鍏呭彉澶э紝鍒欓噷闈㈢殑鍥剧墖瓒婂皬銆? margin鍙犲姞锛? 杩欐槸涓€涓毦鐐?琛屽唴妗嗐€佹诞鍔ㄦ銆佺粷瀵瑰畾浣嶆margin涓嶄細鍙犲姞), 绠€鍗曠殑鎻忚堪姒傚康灏辨槸锛氫袱涓瀭鐩寸殑margin鐩搁亣锛屽垯浼氬悎骞舵垚涓€涓猰argin锛岃繖涓猰argin鐨勯珮搴︽槸鍓嶄袱涓珮搴﹀€煎ぇ鐨勩€? (1)銆佸厓绱犵殑椤惰竟鐣屼笌鍓嶉潰鍏冪礌鐨勫簳杈圭晫鍙戠敓鍙犲姞   8銆乸adding:鐢ㄤ簬璁剧疆DIV鐨勫唴杈硅窛銆? 渚嬶細鐐瑰嚮鏌ョ湅鏁堟灉锛? <div style="padding:5px 10px 20px 30px;width:300px;height:300px;"> 聽聽<div style="width:200px; height:200px;"></div> </div> 璇存槑锛歱adding鐨勬牸寮忓拰margin鐨勬牸寮忎竴鏍凤紝鍙互瀵圭収瀛︿範銆傚彲浠ョ湅榛戣壊DIV涓庣櫧鑹睤IV鐨勮竟璺濇潵浣撲細姝ゅ睘鎬х殑鏁堟灉銆傝繖鏄繕闇€瑕佹敞鎰忕殑鏄?padding璁剧疆鐨勮窛绂讳笉鍖呮嫭鍦ㄦ湰韬殑width鍜宧eight鍐?鍦↖E7鍜孎F涓?锛屾瘮濡備竴涓狣IV鐨剋idth璁剧疆浜?00px,鑰?padding-left璁剧疆浜?0px,閭ｄ箞杩欎釜DIV鍦ㄩ〉闈笂鏄剧ず鐨勫皢鏄?50px瀹姐€備篃鍙互鐢ㄤ互涓嬪洓涓睘鎬ф潵鍒嗗埆璁剧疆DIV鐨勫唴杈硅窛锛? 9銆乸adding-left:宸﹀唴杈硅窛銆? 10銆乸adding-right: 鍙冲唴杈硅窛銆? 11銆乸adding-top; 涓婂唴杈硅窛銆? 12銆乸adding-bottom: 涓嬪唴杈硅窛銆? <div style="padding-left:50px;padding-top:50px;width:150px;height:150px;"> 聽<div style="width:140px; height:140px;"> 聽</div> </div> 13銆乸osition:璁剧疆DIV鐨勫畾浣嶆柟寮忋€? 渚嬶細鐐瑰嚮鐪嬫晥鏋溿€? <html> 聽<head> 聽聽<meta charset="gbk"> 聽聽<title>div鏍峰紡2</title> 聽</head> <body> 聽<div style="width:200px; height:200px;"> 聽<div style="position:relative; top:10px;left:10px; width:140px; height:140px;"></div> 聽<div style="position:absolute; top:60px;left:60px; width:100px;height:100px;"></div> 聽<div style="position:fixed; top:210px;left:210px; width:100px;height:100px;"></div> </div> <div style="position:absolute; top:50px;left:50px; width:100px;height:100px;"></div> <div style="position:fixed; top:200px;left:200px; width:100px;height:100px;"> </div> <div style="position:static; top:200px;left:100px; width:100px;height:100px;"></div> </body> </html> 璇存槑锛歱osition鐨勫睘鎬т腑鏈塻tatic銆乫ixed銆乺elative銆?absolute鍥涗釜灞炴€с€傚父鐢╮elative鍜宎bsolute銆傝嫢鎸囧畾涓簊tatic鏃讹紝DIV閬靛惊HTML瑙勫垯锛涜嫢鎸囧畾涓簉elative鏃讹紝鍙?浠ョ敤top銆乴eft銆乺ight銆乥ottom鏉ヨ缃瓺IV鍦ㄩ〉闈腑鐨勫亸绉伙紝浣嗘槸姝ゆ椂涓嶅彲浣跨敤灞傦紱鑻ユ寚瀹氫负absolute鏃讹紝鍙互鐢╰op銆?left銆乺ight銆乥ottom瀵笵IV杩涜缁濆瀹氫綅锛涜嫢鎸囧畾涓篺ixed鏃讹紝鍦↖E7涓嶧F涓璂IV鐨勪綅缃浉瀵逛簬灞忓睆鍥哄畾涓嶅彉锛孖E6涓病鏈夋晥鏋?(鏈熷緟楂樻墜鎸囩偣鍘熷洜)锛? 14銆乴eft:璁剧疆瀵硅薄鐩稿浜庢枃妗ｅ眰娆′腑鏈€杩戜竴涓畾浣嶅璞＄殑宸﹁竟鐣岀殑浣嶇疆銆? 15銆乼op:璁剧疆瀵硅薄鐩稿浜庢枃妗ｅ眰娆′腑鏈€杩戜竴涓畾浣嶅璞＄殑涓婅竟鐣岀殑浣嶇疆銆? 16銆乺ight:璁剧疆瀵硅薄鐩稿浜庢枃妗ｅ眰娆′腑鏈€杩戜竴涓畾浣嶅璞＄殑鍙宠竟鐣岀殑浣嶇疆銆? 17銆乥ottom:璁剧疆瀵硅薄鐩稿浜庢枃妗ｅ眰娆′腑鏈€杩戜竴涓畾浣嶅璞＄殑涓嬭竟鐣岀殑浣嶇疆銆? 18銆亃-index:璁剧疆DIV鐨勫眰鍙犻『搴忋€? 渚嬶細鐐瑰嚮鐪嬫晥鏋溿€? <html><head><meta charset="gbk"> 聽<title>div鏍峰紡</title> </head> <body> <div style="position:absolute; top:50px;left:50px; width:100px; height:100px;"> </div> <div style="position:absolute; top:60px;left:60px; width:100px; height:100px;z-index:1;"> </div> <div style="position:absolute; top:70px;left:70px; width:100px;height:100px;"> </div> </body> </html> 璇存槑锛氫笂渚嬫晥鏋滀腑濡傛灉涓嶈z-index灞炴€ц摑鑹睤IV搴旇鍦ㄤ腑闂达紝鑰岀幇鍦ㄧ殑鏁堟灉钃濊壊鍦ㄦ渶涓婇潰浜嗐€傝繕瑕佽鏄庣殑鏄敤z-index灞炴€ф椂锛宲osition蹇呴渶瑕佹寚瀹氫负absolute鎵嶈銆? 19銆乫ont:鎸囧畾DIV涓枃鏈殑鏍峰紡锛屽叾鍚庡彲璺熸枃鏈殑澶氫釜鏍峰紡銆? 渚嬶細 聽<div style=" font:bold 14px 瀹嬩綋;background-color:Yellow"> 聽聽聽鏄庢湀鍑犳椂鏈夛紵鎶婇厭闂潚澶┿€備笉鐭ュぉ涓婂闃欍€佷粖澶曟槸浣曞勾锛熸垜娆蹭箻椋庡綊鍘伙紝鎯熸亹鐞兼ゼ鐜夊畤锛岄珮澶勪笉鑳滃瘨锛? 聽聽 璧疯垶寮勬竻褰憋紝浣曚技鍦ㄤ汉闂达紵 聽聽聽杞湵闃侊紝浣庣划鎴凤紝鐓ф棤鐪犮€備笉搴旀湁鎭ㄣ€佷綍浜嬮暱鍚戝埆鏃跺渾锛熶汉鏈夋偛娆㈢鍚堬紝鏈堟湁闃存櫞鍦嗙己锛屾浜嬪彜闅惧叏銆備絾鎰夸汉闀夸箙锛屽崈閲屽叡铦夊銆? 聽</div> 璇存槑锛歠ont鍚庡彲浠ヨ窡鏂囨湰鏍峰紡鐨勫涓睘鎬э紝濡傚瓧浣撶矖缁嗐€佸瓧浣撳ぇ灏忋€佷綍绉嶅瓧浣撶瓑绛夈€傝繕鍙互鐢ㄤ互涓嬪嚑涓睘鎬у垎鍒姞浠ヨ缃細 20銆乫ont-family:璁剧疆瑕佺敤鐨勫瓧浣撳悕绉帮紱 21銆乫ont-weight:鎸囧畾鏂囨湰鐨勭矖缁?鍏跺€兼湁bold bolder lighter绛夈€? 22銆乫ont-size:鎸囧畾鏂囨湰鐨勫ぇ灏忋€? 23銆乫ont-style:鎸囧畾鏂囨湰鏍峰紡锛屽叾鍊兼湁italic normal oblique绛夈€? 24銆乧olor:鎸囧畾鏂囨湰棰滆壊銆? 25銆乼ext-align:鎸囧畾鏂囨湰姘村钩瀵归綈鏂瑰紡锛屽叾鍊兼湁center(灞呬腑) left right justify銆? 26銆乼ext-decorator:鐢ㄤ簬鏂囨湰鐨勪慨楗般€傚叾鍊兼湁none underline overline line-through鍜宐link鐨勭粍鍚堛€? 聽聽聽聽(鍦↖E涓棤闂儊鏁堟灉锛孎F涓湁鏁堟灉銆傛湡寰呴珮鎵嬫寚鐐癸紝) 27銆乼ext-indent:璁剧疆鏂囨湰鐨勭缉杩涖€? 28銆乼ext-transform:璁剧疆鏂囨湰鐨勫瓧姣嶅ぇ灏忓啓銆傚叾鍊兼湁lowercase uppercase capitalize(棣栧瓧姣嶅ぇ鍐? none銆? 29銆乷verflow:鍐呭婧㈠嚭鎺у埗锛屽叾鍊兼湁: 聽 scroll(濮嬬粓鏄剧ず婊氬姩鏉?銆乿isible(涓嶆樉绀烘粴鍔ㄦ潯锛屼絾瓒呭嚭閮ㄥ垎鍙)銆乤uto(鍐呭瓒呭嚭鏃舵樉绀烘粴鍔ㄦ潯)銆乭idden(瓒呭嚭鏃堕殣钘忓唴瀹?銆? 30銆乨irection:鍐呭鐨勬祦鍚戙€傚叾鍊兼湁ltr(浠庡乏鑷冲彸)銆乺tl(浠庡彸鑷冲乏)銆? 31銆乴ine-height:鎸囧畾鏂囨湰鐨勮楂樸€? 32銆乄ord-spacing:瀛楅棿璺濄€? 渚嬶細 <html> 聽<head> 聽聽<meta charset="gbk"> 聽聽<title>div鏍峰紡</title> 聽</head> <body> <div style="font:16px 瀹嬩綋;width:600px;height:200px; word-spacing:5px; line-height:20px;direction:rtl; overflow:auto;background-color:Yellow"> 鏈堝嚑鏃舵湁锛熸妸閰掗棶闈掑ぉ銆備笉鐭ュぉ涓婂闃欍€佷粖澶曟槸浣曞勾锛熸垜娆蹭箻椋庡綊鍘伙紝鎯熸亹鐞兼ゼ鐜夊畤锛岄珮澶勪笉鑳滃瘨锛庤捣鑸炲紕娓呭奖锛屼綍浼煎湪浜洪棿锛熻浆鏈遍榿锛屼綆缁埛锛岀収鏃犵湢銆備笉搴旀湁鎭ㄣ€佷綍浜嬮暱鍚戝埆鏃跺渾锛熶汉鏈夋偛娆㈢鍚堬紝鏈堟湁闃存櫞鍦嗙己锛屾浜嬪彜闅惧叏銆備絾鎰夸汉闀夸箙锛屽崈閲屽叡铦夊銆?lt;br/> 鏈堝嚑鏃舵湁锛熸妸閰掗棶闈掑ぉ銆備笉鐭ュぉ涓婂闃欍€佷粖澶曟槸浣曞勾锛熸垜娆蹭箻椋庡綊鍘伙紝鎯熸亹鐞兼ゼ鐜夊畤锛岄珮澶勪笉鑳滃瘨锛庤捣鑸炲紕娓呭奖锛屼綍浼煎湪浜洪棿锛熻浆鏈遍榿锛屼綆缁埛锛岀収鏃犵湢銆備笉搴旀湁鎭ㄣ€佷綍浜嬮暱鍚戝埆鏃跺渾锛熶汉鏈夋偛娆㈢鍚堬紝鏈堟湁闃存櫞鍦嗙己锛屾浜嬪彜闅惧叏銆備絾鎰夸汉闀夸箙锛屽崈閲屽叡铦夊銆?lt;br/> 鏈堝嚑鏃舵湁锛熸妸閰掗棶闈掑ぉ銆備笉鐭ュぉ涓婂闃欍€佷粖澶曟槸浣曞勾锛熸垜娆蹭箻椋庡綊鍘伙紝鎯熸亹鐞兼ゼ鐜夊畤锛岄珮澶勪笉鑳滃瘨锛庤捣鑸炲紕娓呭奖锛屼綍浼煎湪浜洪棿锛熻浆鏈遍榿锛屼綆缁埛锛岀収鏃犵湢銆備笉搴旀湁鎭ㄣ€佷綍浜嬮暱鍚戝埆鏃跺渾锛熶汉鏈夋偛娆㈢鍚堬紝鏈堟湁闃存櫞鍦嗙己锛屾浜嬪彜闅惧叏銆備絾鎰夸汉闀夸箙锛屽崈閲屽叡铦夊銆?lt;br/> 鏈堝嚑鏃舵湁锛熸妸閰掗棶闈掑ぉ銆備笉鐭ュぉ涓婂闃欍€佷粖澶曟槸浣曞勾锛熸垜娆蹭箻椋庡綊鍘伙紝鎯熸亹鐞兼ゼ鐜夊畤锛岄珮澶勪笉鑳滃瘨锛庤捣鑸炲紕娓呭奖锛屼綍浼煎湪浜洪棿锛熻浆鏈遍榿锛屼綆缁埛锛岀収鏃犵湢銆備笉搴旀湁鎭ㄣ€佷綍浜嬮暱鍚戝埆鏃跺渾锛熶汉鏈夋偛娆㈢鍚堬紝鏈堟湁闃存櫞鍦嗙己锛屾浜嬪彜闅惧叏銆備絾鎰夸汉闀夸箙锛屽崈閲屽叡铦夊銆? </div> </body> </html> 33銆乥order:璁剧疆DIV鐨勮竟妗嗘牱寮忋€? 渚嬶細聽鐐瑰嚮鐪嬫晥鏋溿€? <div style="border:dotted 2px black; width:100px;height:100px;"></div> 璇存槑锛歜order鍚庤窡杈规鐨勬牱寮忋€佸搴︺€侀鑹茬瓑灞炴€с€傝繕鍙互鐢ㄤ互涓嬪睘鎬у垎鍒缃€? 34銆乥order-width:璁剧疆杈规鐨勫搴︺€? 35銆乥order-color锛氳缃竟妗嗙殑棰滆壊銆? 36銆乥order-style:璁剧疆杈规鐨勬牱寮忋€? 渚嬶細鐐瑰嚮鐪嬫晥鏋溿€? <html><head><meta charset="gbk">聽 聽聽<title>div鏍峰紡</title> 聽</head> <body> 聽<label style="font-size:14px;">閫夋嫨鏍峰紡锛?lt;/label> 聽<select id="bstyle" 聽聽聽 慰nchange="document.getElementById('tdd').style.borderStyle=this.options[this.selectedIndex].text;"> 聽聽<option selected="selected">none</option> 聽聽<option>dashed</option> 聽聽<option>dotted</option> 聽聽<option>groove</option> 聽聽<option>hidden</option> 聽聽<option>inset</option> 聽聽<option>outset</option> 聽聽<option>ridge</option> 聽聽<option>double</option> 聽聽<option>solid</option> 聽</select> 聽<div id="tdd" style="border-style:none; border-width:5px; border-color:Black; 聽聽聽聽 width:100px;height:100px;background-color:Yellow;"> </div> </body> </html> 璇存槑锛歜order鏄鍥涗釜杈规鍚屾椂杩涜璁剧疆銆備篃鍙互鍗曠嫭瀵规煇涓€杈规垨鍑犱釜杈硅繘琛岃缃紝姝ゆ椂鐢ㄤ互涓嬪睘鎬э細 border-top:璁剧疆涓婅竟妗嗘牱寮忋€? 37銆乥order-bottom:璁剧疆涓嬭竟妗嗘牱寮忋€? 38銆乥order-left:璁剧疆宸﹁竟妗嗘牱寮忋€? 39銆乥order-right:璁剧疆鍙宠竟妗嗘牱寮忋€? 璇存槑锛氭煇涓€杈规鐨勬煇涓€鏍峰紡涔熷彲鍗曠嫭璁剧疆锛屼互涓婅竟妗嗕负渚嬪彲浠ョ敤锛歜order-top-style銆乥order-top-width銆乥order-top-color鏉ュ垎鍒缃紝鐢变簬浣跨敤鍚刡order鐩稿悓锛屾墍浠ヤ笉鍦ㄤ妇渚嬭鏄庛€? 40銆乨isplay:璁剧疆鏄剧ず灞炴€с€傚叾鍊兼湁block銆乶one銆? 41銆乫loat:璁剧疆DIV鍦ㄩ〉闈笂鐨勬祦鍚戯紝鍏跺€兼湁left(闈犲乏鏄剧ず)銆乺ight(闈犲彸鏄剧ず)銆乶one銆? 50銆乥ackground:璁剧疆DIV鐨勮儗鏅牱寮忋€? 渚嬶細 聽<div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll;overflow:auto"> 聽聽聽<div style="width:2px;height:1000px;"></div> 聽</div> 璇存槑锛歜ackground鍚庡彲鐩存帴璺熻儗鏅殑棰滆壊銆佽儗鏅浘鐗囥€佸钩閾烘柟寮忕瓑鏍峰紡銆備篃鍙互鐢ㄤ互涓嬪睘鎬у垎鍒缃€? 51銆乥ackground-color:璁剧疆鑳屾櫙棰滆壊銆? 52銆乥ackground-attachment:鑳屾櫙鍥惧儚鐨勯檮鍔犳柟寮忥紝鍏跺€兼湁scroll銆乫ixed銆? 53銆乥ackground-image:鎸囧畾浣挎湁鐨勮儗鏅浘鐗囥€? 54銆乥ackground-repeat:鑳屾櫙鍥捐薄鐨勫钩閾烘柟寮忋€傚叾鍊兼湁no-repeat(涓嶅钩閾?銆乺epeat(涓や釜鏂瑰悜骞抽摵)銆乺epeat-x(姘村钩鏂瑰悜骞抽摵)銆乺epeat-y(鍨傜洿鏂瑰悜骞抽摵)銆? 55銆乥ackground-position:鍦―IV涓畾浣嶈儗鏅綅缃€傚叾鍊兼湁top bottom left right鐨勪笉鍚岀粍鍚堛€備篃鍙互浠ョ敤鍧愭爣鎸囧畾鍏蜂綋鐨勪綅缃€? 渚嬶細 <div style="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; 聽聽background-attachment:scroll; width:600px;height:200px;"> </div> 浜屻€佷竴浜涚壒娈婃晥鏋滐細 1銆乧ursor:璁剧疆DIV涓婂厜鏍囩殑鏍峰紡銆? 2銆乧lip:璁剧疆鍓緫鐭╁舰銆? 渚嬶細 聽聽 <div style="font:16px 瀹嬩綋;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute">div鏍峰紡娴嬪紡how areyou.</div> 璇存槑锛歝lip:rect(top right bottom left);璁剧疆涓婁笅宸﹀彸鐨勮窛绂?浣嗘鏃惰鎶妏osition鎸囧畾涓篴bsolute銆傜湅浠ヤ笂鏁堟灉銆? 3銆乫ilter:婊ら暅鏁堟灉銆? 渚? 聽<div style="width:450px;height:200px;"> 聽聽<div id=鈥漷div鈥?style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;float:left; 聽聽聽聽 width:200px;height:200px;"> 聽聽</div> 聽聽<div style=" width:200px;height:200px;float:left;"></div> 聽</div> 璇存槑锛氳缃€忔槑搴?opacity锛歷alue (FF涓撶敤,value鐨勫彇鍊间负0鑷?涔嬮棿鐨勫皬鏁?锛宖ilter:alpha(opacity=value)(IE涓撶敤锛寁alue鍙栧€硷細0鑷?00)銆? 濡傛灉瑕佹湁JavaScript鏀瑰彉DIV鐨勯€忔槑搴﹀彲鐢ㄤ笅闈㈢殑鏂规硶锛? FF涓細document.getElementById('tdiv').style.opacity='0.9'; IE涓細document.getElementById('tdiv').style.filter='alpha(opacity=90)'; |
杞浇浜?https://www.cnblogs.com/shsgl/p/5212063.html