CSS甯冨眬妯″瀷

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS甯冨眬妯″瀷相关的知识，希望对你有一定的参考价值。

鏍囩锛?/p>

涓€銆佹祦鍔ㄦā鍨?/span>

浜?娴姩妯″瀷

銆€銆€鍧楃姸鍏冪礌杩欎箞闇搁亾閮芥槸鐙崰涓€琛岋紝濡傛灉鐜板湪鎴戜滑鎯宠涓や釜鍧楃姸鍏冪礌骞舵帓鏄剧ず锛屾€庝箞鍔炲憿锛熶笉瑕佺潃鎬ワ紝璁剧疆鍏冪礌娴姩灏卞彲浠ュ疄鐜拌繖涓€鎰挎湜銆?/span>

銆€銆€浠讳綍鍏冪礌鍦ㄩ粯璁ゆ儏鍐典笅鏄笉鑳芥诞鍔ㄧ殑锛屼絾鍙互鐢?CSS 瀹氫箟涓烘诞鍔紝濡?div銆乸銆乼able銆乮mg 绛夊厓绱犻兘鍙互琚畾涔変负娴姩銆傚涓嬩唬鐮佸彲浠ュ疄鐜颁袱涓?div 鍏冪礌涓€琛屾樉绀恒€?/span>

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>銆€

銆€銆€鏁堟灉鍥?/span>

鎶€鏈垎浜? style=

銆€銆€褰撶劧浣犱篃鍙互鍚屾椂璁剧疆涓や釜鍏冪礌鍙虫诞鍔ㄤ篃鍙互瀹炵幇涓€琛屾樉绀恒€?/span>

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}銆€

銆€銆€鏁堟灉鍥?/span>

鎶€鏈垎浜? style=

銆€銆€鍙堟湁灏忎紮浼撮棶浜嗭紝璁剧疆涓や釜鍏冪礌涓€宸︿竴鍙冲彲浠ュ疄鐜颁竴琛屾樉绀哄悧锛熷綋鐒跺彲浠ワ細

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}銆€

銆€銆€鏁堟灉鍥?/span>

鎶€鏈垎浜? style=

 涓夈€佸眰妯″瀷

銆€銆€浠€涔堟槸灞傚竷灞€妯″瀷锛熷眰甯冨眬妯″瀷灏卞儚鏄浘鍍忚蒋浠禤hotoShop涓潪甯告祦琛岀殑鍥惧眰缂栬緫鍔熻兘涓€鏍凤紝姣忎釜鍥惧眰鑳藉绮剧‘瀹氫綅鎿嶄綔锛屼絾鍦ㄧ綉椤佃璁￠鍩燂紝鐢变簬缃戦〉澶у皬鐨勬椿鍔ㄦ€э紝灞傚竷灞€娌¤兘鍙楀埌鐑崸銆備絾鏄湪缃戦〉涓婂眬閮ㄤ娇鐢ㄥ眰甯冨眬杩樻槸鏈夊叾鏂逛究涔嬪鐨勩€備笅闈㈡垜浠潵瀛︿範涓€涓媓tml涓殑灞傚竷灞€銆?/span>

銆€銆€濡備綍璁﹉tml鍏冪礌鍦ㄧ綉椤典腑绮剧‘瀹氫綅锛屽氨鍍忓浘鍍忚蒋浠禤hotoShop涓殑鍥惧眰涓€鏍峰彲浠ュ姣忎釜鍥惧眰鑳藉绮剧‘瀹氫綅鎿嶄綔銆侰SS瀹氫箟浜嗕竴缁勫畾浣嶏紙positioning锛夊睘鎬ф潵鏀寔灞傚竷灞€妯″瀷銆?/span>

銆€銆€灞傛ā鍨嬫湁涓夌褰㈠紡锛?/span>

銆€銆€1銆?strong>缁濆瀹氫綅(position: absolute)

銆€銆€2銆?strong>鐩稿瀹氫綅(position: relative)

