页面架构-布局

1 CSS Reset

1.1 CSS Reset方法和应用

为什么要Reset CSS

IE/Chrome/FireFox/Opero/Sefari,每种浏览器对不同的HTML标签有不同的初始样式设定。而如果我们的网站要在不同的浏览器上保持同样的样式，最好的办法就是统一这些设定。

比如：要设定一个<h3>元素的样式,开发者就需要如下的操作；

/* h3元素 */
<th class="m-article">
    <h3>标题</h3>
</th>

//浏览器默认的样式如下
th{
    font-weight: bold;
}
h3{
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

//开发者需要在CSS中的设定
.m-article h3{
    font-size: 16px;
    margin: 0;
    font-weight: normal;
}

如何进行CSS Reset

逐条重设法

也就是上面用的reset方法，在每个需要reset的CSS语句中进行归零设置；但是这样做，就大大增加了开发者的工作，同时大量的重设代码会影响网站的性能。

Reset.css

在一个CSS文件中，把所有的HTML标签的样式都进行统一初始设定，这样一个文件引入到HTML文件中后(<link rel"stylesheet" type="text/css" href="reset.css">)，就能够把不同浏览器的各自初始设定替换为Reset.css的统一初始设定；然后在Reset.css的基础上开发的网站应用，在不同的浏览器上有相同的样式了，同时减轻了开发者的工作量。

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,fotter,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
precode,kbd,samp{font-family:inherit;}
q:brfore,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}

本质和使用

• 不同的软件、产品都是不一样的设置，所以需要因产品因时而对reset文件进行修改，然后使用；
• 如何使用：
  • 在项目初期就进行定好默认样式；
  • 在link的第一位就引出reset.css样式表；
    • <link rel="stylesheet" href="reset.css"/>
    • 或者把Reset代码，放在项目CSS样式表的最上面；

2 布局解决方案

2.1 居中布局

水平居中

inline-block + text-align

• 优点：兼容性好
• 缺点：child中的文字会继承text-align:center

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.child{display: inline-block;}
.parent{text-align: center;}

table + margin

• 优点：只需要对child近些设置（因为table本来就是inline-block?）
• 缺点：

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.child{display: table;margin: 0 auto;}

relative + absolute + transform

• 优点： 子元素脱离文档流
• 缺点： 不能兼容IE678

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{position: relative;}
.child{position: absolute;left: 50%;transform: translateX(-50%);}

/* 备注：.parent在relative之后，必须要设置高度，才能有背景颜色、margin等值的显示 */

flex + justify-content

• 优点： 只需要设置父元素
• 缺点： 不支持IE678

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css1 */
.parent{display: flex;justify-content: center;}

/* css2 */
.parent{display: flex;}
.child{margin: 0 auto;}

垂直居中（bs:子容器和父容器的高度都不确定）

table-cell + vertical-align

• 优点： 兼容性比较好

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{display: table-cell; vertical-align: middle;}

absolute + transform

• 优点： 子元素不干扰其他元素
• 缺点： 兼容性不好

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* CSS */
.parent{position: relative;}
.child{position: absolute; top: 50%; transform: translateY(-50%);}

flex + align-items

• 优点： 只需要设置父元素
• 缺点： 只有高版本的浏览器支持

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{display: flex; align-items: center;}

水平和垂直都居中

inline-block + text-align + table-cell + vertical-align

• 优点： 兼容性好

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{text-align: center; display: table-cell; vertical-align: middle;}
.child{display: inline-block;}

absolute + transform

• 优点： 子元素不干扰其他元素

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{position: relative;}
.child{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

flex + justify-content + align-items

• 优点： 只需要设置父元素

/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{display: flex; justify-content: center; align-items: center;}

做方案的思路

• 要熟练掌握CSS相关的属性和值的特性；
• 对问题进行分解，分布解决；

2.2 多列布局

一列定宽一列自适应

float + margin

• 优点： 容易理解
• 缺点： IE6支持有问题哦

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.left{float: left;  100px;}
.right{margin-left: 120px;}

float + margin + (fix)

• 优点： 兼容性好
• 缺点： 多了一个结构

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p><p>right</p>
        </div>
    </div>
</div>

/* css */
.left{float: left;  100px; position: relative;}
.right-fix{ 100%; margin-left: -100px; float: right;}
.right{margin-left: 120px;}

float + overflow

• 优点： 简单
• 缺点： 不支持IE6

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.left{ 100px; float: left; margin-right: 20px;}
.right{overflow: hidden;}

table

• 缺点： 代码多

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: table;  100%; table-layout: fixed;}
.right,.left{display: table-cell;}
.left{ 100px; padding-right: 20px;}

flex

• 缺点： 低版本不兼容、可能性能会有影响，不适合复杂的布局

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: flex;}
.left{ 100px; margin-right: 20px;}
.right{flex: 1;}

两列定宽，一列自适应

float + overflow: hidden

