css布局-百分比布局
书写手机网页时，必须约束视口宽度（320-420左右）：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
width=device-width 约束视口
initial-scale=1.0 初始视口倍数是1倍
minimum-scale=1.0 最小允许视口宽度是1倍
maximum-scale=1.0 最大允许视口宽度是1倍
user-scalable=no 不允许用户缩放视口
书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。
一、百分比布局
width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。
height:高度的百分比是相对于父盒子height内容高的比。
padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。
border：不能书写百分数
子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；
height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）；
padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；
例：
div{ width: 50%; overflow: hidden; } p{ width: 50%; height: 100px; float: left; background-color: pink; } p:last-child{ background-color: green; }
二、box-sizing:border-box;
css2中的盒模型是外扩的。
css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。）
例：
内减盒模型：书写的width、height就是盒子真正占有的宽和高。
讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！
三、弹性盒
display的属性值：block ,inline,inline-block,none;
-webkit-box:弹性盒容器。
例：
书写：3个P，宽度比是1:2:3。（X+2X+3X=100%）
抽象公式：
四、固比固模型
固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。
例：1和3部分宽度是120px，2自动撑开。
1、利用浮动
2、绝对定位（推荐）
3、弹性盒
五、max-width 和 min-width
移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。
例：
绛旓細娌℃湁鐗堟湰涓績鐨勭Щ鍔ㄧ綉椤靛繀椤绘寜鐧惧垎姣斿竷灞銆傜櫨鍒嗘瘮甯冨眬涔熺О涓烘祦寮忓竷灞銆備竴.鐧惧垎姣斿竷灞 瀹藉害:瀹藉害鐨勭櫨鍒嗘瘮鏄搴︾浉瀵逛簬鐖舵瀹藉害鍐呭鐨勬瘮鐜囥傛病鏈夌埗妗嗘槸鐩稿浜庢祻瑙堝櫒鐨勫搴︺俬eight:height鐨勭櫨鍒嗘瘮鏄珮搴︾浉瀵逛簬鐖舵鐨勯珮搴﹀唴瀹圭殑姣旂巼銆傚～鍏呫佽竟璺濄:濉厖鍜岃竟璺濇槸鐖舵瀹藉害鐨勬瘮鐜囷紝涓嶈冭檻鏂瑰悜鐧惧垎姣斻傝竟妗:鏃犳硶鍐欏叆...
绛旓細涔﹀啓绉诲姩绔綉椤碉紝娌℃湁鐗堝績锛屽繀椤荤敤鐧惧垎姣斿竷灞銆傜櫨鍒嗘瘮甯冨眬涔熷彨娴佸紡甯冨眬銆備竴銆佺櫨鍒嗘瘮甯冨眬 width:瀹藉害鐨勭櫨鍒嗘瘮鏄浉瀵逛簬鐖剁洅瀛恮idth鍐呭瀹界殑姣斻傛病鏈夌埗鐩掑瓙灏辨槸鐩稿浜庢祻瑙堝櫒鐨勫銆俬eight:楂樺害鐨勭櫨鍒嗘瘮鏄浉瀵逛簬鐖剁洅瀛恏eight鍐呭楂樼殑姣斻俻adding,margin.:padding鍜宮argin涓嶇浠讳綍鏂瑰悜鐧惧垎姣旈兘鏄浉瀵逛簬鐖剁洅瀛恮idth鍐呭...
绛旓細鍥犳锛屽綋鎴戜滑鎯宠涓涓潡绾у厓绱犲湪鍙︿竴涓潡绾у厓绱犱腑灞呬腑鏃(姣斿 p 鍦ㄦ煇涓 div 涓)锛 text-align:center 鏄棤鏁堢殑锛岃屽彲浠ラ氳繃璁剧疆 width:auto 鎴栬 margin:auto 瀹炵幇鑷姩灞涓晥鏋溿鐧惧垎姣鏄疄鐜伴〉闈㈣嚜閫傚簲鐨勯噸瑕侀斿緞锛岃屽厓绱犵櫨鍒嗘瘮鐨 瀹夸富 鍒板簳鏄皝涓鐩存槸浠や汉鍥版壈鐨勯棶棰樸傚叾瀹CSS瀵逛簬鐧惧垎姣旂殑瀹氫箟鍗佸垎鏄...
绛旓細甯冨眬鏂瑰紡濡備笅锛1銆佸浐瀹氬竷灞锛團ixedLayout锛夛細鍥哄畾甯冨眬鏄渶鏃╃殑缃戦〉甯冨眬鏂瑰紡涔嬩竴锛岀壒鐐规槸椤甸潰鐨勫搴﹀浐瀹氾紝涓嶄細闅忕潃娴忚鍣ㄧ獥鍙ｇ殑澶у皬鑰屾敼鍙樸備娇鐢ㄥ儚绱犱綔涓哄崟浣嶆潵璁剧疆鍏冪礌鐨勫搴﹀拰楂樺害銆2銆佹祦鍔ㄥ竷灞锛團luidLayout锛夛細娴佸姩甯冨眬鏄竴绉嶇浉瀵硅緝鏂扮殑甯冨眬鏂瑰紡锛岀壒鐐规槸椤甸潰鐨勫搴︿細闅忕潃娴忚鍣ㄧ獥鍙ｇ殑澶у皬鑰岃嚜鍔ㄨ皟鏁淬備娇鐢鐧...
绛旓細鑷傚簲甯冨眬椤甸潰閲岄潰鍏冪礌鐨勪綅缃細鍙樺寲锛屽緢濂界殑瑙ｅ喅浜嗘祦寮忓竷灞涓殑澶у睆绌洪棿鍒╃敤鐜囦笉楂樺紛绔傛敞锛氬睆骞曞垎杈ㄧ巼鍙樺寲鏃讹紝椤甸潰閲岄潰鍏冪礌鐨勪綅缃細鍙樺寲鑰屽ぇ灏忎笉浼氬彉鍖栥3.娴佸け甯冨眬锛鐧惧垎姣斿竷灞 %锛夌綉椤典腑涓昏鐨勫垝鍒嗗尯鍩熺殑灏哄浣跨敤鐧惧垎鏁帮紙鎼厤min-*銆乵ax-*灞炴т娇鐢),鍒嗗埆涓轰笉鍚岀殑灞忓箷璁剧疆甯冨眬鏍煎紡锛屽綋灞忓箷澶у皬鏀瑰彉鏃...
绛旓細鐧惧垎姣斿竷灞锛屼篃绉颁负寮规х洅甯冨眬锛屽叾涓昏搴旂敤浜巜idth銆乭eight銆乸adding鍜宮argin绛夊睘鎬э紝瀹冧滑鐨勫ぇ灏忎細鏍规嵁鐖跺厓绱犵殑灏哄鍔ㄦ佽皟鏁淬傜櫨鍒嗘瘮甯冨眬骞堕潪娌℃湁鎸戞垬锛屼緥濡傦紝褰撹瘯鍥句互1:2:3鐨勬瘮渚嬪垎閰嶄笁涓猵鍏冪礌鐨勫搴︽椂锛屼娇鐢ㄤ紶缁熺殑娴姩鏂规硶骞朵笉鐩磋銆CSS3寮曞叆鐨刣isplay:-webkit-box灞炴т负瑙ｅ喅杩欑被闂鎻愪緵浜嗘柊鎵嬫銆傞氳繃...
绛旓細甯哥敤鐨甯冨眬鍗曚綅鍖呮嫭鍍忕礌锛 px 锛夛紝鐧惧垎姣锛 % 锛夛紝 em 锛 rem 锛 vw/vh 銆傦紙1锛夊儚绱 锛 px 锛夋槸椤甸潰甯冨眬鐨勫熀纭锛屼竴涓儚绱犺〃绀虹粓绔紙鐢佃剳銆佹墜鏈恒佸钩鏉跨瓑锛夊睆骞曟墍鑳芥樉绀虹殑鏈灏忕殑鍖哄煙锛屽儚绱犲垎涓轰袱绉嶇被鍨嬶細CSS鍍忕礌鍜岀墿鐞嗗儚绱狅細锛2锛夌櫨鍒嗘瘮 锛 % 锛夛紝褰撴祻瑙堝櫒鐨勫搴︽垨鑰呴珮搴﹀彂鐢熷彉鍖栨椂锛岄氳繃鐧惧垎姣...
绛旓細娴佸紡甯冨眬锛屼篃琚О涓鐧惧垎姣斿竷灞锛屾槸涓绉嶉〉闈㈣璁℃柟娉曪紝鍏朵腑鍏冪礌鐨勫搴︿互鐧惧垎姣斿舰寮忚缃紝浠ヤ究瀹冧滑鍙互鏍规嵁灞忓箷鎴栨祻瑙堝櫒绐楀彛鐨勫ぇ灏忚繘琛屽姩鎬佽皟鏁淬傝繖绉嶅竷灞鏂规硶鐨勫叧閿湪浜庯紝鏃犺瑙嗗彛濡備綍鍙樺寲锛岄〉闈㈠厓绱犻兘鑳戒繚鎸侀傚綋鐨勬瘮渚嬪拰甯冨眬锛屼粠鑰屼负鐢ㄦ埛鎻愪緵涓鑷翠笖缇庤鐨勭晫闈綋楠屻傚湪瀹為檯搴旂敤涓紝娴佸紡甯冨眬閫氳繃CSS鏉ュ疄鐜般備緥濡傦紝...
绛旓細銆鐧惧垎姣斿竷灞銆戯細绉诲姩绔墠绔紑鍙戠殑铔崚闃舵锛屾垜浠噰鐢ㄧ殑鏄繙鍙ゆ椂浠ｇ殑鐧惧垎姣斿竷灞锛岀畝鍗曠矖鏆达細妯悜鍏呮弧鍒100%锛涗袱鏍忓垯鍚50%锛涗笁鏍忓垯鍚33.3%锛屼笉杩囪繖绉嶆柟寮忓緢蹇寮规х洅妯″瀷甯冨眬鍙栦唬銆傛兂瑕佺粷鎻愪簡瑙ｄ笅鍙互鍔犳垜鎵ｈ涔熷彲浠ョ湅鎴戣祫鏂欏ご鍍忓姞鎴戯紝鍓嶉潰鏄簩浜斾竷锛屼腑闂村垯鏄浂涓鍥涳紝鍚庨潰鏄001锛屽悎璧锋潵灏卞彲浠ヤ簡銆備笂杩...
绛旓細flex鏇村ソ鐐,鐢辨簮浠ｇ爜杩涜鎺у埗甯冨眬,涓鑸笉浼氫贡鎺,浣嗘槸鐧惧垎姣鏈変簺娴忚鍣ㄥ杈规,鍜岄棿璺濆畾涔変笉鍚,鍐嶅姞涓婃湁鐨勬椂鍊欎綘闇瑕佺粰鏍囩鍔犱笂涓浜沺x,浼氬鑷寸櫨鍒嗘瘮涓嶈兘鎸夐鎯崇殑鏍峰瓙鍑虹幇,鑰屼笖涓嶈兘寰皟鐧惧垎姣旂殑璁惧畾,涓嶅鐏垫椿,鐩稿flex甯冨眬灏卞ソ澶氫簡,鐢辨簮浠ｇ爜杩涜鎺у埗,涔熶笉鎷呭績棰濆鍍忕礌,鍙娴忚鍣ㄥ吋瀹瑰氨鍙互 ...
