美文网首页
页面架构

页面架构

作者: cheerss | 来源:发表于2017-02-20 11:53 被阅读0次

布局解决方案

水平居中布局

<!--方案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时才会被使用，可以用来做内容的*/
/*这样，不同的设备上可以使用不同的布局*/

页面优化

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

如何优化

  1. 减少请求
  • 图片合并，如将小图标进行合并到一个文件，减少文件请求数量
  • 见多个css文件进行合并，将css内联引入html页面
  • 避免使用@import方式引入css文件
  1. 减少文件大小
  • 通过选择合适的图片格式来减小文件大小
  • 对图片进行无损压缩
  • css值缩写，如将margin-left/right/top/bottom等四个属性缩写为一个margin
  • 颜色值最短表示
  • css中选择器合并
  1. 页面性能
  • 将引入css文件的link标签写到<head>标签中
  • js脚本放在页面底部，因为js的运行会阻塞请求
  • 消耗性能的属性：expression、filter、border-radius、box-shadow、gradients
  1. 可读性、可维护性
  • 代码规范
  • 代码语义化
  • 尽量避免使用hack

相关文章

  • 「页面架构」CSS Reset

    页面架构 CSS Reset样式重置前后对比 页面架构 页面架构从实际需求出发，提供多种需求的多种解决方案和优缺点...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • iOS开发 如何使用viper架构构建复杂页面？

    iOS开发 使用viper架构构建复杂页面 iOS开发常用的页面架构： MVC MVVM VIPER viper模...

  • 「页面架构」页面优化

    页面优化 页面优化可以提升页面的访问速度从而提高用户体验，优化的页面可以更好的提升 SEO 的效果同时也可以提高代...

  • 07 | 客户端缓存的分类和介绍

    BS 架构 页面缓存； 浏览器缓存； 移动互联网架构 APP 自身使用的缓存； 页面缓存 含义 页面自身对某些元素...

  • web端页面设计之信息架构

    web端页面设计之信息架构

  • 复杂页面架构

    假设微博APP的正文页 整体架构数据流反向更新 整体架构 视图层 （View & ViewController） ...

  • 架构设计之序章

    一、架构是什么？ 简单来说就是调API，展示页面，然后跳转到别的地方再调API，再展示页面。 二、为啥要讨论架构 ...

  • Zipkin官网架构Architecture介绍翻译

    本文是对Zipkin官网架构介绍页面的翻译。Zipkin官网的翻译点击这里。 架构Architecture 架构概...

  • iOS面试之架构模块

    架构 架构内容如下： 图片缓存 阅读时长统计 复杂页面架构 客户端整体架构 等等 1.架构设计的目的 模块化 分层...

网友评论

      本文标题：页面架构

      本文链接：https://www.haomeiwen.com/subject/edicwttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|页面架构|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！