銆€銆€3銆?strong>鍥哄畾瀹氫綅(position: fixed)

銆€銆€3.1 缁濆瀹氫綅

銆€銆€濡傛灉鎯充负鍏冪礌璁剧疆灞傛ā鍨嬩腑鐨勭粷瀵瑰畾浣嶏紝闇€瑕佽缃?strong>position:absolute(琛ㄧず缁濆瀹氫綅)锛岃繖鏉¤鍙ョ殑浣滅敤灏嗗厓绱犱粠鏂囨。娴佷腑鎷栧嚭鏉ワ紝鐒跺悗浣跨敤left銆乺ight銆乼op銆乥ottom灞炴€х浉瀵逛簬鍏舵渶鎺ヨ繎鐨勪竴涓叿鏈夊畾浣嶅睘鎬х殑鐖跺寘鍚潡杩涜缁濆瀹氫綅銆傚鏋滀笉瀛樺湪杩欐牱鐨勫寘鍚潡锛屽垯鐩稿浜巄ody鍏冪礌锛屽嵆鐩稿浜?strong>娴忚鍣ㄧ獥鍙?/strong>銆?/span>

銆€銆€濡備笅闈唬鐮佸彲浠ュ疄鐜癲iv鍏冪礌鐩稿浜庢祻瑙堝櫒绐楀彛鍚戝彸绉诲姩100px锛屽悜涓嬬Щ鍔?0px銆?/span>

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

銆€銆€鏁堟灉濡備笅锛?/span>

鎶€鏈垎浜? style=

銆€銆€鎴戞潵璇曚竴璇?璁剧疆div鏍囩鐩稿浜庢祻瑙堝櫒锛岋紙鐩稿浜庝互鍓嶄綅缃?strong>鍙充笂瑙?/strong>锛夊悜宸︾Щ鍔?00璞＄礌锛屽悜涓嬬Щ鍔?0璞＄礌銆?/span>

銆€銆€鏁堟灉鍥惧涓嬶細

鎶€鏈垎浜? style=

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute鏍峰紡</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    right:100px;
    top:20px;
    
    
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

銆€銆€3.2 鐩稿瀹氫綅

銆€銆€濡傛灉鎯充负鍏冪礌璁剧疆灞傛ā鍨嬩腑鐨勭浉瀵瑰畾浣嶏紝闇€瑕佽缃畃osition:relative锛堣〃绀虹浉瀵瑰畾浣嶏級锛屽畠閫氳繃left銆乺ight銆乼op銆乥ottom灞炴€х‘瀹氬厓绱犲湪姝ｅ父鏂囨。娴佷腑鐨勫亸绉讳綅缃€傜浉瀵瑰畾浣嶅畬鎴愮殑杩囩▼鏄鍏堟寜static(float)鏂瑰紡鐢熸垚涓€涓厓绱?骞朵笖鍏冪礌鍍忓眰涓€鏍锋诞鍔ㄤ簡璧锋潵)锛岀劧鍚庣浉瀵逛簬浠ュ墠鐨勪綅缃Щ鍔紝绉诲姩鐨勬柟鍚戝拰骞呭害鐢眑eft銆乺ight銆乼op銆乥ottom灞炴€х‘瀹氾紝鍋忕Щ鍓嶇殑浣嶇疆淇濈暀涓嶅姩銆?/span>

銆€銆€濡備笅浠ｇ爜瀹炵幇鐩稿浜庝互鍓嶄綅缃悜涓嬬Щ鍔?0px锛屽悜鍙崇Щ鍔?00px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>銆€

銆€銆€鏁堟灉鍥撅細

鎶€鏈垎浜? style=

銆€銆€浠€涔堝彨鍋?ldquo;鍋忕Щ鍓嶇殑浣嶇疆淇濈暀涓嶅姩”鍛紵