/* html */
<div class="parent">
    <div class="left>
        <p>left</p>
    </div>
    <div class="middle">
        <p>middle</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.left,.middle{ 100px; float: left; margin-right: 20px;}
.right{overflow: hidden;}

等分布局 C + G = (W+G)*N

float

• 优点： 兼容IE67
• 缺点： 不灵活

/* html */
<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>

/* css */
.parent{margin-left: -20px;}
.column{ 25%; padding-left: 20px; float: left; box-sizing: border-box;}

table

• 优点： 灵活
• 缺点： 多了一个结构

/* html */
<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>

/* css */
.parent-fix{margin-left: -20px;}
.parent{display: table;  100%; table-layout: fixed;}
.column{display: table-cell; padding-left: 20px;}

flex

• 优点： 简洁、灵活
• 缺点： 兼容性问题

/* html */
<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>

/* css */
.parent{display: flex;}
.column{flex: 1;}
.column+.column{margin-left: 20px;}

一列定宽，另一列自适应，两列高度自适应

table

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: table;  100%; table-layout: fixed;}
.left,.right{display: table-cell;}
.left{ 100px; padding-right: 20px;}

/* 备注：上面的方案貌似，并不能两行分开呀！*/

/* html2 */
<div class="parent pbox p20">
    <div class="left thec l20">
        <p class="thep">left</p>
    </div>
    <div class="mi m20"></div>
    <div class="right thec r20">
        <p class="thep">right</p>
        <p class="thep">right</p>
    </div>
</div>

/* css2 */
.p20{display: table;  100%; table-layout: fixed;}
.r20,.m20,.l20{display: table-cell;}
.m20{ 20px;}
.l20{ 100px;box-sizing: content-box;}

flex

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: flex;}
.left{ 100px; margin-right: 20px;}
.right{flex: 1;}

float

• 优点： 兼容性好

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{overflow: hidden;}
.left,.right{padding-bottom: 9999px; margin-bottom: -9999px;}
.left{float: left;  100px; margin-right: 20px;}
.right{overflow: hidden;}

2.3 全屏布局（一般用在信息展示、监控平台上）

特点： 充满浏览器窗口，滚动条只出现在内容区域；

需求一： 整页整体自适应；头部、尾部、侧边栏定宽度（px）；内容区自适应；

position

注： IE6以下不支持

/* html */
<div class="parent">
    <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>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.top{position: absolute; top: 0; left: 0; right: 0; height: 100px;}
.left{position: absolute; left: 0; top: 100px; bottom: 50px;  200px;}
.right{position: absolute; overflow: auto; left: 200px; right: 0; top: 100px; bottom: 50px;}
.bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px;}
.right .inner{min-height: 1000px;}

flex

注： IE9以下不支持

/* html */
<div class="parent">
    <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 */
html,body,.parent{height: 100%; overflow: hidden;}
.parent{display: fex; flex-direction: column;}
.top{height: 100px;}
.bottom{height: 50px;}
.middle{flex:1; display: flex;}
.left{ 200px;}
.right{flex: 1; overflow: auto;}
.right .inner{min-height: 1000px;}

需求二：整页整体自适应；头部、尾部、侧边栏定宽度（%）；内容区自适应；

position

/* html */
<div class="parent">
    <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>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.top{position: absolute; top: 0; left: 0; right: 0; height: 10%;}
.left{position: absolute; left: 0; top: 10%; bottom: 5%;  20%;}
.right{position: absolute; overflow: hidden; left: 20%; right: 0; top: 10%; bottom: 5%;}
.bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 5%;}
.right .inner{min-height:1000px;}

flex

/* html */
<div class="parent">
    <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 */
html,body,.parent{height: 100%; overflow: hidden;}
.parent{display: flex; flex-direction: column;}
.top{height: 10%;}
.middle{flex: 1; display: flex;}
.left{ 20%;}
.right{flex: 1; overflow: auto;}
.right .inner{min-height: 1000px;}

需求三：整页整体自适应；头部、尾部、侧边栏自适应（内容）；内容区自适应；

分析：position无法使用，只能用flex/Grid

flex

/* html */
<div class="parent">
    <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 */
html,body,.parent{height: 100%; overflow: hidden;}
.parent{display: flex; flex-direction: column;}
.middle{flex: 1; display: flex;}
.right{flex: 1; overflow: auto;}
.right .inner{min-height: 1000px;}

2.4 响应式布局

需求： 满足多设备的浏览要求

• 优点： 节约成本
• 缺点： 有些内容会被省略

/* viewport */
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

/* @media */
@media screen and (max- 320px){/* 视窗宽度<=320px */}
@meida screen and (min- 769px){/* 视窗宽度>=769px */}
@media screen and (min- 769px) and (max- 1000px){/* 769px < 视窗宽度 < 1000px}

/* 案例：html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* 案例：css */
.left{float: left;  100px; margin-right: 20px;}
.right{overflow: hidden;}
@media screen and (max- 320px){
    .left{float: none;  auto; margin-right: 0; margin-bottom: 20px;}
}