页面架构

布局解决方案

水平居中布局

<!--方案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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1赞 92
  • 熟悉Web标准,标签语义化,布局和页面架构
    1.Web标准 Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。对应的标准也分...
    sissi110阅读 1,307评论 0赞 4
  • WY-页面架构
    CSS reset ** 1、placeholder 颜色重置 ** 2、 input 右测 小叉删除 ** 3、...
    ddai_Q阅读 598评论 1赞 2
  • 你的名字
    本文参加#未完待续，就要表白#活动，本人承诺，内容为原创，且为在其他平台发表过。 你的名字，就这样悄无...
    天天向上的小白白阅读 284评论 0赞 0
  • 蜗居
    蜗居深山小小一隅 独自背着竹篓下田劳作； 独自挽起裤管下河捞鱼； 独自提着铁锹打点花草； 独自升起炊烟点火做饭； ...
    南肆樱语阅读 289评论 0赞 3