銆€銆€澶у鍙互鍋氫竴涓疄楠岋紝鍦ㄥ彸渚т唬鐮佺紪杈戝櫒鐨?9琛宒iv鏍囩鐨勫悗闈㈠姞鍏ヤ竴涓猻pan鏍囩锛屽湪鏍囧苟鍦╯pan鏍囩涓啓鍏ヤ竴浜涙枃瀛椼€傚涓嬩唬鐮侊細

<body>
    <div id="div1"></div><span>鍋忕Щ鍓嶇殑浣嶇疆杩樹繚鐣欎笉鍔紝瑕嗙洊涓嶄簡鍓嶉潰鐨刣iv娌℃湁鍋忕Щ鍓嶇殑浣嶇疆</span>
</body>

銆€銆€鏁堟灉鍥撅細

鎶€鏈垎浜? style=

銆€銆€浠庢晥鏋滃浘涓彲浠ユ槑鏄剧殑鐪嬪嚭锛岃櫧鐒禿iv鍏冪礌鐩稿浜庝互鍓嶇殑浣嶇疆浜х敓浜嗗亸绉伙紝浣嗘槸div鍏冪礌浠ュ墠鐨勪綅缃繕鏄繚鐣欑潃锛屾墍浠ュ悗闈㈢殑span鍏冪礌鏄樉绀哄湪浜哾iv鍏冪礌浠ュ墠浣嶇疆鐨勫悗闈€?/span>

銆€銆€3.3 鍥哄畾瀹氫綅

銆€銆€fixed锛氳〃绀哄浐瀹氬畾浣嶏紝涓巃bsolute瀹氫綅绫诲瀷绫讳技锛屼絾瀹冪殑鐩稿绉诲姩鐨勫潗鏍囨槸瑙嗗浘锛?strong>灞忓箷鍐呯殑缃戦〉绐楀彛锛夋湰韬€傜敱浜庤鍥炬湰韬槸鍥哄畾鐨勶紝瀹冧笉浼氶殢娴忚鍣ㄧ獥鍙ｇ殑婊氬姩鏉℃粴鍔ㄨ€屽彉鍖栵紝闄ら潪浣犲湪灞忓箷涓Щ鍔ㄦ祻瑙堝櫒绐楀彛鐨勫睆骞曚綅缃紝鎴栨敼鍙樻祻瑙堝櫒绐楀彛鐨勬樉绀哄ぇ灏忥紝鍥犳鍥哄畾瀹氫綅鐨勫厓绱犱細濮嬬粓浣嶄簬娴忚鍣ㄧ獥鍙ｅ唴瑙嗗浘鐨勬煇涓綅缃紝涓嶄細鍙楁枃妗ｆ祦鍔ㄥ奖鍝嶏紝杩欎笌background-attachment:fixed?灞炴€у姛鑳界浉鍚屻€備互涓嬩唬鐮佸彲浠ュ疄鐜扮浉瀵逛簬娴忚鍣ㄨ鍥?/strong>鍚戝彸绉诲姩100px锛屽悜涓嬬Щ鍔?0px銆傚苟涓旀嫋鍔ㄦ粴鍔ㄦ潯鏃朵綅缃浐瀹氫笉鍙樸€?/span>

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰鏂囨湰銆?lt;/p>
....

銆€銆€3.4 Relative鍜孉bsolute缁勫悎

銆€銆€浣跨敤position:absolute鍙互瀹炵幇琚缃厓绱犵浉瀵逛簬娴忚鍣紙body锛夎缃畾浣嶄互鍚庯紝澶у鏈夋病鏈夋兂杩囧彲涓嶅彲浠ョ浉瀵逛簬鍏跺畠鍏冪礌杩涜瀹氫綅鍛紵绛旀鏄偗瀹氱殑锛屽綋鐒跺彲浠ャ€備娇鐢╬osition:relative鏉ュ府蹇欙紝浣嗘槸蹇呴』閬靛畧涓嬮潰瑙勮寖锛?/span>

銆€銆€1銆佸弬鐓у畾浣嶇殑鍏冪礌蹇呴』鏄浉瀵瑰畾浣嶅厓绱犵殑鍓嶈緢鍏冪礌锛?/span>

