頁面架構(gòu)

布局解決方案

水平居中布局

<!--方案1冠蒋，兼容性好乾胶，但是代碼冗雜-->
<style>
  .parent{
    text-align: center;
}
  .child{
    display: inline-block;
    text-align: left;
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案2识窿，IE8及以上兼容，但是只設(shè)置了子元素缩宜，易維護-->
<style>
  .child{
    display: table;
    /*table和inline-block一樣锻煌，是的元素的寬度等于內(nèi)容寬度*/
    margin: 0 margin;
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案3姻蚓，IE9及以上兼容，好處是-->
<style>
  .parent{
    position: relative;
  }
  .child{
    position: absolute;
    left: 50%; /*自身左邊界距離父元素左邊界*/
    transform: translateX(-50%); /*再向左移動自身寬度的50%捂龄，css3.0新增屬性*/
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案4跺讯，IE9及以上支持-->
<style>
  .parent{
    display: flex; /*子元素默認變成了flex-item殉农，即寬度是內(nèi)容寬度*/
    justify-content: center; 
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

垂直居中布局

<!--方案1超凳，IE8及以上-->
<style>
  .parent{
    display: table-cell;
    vertical-align: center;
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案2，IE9及以上支持-->
<style>
  .parent{
    display: relative;
}
  .child{
    position: abosolute;
    top: 50%;
    transform: translateY(-50%)
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案3暂雹，IE9及以上支持,好處是只需要設(shè)置parent-->
<style>
  .parent{
    display: flex;
    align-items: center;
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

水平垂直都居中的布局

<!--方案1-->
<style>
  .parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
  .child{
    display: inline-block;
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案2杭跪，IE9及以上支持-->
<style>
  .parent{
    display: relative;
}
  .child{
    position: abosolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

<!--方案3涧尿，IE9及以上支持,好處是只需要設(shè)置parent-->
<style>
  .parent{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

多列布局

<!--方案1-->
<style>
  .left{
    float: left;
    width: 100px;
  }
  .right{
    margin-left: 120px;
  }
</style>
<div>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--方案2檬贰，兼容性最好-->
<style>
  .left{
    float: left;
    width: 100px;
    position: relative; /*由于此種方案右側(cè)的內(nèi)容蓋住了左側(cè)翁涤，為了防止左側(cè)的內(nèi)容無法被選中，需要如此設(shè)置以提高左邊元素的Z軸坐標号阿，提高層級*/
  }
  .right{
    margin-left: 120px;
  } 
  .right-fix{
    width: 100%;
    float: right;
    margin: -100px;
  }
</style>
<div>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<!--方案3倦西，IE6不支持-->
<style>
  .left{
    float: left;
    width: 100px;
    margin: 20px;
  }
  .right{
    overflow: hidden;
  }
</style>
<div>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--方案4赁严，代碼比較多-->
<style>
  .parent{
    display: table; width: 100%;
    table-layout: fixed; /*布局優(yōu)先疼约，提高渲染速度*/
  }
  .left{
    width: 100px;
    padding-right: 20px;
  }
  .left, .right{
    display: table-cell;
  }
</style>
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--方案5，css3新增特性劝枣，低版本IE不支持舔腾，而且flex當內(nèi)容太復(fù)雜時性能不太好-->
<style>
  .left{
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right{
    overflow: hidden;
  }
</style>
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="center">
    <p>center</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

多列等分布局

<!--方案1搂擦，兼容性好，但是代碼量也不小扳还，而且魯棒性不好氨距，如果列數(shù)變化，25%這個數(shù)字需要手動改楞遏，有時可能還會出現(xiàn)循環(huán)小數(shù)-->
<style>
  .parent{
    margin-left: -20px;
}
  .column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}
</style>
<div class="parent">
  <div class="column"><p>1</p></div>
  <div class="column"><p>2</p></div>
  <div class="column"><p>3</p></div>
  <div class="column"><p>4</p></div>
</div>
<!--這個布局的精妙之處在于padding和margin重疊且寬度相等橱健，25%剛好是4列等分的的結(jié)果沙廉，而后又將css的box-sizing進行了修改，保證了在4列等分的情況下珊皿，間距也會等分巨税，且最后一個元素不會超出瀏覽器視窗-->

<!--方案2-->
<style>
  .parent{
    display: table;
    width: 100%;
    table-layout: fixed;/*設(shè)置這個性質(zhì)時草添，table-cell如果不設(shè)置寬度，則默認等分*/
}
  .parent-fixed{
    margin-left: -20px;
}
  .column{
    display: table-cell;
    padding-left: 20px;
}
</style>
<div class="parent-fix">
  <div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
  </div>
</div>

<!--方案3抄淑，優(yōu)點是簡便肆资，代碼量少灶芝，但是低版本IE不支持-->
<style>
  .parent{
    display: flex;
}
  .column{
    flex: 1;
}
  .column+.column{
    margin-left: 20px;
}
</style>
<div class="parent-fix">
  <div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
  </div>
</div>

多列等高布局

在多列布局的多種實現(xiàn)方式中夜涕，利用flex和table兩種方式都是默認登高的。

全屏布局

特點：

整個頁面始終撐滿瀏覽器的窗口
滾動條只出現(xiàn)在內(nèi)容區(qū)
瀏覽器大小變化時酸役，只有局部內(nèi)容的大小會隨之變化

Paste_Image.png

<!--方案1簇捍，IE6不支持-->
<style>
  html, body, .parent{height: 100%; overflow: hidden;}
  .top{position: absolute; top: 0; left: 0; right: 0; height: 100px;}
  .left{position: absolute; top: 100px; left: 0; width: 200px; bottom: 50px;}
  .right{position: absolute; top: 100px; right: 0; bottom: 50px; overflow: auto;}
  .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; }
</style>
<div>
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="right">
    <div class="inner">
      right
    </div>
  </div>  
  <div class="bottom">bottom</div>
</div>

<!--方案2暑塑，IE9以及以下都不兼容-->
<style>
  html, body, .parent{height: 100%; overflow: hidden;}
  .parent{display: flex; flex-direction: column;}
  .top{position: absolute; top: 0; left: 0; right: 0; height: 100px;}
  .left{width: 200px; }
  .right{overflow: auto;}
  .middle{ position: absolute; flex:1; display: flex;}
  .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; }
</style>
<div>
  <div class="top">top</div> 
  <div class="middle">
    <div class="left">left</div>
    <div class="right">
      <div class="inner">
        right
      </div>
    </div>
  </div>  
  <div class="bottom">bottom</div>
</div>

CSS Reset

css的諸多標簽都有自己默認的屬性事格，如h1標簽的字號搞隐，em標簽的斜體等屬性，各個瀏覽器中對不同的標簽都是默認的樣式逢捺，且不同的瀏覽器可能會有不同的設(shè)置
為了不使用瀏覽器的默認樣式癞季，我們可以引用reset.css這個文件來對所有標簽的屬性進行重置绷柒，這樣可以保證同一種標簽的所有樣式在不同的瀏覽器中的表現(xiàn)都是一樣的。這樣一來伺绽，所有的標簽都失去了樣式嗜湃。
另购披，在現(xiàn)實的開發(fā)中，reset.css中不僅要清除所有的默認樣式程梦，還要定義全局的樣式橘荠，保證所有的頁面有著同樣的行為哥童、風(fēng)格等。

響應(yīng)式

目前匀泊，網(wǎng)頁需要在不同的設(shè)備上瀏覽，如PC揣非，平板躲因，手機等大脉，這些設(shè)備的屏幕大小不同，使用方式不同琐驴，所以在設(shè)計網(wǎng)頁時要注意對于不同設(shè)備的兼容和顯示秤标。

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!--這條語句設(shè)置了用戶設(shè)備的視窗抛杨，保證用戶看到的內(nèi)容不會隨著設(shè)備屏幕大小的變化而變化，scale就是1.0茁帽，顯示的寬度就是等于設(shè)備寬度屈嗤，并不允許用戶自己縮放-->

css設(shè)置

@media screen and (max-width: 1000px) and (min-width: 320px){
    .......
}
/*這個是css的選擇器饶号，表示大括號其中的css內(nèi)容只有在媒體設(shè)備的屏幕寬度>=320px且<=1000px時才會被使用茫船，可以用來做內(nèi)容的*/
/*這樣，不同的設(shè)備上可以使用不同的布局*/

頁面優(yōu)化

提高頁面打開速度
對搜索引擎涩禀，閱讀器友好
代碼優(yōu)化可以提到代碼可讀性然眼，容易維護

如何優(yōu)化

減少請求

圖片合并，如將小圖標進行合并到一個文件屿岂，減少文件請求數(shù)量
見多個css文件進行合并爷怀，將css內(nèi)聯(lián)引入html頁面
避免使用@import方式引入css文件

減少文件大小

通過選擇合適的圖片格式來減小文件大小
對圖片進行無損壓縮
css值縮寫霉撵，如將margin-left/right/top/bottom等四個屬性縮寫為一個margin
顏色值最短表示
css中選擇器合并

頁面性能

將引入css文件的link標簽寫到<head>標簽中
js腳本放在頁面底部洪囤，因為js的運行會阻塞請求
消耗性能的屬性：expression瘤缩、filter、border-radius锦溪、box-shadow府怯、gradients

可讀性牺丙、可維護性

代碼規(guī)范
代碼語義化
盡量避免使用hack

最后編輯于：2017.12.05 19:46:24

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末冲簿，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子档礁，更是在濱河造成了極大的恐慌吝沫，老刑警劉巖惨险，帶你破解...
沈念sama閱讀 218,036評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件平道，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機窘疮，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,046評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門袋哼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人闸衫，你說我怎么就攤上這事涛贯。” “怎么了蔚出？”我有些...
開封第一講書人閱讀 164,411評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵弟翘，是天一觀的道長。經(jīng)常有香客問我骄酗，道長稀余，這世上最難降的妖魔是什么趋翻？我笑而不...
開封第一講書人閱讀 58,622評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任睛琳，我火速辦了婚禮，結(jié)果婚禮上踏烙，老公的妹妹穿的比我還像新娘师骗。我一直安慰自己，他們只是感情好讨惩，可當我...
茶點故事閱讀 67,661評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布辟癌。她就那樣靜靜地躺著，像睡著了一般荐捻。火紅的嫁衣襯著肌膚如雪愿待。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,521評論 1贊 304
城市分裂傳說
那天靴患，我揣著相機與錄音仍侥，去河邊找鬼。笑死鸳君，一個胖子當著我的面吹牛农渊，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播或颊，決...
沈念sama閱讀 40,288評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼砸紊，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了囱挑？” 一聲冷哼從身側(cè)響起醉顽，我...
開封第一講書人閱讀 39,200評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎平挑，沒想到半個月后游添，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體系草，經(jīng)...
沈念sama閱讀 45,644評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,837評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年唆涝，在試婚紗的時候發(fā)現(xiàn)自己被綠了找都。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,953評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡廊酣，死狀恐怖能耻，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情亡驰，我是刑警寧澤晓猛，帶...
沈念sama閱讀 35,673評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站凡辱，受9級特大地震影響戒职，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜煞茫，卻給世界環(huán)境...
茶點故事閱讀 41,281評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一帕涌、第九天我趴在偏房一處隱蔽的房頂上張望摄凡。院中可真熱鬧续徽，春花似錦、人聲如沸亲澡。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,889評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽床绪。三九已至客情，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間癞己，已是汗流浹背膀斋。一陣腳步聲響...
開封第一講書人閱讀 33,011評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留痹雅，地道東北人仰担。一個月前我還...
沈念sama閱讀 48,119評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像绩社，于是被迫代替她去往敵國和親摔蓝。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,901評論 2贊 355