设置边距的一点解释：-100%在圣杯布局左框上

时间：2023-03-30 22:32:38 CSS

鍦ｆ澂甯冨眬琚 涓烘槸涓€涓€滆€佲€濊瘽棰樸€傜綉涓婄殑璧勬枡寰堝锛岃繖閲屽氨涓嶇粏璇翠簡銆備絾鏄墠鍑犲ぉ锛屾垜鍋剁劧鍙戠幇浜嗕竴绡囪В閲婂湥鏉竷灞€鐨勫崥瀹€傛湁鍚屽瀵瑰乏杈瑰畾瀹芥璁剧疆margin-left:100%鏈夌枒鎯戙€備粬浠彲鑳戒笉鐭ラ亾涓轰粈涔堣繖涓缃細璁╁乏杈圭殑鐩掑瓙鈥滅埇鈥濆埌涓棿鐩掑瓙鐨勫乏杈癸紝鎬濊€冧竴涓嬶紝璁板綍涓嬫垜鐨勭悊瑙ｏ紝甯屾湜鑳藉府鍔╂湁鐤戞儜鐨勫悓瀛︺€傛枃涓鏈夐敊璇紝鏁鎸囧嚭銆傚熀鏈竷灞€

棣栧厛灏嗗乏鍙砫iv鐨勫搴﹀拰瀹瑰櫒鐨勫乏鍙冲唴杈硅窛鍒嗗埆璁剧疆涓哄乏鍙虫鐨勫搴︺€傝繖鏄袱涓洅瀛愮殑甯冨眬浣嶇疆//褰撶獥鍙ｅ皬浜庢煇涓€兼椂锛屽竷灞€浼氭贩涔憋紝鎵€浠ュ姞涓€涓渶灏忓搴?/Threshold=leftwidthx2+rightwidthbody{min-width:700px;}.container{濉厖锛?300px0200px;}.middle{瀹藉害锛?00%;楂樺害锛?00px锛涜儗鏅細#ccc;}.left{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅細缁胯壊锛泒.right{瀹藉害锛?00px锛涢珮搴︼細200px锛沚ackground:orange;}effect:addfloatingleftfloating.middle,.left,.right{float:left}effectleftright鐩掑瓙绉诲姩璐焟argin3銆傝宸﹀彸鈥滅埇鈥濆埌绗竴琛岃礋杈硅窛鐨勮涓烘湁寰堝銆傝繖閲屾垜浠彧璁ㄨ鑴辩鏂囨。娴佺殑娴姩鍏冪礌鐨勬儏鍐点€傜幇鍦ㄦ垜浠煡閬撹繖涓変釜妗嗛兘鍦ㄦ枃妗ｆ祦涔嬪锛屾墍浠ヨ璁╁厓绱犫€滅埇鈥濆埌涓婁竴琛岋紝鎴戜滑闇€瑕佷娇鐢ㄨ礋杈硅窛銆傝繖涓礋杈归檯鏄灏戯紵瀹冨彇鍐充簬涓や釜鏉′欢锛氳绉诲姩鐨勫厓绱犵殑瀹藉害鍜岃绉诲姩鐨勫厓绱犱笌鍓嶄竴涓浉閭诲厔寮熷厓绱犱箣闂寸殑鈥滅┖鐧解€濈┖闂达紙瀹藉害锛夈€傛垜浠复鏃朵慨鏀逛竴涓嬪綋鍓嶇殑甯冨眬锛屾敞閲婃帀鍙宠竟鐨勬锛屼慨鏀逛腑闂寸殑妗嗕负瀹藉害濡備笅锛?middle{width:calc(100%-166px)}鐜板湪鏈変竴涓┖鐧斤紝瀹藉害涓簃iddle鍜宭eft涔嬮棿166px锛岃缃甿argin-left:-10px锛屼綘浼氬彂鐜板乏杈圭殑妗嗚繕鍦ㄥ綋鍓嶈涓婄Щ鍔紝鍙槸鍚戝乏绉诲姩浜?0px锛屽啀璁剧疆margin-left:-34px锛屾鏃剁殑宸︽宸叉垚鍔熶笂鍗囧埌绗竴琛屻€傛晥鏋滐細璁剧疆-34px鍚庯細浣嗘槸杩欐槸涓轰粈涔堝憿锛熸垜璇曠潃杩欐牱鐞嗚В锛歜oxmodel=margin+border+padding+content鍏冪礌甯冨眬鏄牴鎹瘡涓浉閭荤洅瀛愮殑灞炴€ф潵鍐冲畾鐨勩€傚浜庡叿鏈夋诞鍔ㄨ缃殑鐩搁偦鍏冪礌锛屽畠浠笉鍦ㄦ甯哥殑鏂囨。娴佷腑銆傚綋涓烘诞鍔ㄥ厓绱犺缃礋杈硅窛鏃讹紝鏍规嵁绗竴鏉¤鍒欙紝璇ュ厓绱犲搴旂殑鐩掓ā鍨嬪疄闄呬笂鍙樺皬浜嗐€傝礋杈归檯鐨勭粷瀵瑰€兼槸澶氬皯锛屼篃灏辨槸鍑忓皯澶氬皯銆傚湪杩欎釜渚嬪瓙涓紝鎴戜滑璁剧疆浜唌argin-left:-34px銆傛湰璐ㄤ笂锛岀洅瀛愭ā鍨嬬殑瀹藉害姣斾箣鍓嶅噺灏戜簡34px銆傚疄闄呭竷灞€瀹藉害鍙樹负200-34=166px锛?66鍍忕礌鍙槸涓婁竴琛岀殑鐩搁偦鍏冪礌銆傜┖鐧藉搴︼紝鎵€浠ュ乏杈圭殑妗嗕細鈥滄祦鈥濆埌涓哄畠閲忚韩瀹氬仛鐨勪綅缃紝鍗筹細left濉弧杩欎釜绌虹櫧銆傜粡杩囦竴涓皬鏍楀瓙鐨勮瑙ｏ紝鎯冲繀澶у宸茬粡鍩烘湰浜嗚В浜嗛噸鐐瑰師鐞嗭紝閭ｄ箞鎴戜滑灏辫繕鍘熸祴璇曟敼鍔紝缁х画涔嬪墠鐨勮瑙ｃ€傜幇鍦ㄦ兂鎯冲乏杈圭殑鐩掑瓙馃锛屽乏杈圭洅瀛愮殑鐩搁偦鍏冪礌鐨勪笂涓€琛屾湁娌℃湁绌烘牸锛熸樉鐒朵笉鏄紝涔熷氨鏄┖鐧戒负0锛屾墍浠ュ鏋滆鍍忓墠闈㈢殑渚嬪瓙涓€鏍疯宸﹁竟鐨勭洅瀛愨€滄祦鈥濆埌涓婁竴琛岋紝鍒欒嚜韬洅瀛愭ā鍨嬬殑甯冨眬瀹藉害闇€瑕佷负0锛屾墍浠ヨ缃簡margin鍒?200px锛屽畠涓婂崌鍒扮涓€琛岀殑鏈熬銆傛帴涓嬫潵锛岃宸﹁竟鐨勭洅瀛愮Щ鍔ㄥ埌鏈€宸﹁竟銆傛牴鎹笂鍥撅紝鐩存帴绉诲姩x涓儚绱犲嵆鍙€倄鐨勫搴︿负100%锛屽嵆瀹冧滑鍏卞悓鐨勭埗鍏冪礌鐨勫搴︺€侺eft闇€瑕佽缃甿argin-left:-100%鍗冲彲浠ャ€傛暡榛戞澘锛佹垜浠洰鍓嶇殑鍋囪鏄乏杈圭殑鐩掑瓙鏈韩鍦ㄤ笂闈㈢殑浣嶇疆锛屽叾瀹炰笉鐒讹紒left鏈韩鍦ㄧ浜岃锛屽畠缁欒嚜宸辩殑瀹藉害璁剧疆璐熻竟璺濆悗鎵嶅埌绗竴琛岀殑鏈熬锛屾墍浠ョ幇鍦ㄨ缃?100%锛屽畠鍙細鍒颁笅鍥剧殑浣嶇疆锛歵his鍒氬ソ姣旀垜浠鏈熺殑浣嶇疆灏戜簡涓€涓猵osition鑷韩鐨勫搴︼紝瀵瑰簲鐨刢ss濡備笅锛?left{margin-left:-100%}鍒版涓烘锛屽鍙宠竟鐨勬杩涜澶勭悊銆傚彸妗嗗悓鐞嗕笂鍗囧埌绗竴琛岋紝闇€瑕佽缃細.right{margin-left:-300px}鏁堟灉锛氬凡鎴愬畾灞€姝ゆ椂left鍜宺ight鍒嗗埆鍦ㄥ乏绔拰鍙崇瀹瑰櫒锛堟敞鎰忔槸鍦ㄩ噷闈級锛屾垜浠笇鏈涘畠浠渶缁堝垎甯冨湪瀹瑰櫒鐨勫闈紝涔熷氨鏄乏鍙硃adding銆傛垜浠煡閬撹繖涓や釜璺濈銆傛帴涓嬫潵璁剧疆鏈€鍚庝竴姝ワ紝浣跨敤缁濆瀹氫綅锛屼竴鎷涘畾澶╀笅銆傪煒?left{浣嶇疆锛氱浉瀵癸紱宸︼細-200px}.right{浣嶇疆锛氱浉瀵癸紱right:-300px;}鏁堟灉锛氳嚦姝わ紝鏁翠釜鍦ｆ澂甯冨眬灏卞畬鎴愪簡锛屽杩欎簺璐熻竟璺濊缃€兼湁鐤戞儜鐨勫悓瀛﹀彲浠ョ悊瑙ｄ竴涓媬

上一篇：前端iPhoneX适配总结

下一篇：圣杯布局和双飞翼布局_0

设置边距的一点解释：-100%在圣杯布局左框上相关文章