<div id="box1"><!--鍙傜収瀹氫綅鐨勫厓绱?->
    <div id="box2">鐩稿鍙傜収鍏冪礌杩涜瀹氫綅</div><!--鐩稿瀹氫綅鍏冪礌-->
</div>

銆€銆€浠庝笂闈唬鐮佸彲浠ョ湅鍑篵ox1鏄痓ox2鐨勭埗鍏冪礌锛堢埗鍏冪礌褰撶劧涔熸槸鍓嶈緢鍏冪礌浜嗭級銆?/span>

銆€銆€2銆佸弬鐓у畾浣嶇殑鍏冪礌蹇呴』鍔犲叆position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}銆€

銆€銆€3銆佸畾浣嶅厓绱犲姞鍏osition:absolute锛屼究鍙互浣跨敤top銆乥ottom銆乴eft銆乺ight鏉ヨ繘琛屽亸绉诲畾浣嶄簡銆?/span>

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}銆€

銆€銆€杩欐牱box2灏卞彲浠ョ浉瀵逛簬鐖跺厓绱燽ox1瀹氫綅浜嗭紙杩欓噷娉ㄦ剰鍙傜収鐗╁氨鍙互涓嶆槸娴忚鍣ㄤ簡锛岃€屽彲浠ヨ嚜鐢辫缃簡锛夈€?/span>

銆€銆€鎴戜篃鏉ヨ瘯涓€璇曪細鎴戜滑鎶婂彸渚т换鍔″尯涓殑box4褰撳仛鏄浘鐗囩殑璁茶В鏂囨湰銆?/span>

銆€銆€鍏蜂綋瑕佹眰锛?/span>

銆€銆€1銆佹妸box4瀹氫綅鍒板浘鐗?box3)鐨勫簳閮ㄣ€?/span>

銆€銆€鏁堟灉鍥惧涓嬶細

鎶€鏈垎浜? style=

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鐩稿鍙傜収鍏冪礌杩涜瀹氫綅</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;
          
}
#box2{
     position:absolute;
    top:20px;
    left:30px;
          
}
/*涓嬮潰鏄换鍔￠儴鍒?/span>*/
#box3{
    width:200px;
    height:200px;
    position:relative;  
}
#box4{
    width:99%;
     position:absolute;    
    bottom:0px;
    
}
</style>
</head>

<body>
<div id="box1">
    <div id="box2">鐩稿鍙傜収鍏冪礌杩涜瀹氫綅</div>
</div>

<h1>涓嬮潰鏄换鍔￠儴鍒?span style="color: #0000ff;"></h1>
<div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">褰撴垜杩樻槸涓夊勾绾х殑瀛︾敓鏃舵槸涓€涓缇炵殑灏忓コ鐢熴€?span style="color: #0000ff;"></div>
</div>
</body>
</html>

 鍥涖€丆SS浠ｇ爜缂╁啓

銆€銆€4.1 鐩掓ā鍨嬩唬鐮佺缉鍐?/span>

銆€銆€杩樿寰楀湪璁茬洅妯″瀷鏃跺杈硅窛(margin)銆佸唴杈硅窛(padding)鍜岃竟妗?border)璁剧疆涓婁笅宸﹀彸鍥涗釜鏂瑰悜鐨勮竟璺濇槸鎸夌収椤烘椂閽堟柟鍚戣缃殑锛氫笂鍙充笅宸︺€傚叿浣撳簲鐢ㄥ湪margin鍜宲adding鐨勪緥瀛愬涓嬶細

margin:10px 15px 12px 14px;/*涓婅缃负10px銆佸彸璁剧疆涓?5px銆佷笅璁剧疆涓?2px銆佸乏璁剧疆涓?4px*/

銆€銆€閫氬父鏈変笅闈笁绉嶇缉鍐欐柟娉?

銆€銆€1銆佸鏋渢op銆乺ight銆乥ottom銆乴eft鐨勫€肩浉鍚岋紝濡備笅闈唬鐮侊細

