码迷，mamicode.com
首页 > 其他好文 > 详细

页面架构-布局

时间：2018-12-07 22:31:45      阅读：272      评论：0      收藏：0      [点我收藏+]

标签：article   user   全屏   响应式布局   res   code   标签   direction   vertica   

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;}
}

页面架构-布局

标签：article   user   全屏   响应式布局   res   code   标签   direction   vertica   

原文地址：https://www.cnblogs.com/luwanlin/p/10085518.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！