引用：“资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能”

最近觉得自己应该好好反省一下，连最基础的问题都回答不上来，家里人不要面子的啊。

要有一个好的页面布局的话首先我们要了解一个基本的概念，盒模型。

 盒模型概述 

在一个文档中，每个元素都被表示为一个矩形的盒子。确定尺寸, 属性 --- 像它的颜色，背景，边框方面 --- 和这些盒子的位置是渲染引擎的目标。

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边（margin）, 边框边（boder）, 内填充边 （padding）与 内容（content）边。

进行布局的时候，我们必须先理解块级元素，行内元素的概念

 块级元素，行内元素 

块级元素：独占一行，所以其width不设定的话就是100%，height，margin，padding，border都是可以控制的。

div 举例

常见的块级元素就有：

• <address>   <article> HTML5 <aside> HTML5 <audio> HTML5 <blockquote>  <canvas> HTML5

• <dd>  <div> <dl>  <fieldset>  <figcaption> HTML5  <figure> HTML5  <footer> HTML5  <form>

• <h1>,  <h2>,  <h3>, <h4>,  <h5>, <h6>
  

• <header>  HTML5  <hgroup> HTML5  <hr> <noscript>  <ol> <output> HTML5  <p> <pre>  <section> HTML5 <table>

• <tfoot>  <ul> <video>  HTML5

行内元素：跟别的元素连在一起，挤不下了就跳到下一行。可以设置border，padding，margin-left，margin-right。border-top与padding-top，最多到页面顶部。

常见的行内元素

• b, big,  i, small, tt

• abbr, acronym,  cite, code, dfn,  em, kbd, strong,  samp, var

• a, bdo,  br, img, map,  object,  q, script,  span, sub, sup

• button, input,  label, select, textarea

在查阅很多资料的时候，大家再讲行内元素的特点，都会说无法对其设置width，height，但是很明显 input 这些行内元素是可以设置的，这边又要说到，行内替换元素和行内非替换元素了，行内替换元素例如input 是遵循标准的盒模型的

在页面布局时，会遇到基本的问题，比如需要用到块级元素进行左右布局

以前我们会用到 float，运用float 的时候明显因为浮动，我们还需要用到clear 去清除浮动。为了更简便，我们就需要有一个东西既不独占一行，又可以设置其宽高属性，所以需要用到 display。

 display 

display 的作用就是把上述说到元素的属性进行变化

我们最常见的是 block（块级）inline（行内）以及inline-block（行内块级）以及在现在更好用的flex（弹性盒布局）

最最起初我在进行移动端布局的时候，基本采用百分比布局。百分比布局麻烦的地方就是要计算，还有因为盒模型设置的一些属性，我在百分比设置多少多少上总是拿捏不准。在一些复杂的嵌套布局中常常需要用到float和position变化，最麻烦的地方还是距离多少上面的计算，有了flex就十分方便。

 display:flex 

设置display:flex 后一些对应的属性设置

看一下最常见的我们的布局

当然 flex 不能解决的问题还有兼容性的事情，所以还是离不开 position 与 float

 position 

absloute （绝对）|  relative （相对）| fixed（固定）

abslote

absolute 是最棘手的position值。  absolute 与 fixed  的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素 。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

relative

在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、  bottom 和 left  属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative  一样， top 、  right 、 bottom 和 left 属性都可用。

为什么要整理页面布局这个东西呢

其实主要页面布局关乎着我们整个网页的性能。

生成一个网页大致需要如下步骤

1. HTML代码转化成DOM

2. CSS代码转化成CSSOM（CSS Object Model）

3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）

4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成

5. 将布局绘制（paint）在屏幕上

1.2.3非常快，所以我们想要提高性能，4就显得难能珍贵了

本文参考：

• 学习css布局：http://zh.learnlayout.com/

• w3c 盒子模式 ：https://www.w3.org/TR/CSS2/box.html#bidi-box-model

• Flex布局新旧混合写法详解（兼容微信）：https://segmentfault.com/a/1190000003978624

• 网页性能管理详解：http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

ps：早睡早起，常做运动，多与异性交朋友