页面架构

布局解决方案

水平居中布局

<!--方案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及以上兼容，但是只设置了子元素，易维护-->
<style>
  .child{
    display: table;
    /*table和inline-block一样，是的元素的宽度等于内容宽度*/
    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，即宽度是内容宽度*/
    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及以上支持,好处是只需要设置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及以上支持,好处是只需要设置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; /*由于此种方案右侧的内容盖住了左侧，为了防止左侧的内容无法被选中，需要如此设置以提高左边元素的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; /*布局优先，提高渲染速度*/
  }
  .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当内容太复杂时性能不太好-->
<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，兼容性好，但是代码量也不小，而且鲁棒性不好，如果列数变化，25%这个数字需要手动改，有时可能还会出现循环小数-->
<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列等分的的结果，而后又将css的box-sizing进行了修改，保证了在4列等分的情况下，间距也会等分，且最后一个元素不会超出浏览器视窗-->

<!--方案2-->
<style>
  .parent{
    display: table;
    width: 100%;
    table-layout: fixed;/*设置这个性质时，table-cell如果不设置宽度，则默认等分*/
}
  .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，优点是简便，代码量少，但是低版本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>

多列等高布局

在多列布局的多种实现方式中，利用flex和table两种方式都是默认登高的。

全屏布局

特点：

整个页面始终撑满浏览器的窗口
滚动条只出现在内容区
浏览器大小变化时，只有局部内容的大小会随之变化

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标签的斜体等属性，各个浏览器中对不同的标签都是默认的样式，且不同的浏览器可能会有不同的设置
为了不使用浏览器的默认样式，我们可以引用reset.css这个文件来对所有标签的属性进行重置，这样可以保证同一种标签的所有样式在不同的浏览器中的表现都是一样的。这样一来，所有的标签都失去了样式。
另，在现实的开发中，reset.css中不仅要清除所有的默认样式，还要定义全局的样式，保证所有的页面有着同样的行为、风格等。

响应式

目前，网页需要在不同的设备上浏览，如PC，平板，手机等，这些设备的屏幕大小不同，使用方式不同，所以在设计网页时要注意对于不同设备的兼容和显示。

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!--这条语句设置了用户设备的视窗，保证用户看到的内容不会随着设备屏幕大小的变化而变化，scale就是1.0，显示的宽度就是等于设备宽度，并不允许用户自己缩放-->

css设置

@media screen and (max-width: 1000px) and (min-width: 320px){
    .......
}
/*这个是css的选择器，表示大括号其中的css内容只有在媒体设备的屏幕宽度>=320px且<=1000px时才会被使用，可以用来做内容的*/
/*这样，不同的设备上可以使用不同的布局*/

页面优化

提高页面打开速度
对搜索引擎，阅读器友好
代码优化可以提到代码可读性，容易维护

如何优化

减少请求

图片合并，如将小图标进行合并到一个文件，减少文件请求数量
见多个css文件进行合并，将css内联引入html页面
避免使用@import方式引入css文件

减少文件大小

通过选择合适的图片格式来减小文件大小
对图片进行无损压缩
css值缩写，如将margin-left/right/top/bottom等四个属性缩写为一个margin
颜色值最短表示
css中选择器合并

页面性能

将引入css文件的link标签写到<head>标签中
js脚本放在页面底部，因为js的运行会阻塞请求
消耗性能的属性：expression、filter、border-radius、box-shadow、gradients

可读性、可维护性

代码规范
代码语义化
尽量避免使用hack

最后编辑于：2017.12.05 19:46:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343