margin:10px 10px 10px 10px;

銆€銆€鍙缉鍐欎负锛?/span>

margin:10px;

銆€銆€2銆佸鏋渢op鍜宐ottom鍊肩浉鍚屻€乴eft鍜?right鐨勫€肩浉鍚岋紝濡備笅闈唬鐮侊細

margin:10px 20px 10px 20px;

銆€銆€鍙缉鍐欎负锛?/span>

margin:10px 20px;

銆€銆€3銆佸鏋渓eft鍜宺ight鐨勫€肩浉鍚岋紝濡備笅闈唬鐮侊細

margin:10px 20px 30px 20px;

銆€銆€鍙缉鍐欎负锛?/span>

margin:10px 20px 30px;

銆€銆€娉ㄦ剰锛歱adding銆乥order鐨勭缉鍐欐柟娉曞拰margin鏄竴鑷寸殑銆?/span>

銆€銆€4.2 棰滆壊缂╁啓

銆€銆€鍏充簬棰滆壊鐨刢ss鏍峰紡涔熸槸鍙互缂╁啓鐨勶紝褰撲綘璁剧疆鐨勯鑹叉槸16杩涘埗鐨勮壊褰╁€兼椂锛屽鏋滄瘡涓や綅鐨勫€肩浉鍚岋紝鍙互缂╁啓涓€鍗娿€?/span>

銆€銆€渚嬪瓙1锛?/span>

p{color:#000000;}

銆€銆€鍙互缂╁啓涓猴細

p{color: #000;}

銆€銆€渚嬪瓙2锛?/span>

p{color: #336699;}

銆€銆€鍙互缂╁啓涓猴細

p{color: #369;}

銆€銆€4.3 瀛椾綋缂╁啓

銆€銆€缃戦〉涓殑瀛椾綋css鏍峰紡浠ｇ爜涔熸湁浠栬嚜宸辩殑缂╁啓鏂瑰紡锛屼笅闈㈡槸缁欑綉椤佃缃瓧浣撶殑浠ｇ爜锛?/span>

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"瀹嬩綋",sans-serif;
}

銆€銆€杩欎箞澶氳鐨勪唬鐮佸叾瀹炲彲浠ョ缉鍐欎负涓€鍙ワ細

body{
    font:italic  small-caps  bold  12px/1.5em  "瀹嬩綋",sans-serif;
}

銆€銆€娉ㄦ剰锛?/span>

銆€銆€1銆佷娇鐢ㄨ繖涓€绠€鍐欐柟寮忎綘鑷冲皯瑕佹寚瀹?font-size 鍜?font-family 灞炴€э紝鍏朵粬鐨勫睘鎬?濡?font-weight銆乫ont-style銆乫ont-varient銆乴ine-height)濡傛湭鎸囧畾灏嗚嚜鍔ㄤ娇鐢ㄩ粯璁ゅ€笺€?/span>

銆€銆€2銆佸湪缂╁啓鏃?font-size 涓?line-height 涓棿瑕佸姞鍏?ldquo;/”鏂滄墰銆?/span>

涓€鑸儏鍐典笅鍥犱负瀵逛簬涓枃缃戠珯锛岃嫳鏂囪繕鏄瘮杈冨皯鐨勶紝鎵€浠ヤ笅闈㈢缉鍐欎唬鐮佹瘮杈冨父鐢細

body{
    font:12px/1.5em  "瀹嬩綋",sans-serif;
}

銆€銆€鍙槸鏈夊瓧鍙枫€佽闂磋窛銆佷腑鏂囧瓧浣撱€佽嫳鏂囧瓧浣撹缃€?/span>

以上是关于CSS甯冨眬妯″瀷的主要内容，如果未能解决你的问题，请参考以下文章

瑙ｅ喅fixed甯冨眬閲屽唴瀹逛笉婊氬姩闂

鐢⊿park-Scala璁粌LightGBM妯″瀷