页面架构-布局

Posted 2021-01-25 luwanlin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面架构-布局相关的知识，希望对你有一定的参考价值。

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; width: 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; width: 100px; position: relative;}
.right-fix{width: 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{width: 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; width: 100%; table-layout: fixed;}
.right,.left{display: table-cell;}
.left{width: 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{width: 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{width: 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{width: 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; width: 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; width: 100%; table-layout: fixed;}
.left,.right{display: table-cell;}
.left{width: 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; width: 100%; table-layout: fixed;}
.r20,.m20,.l20{display: table-cell;}
.m20{width: 20px;}
.l20{width: 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{width: 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; width: 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; width: 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{width: 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%; width: 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{width: 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-width: 320px){/* 视窗宽度<=320px */}
@meida screen and (min-width: 769px){/* 视窗宽度>=769px */}
@media screen and (min-width: 769px) and (max-width: 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; width: 100px; margin-right: 20px;}
.right{overflow: hidden;}
@media screen and (max-width: 320px){
    .left{float: none; width: auto; margin-right: 0; margin-bottom: 20px;}
}

以上是关于页面架构-布局的主要内容，如果未能解决你的问题，请参考以下文章

JetpackDataBinding 架构组件 ③ ( 使用 include 导入二级界面布局 | 二级页面绑定数据模型 )

片段中的Android webView显示空白页面

如何通过单击片段内的线性布局从片段类开始新活动？下面是我的代码，但这不起作用

Spring boot：thymeleaf 没有正确渲染片段

Android ViewPager 适配器修改其他页面

没有滚动内容时如何下拉协调器布局

页面架构-布局

1 CSS Reset

1.1 CSS Reset方法和应用

为什么要Reset CSS

如何进行CSS Reset

逐条重设法

Reset.css

本质和使用

2 布局解决方案

2.1 居中布局

水平居中

inline-block + text-align

table + margin

relative + absolute + transform

flex + justify-content

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

table-cell + vertical-align

absolute + transform

flex + align-items

水平和垂直都居中

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

absolute + transform

flex + justify-content + align-items

做方案的思路

2.2 多列布局

一列定宽一列自适应

float + margin

float + margin + (fix)

float + overflow

table

flex

两列定宽，一列自适应

float + overflow: hidden

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

float

table

flex

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

table

flex

float

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

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

position

flex

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

position

flex

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

flex

2.4 响应式布局

`inline-block` + `text-align`

`table` + `margin`

`relative` + `absolute` + `transform`

`flex` + `justify-content`

`table-cell` + `vertical-align`

`absolute` + `transform`

`flex` + `align-items`

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

`absolute` + `transform`

`flex` + `justify-content` + `align-items`

`float` + `margin`

`float` + `margin` + `(fix)`

`float` + `overflow`

`table`

`flex`

`float` + `overflow: hidden`

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

`float`

`table`

`flex`

`table`

`flex`

`float`

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

`position`

`flex`

`position`

`flex`

`flex`