CSS常用布局简洁解决方案

相关基础知识

1.内部与外部尺寸模型：（w3c草案）亲测google可支持。（http://w3.org/TR/css3-sizing ）

基于原有CSS尺寸特性，可以使CSS更容易描述内容自适应以及适应固定上下文的盒模型：

*min-content*:解析为这个容器内 部最大的不可断行元素的宽度(即最宽的单词、图片或具有固定宽度的盒元 素)；

*max-content*:类似于我们在前面看到的display: inline- block ；

*fit-content*:行为与浮动元素是相同的 。

2.可控表格布局：

*table-layout* （CSS2.1）属性:
默认值是 auto：其行为模式被称作自动表格布局算法，也就是我们最 为熟悉的表格布局行为 ；

*fixed：*固定表格布局算法，这个值的行为要明显可控一些。它把更多的控制权交给了网页开 发者，只把较少的控制权留给渲染引擎 ；

---

常见布局的实现

1.满幅背景定宽内容：

*常用办法：*
footer {
background: #333;
}
 .wrapper {
max-width: 900px;
margin: 1em auto;
} 

如何避免使用两层结构来实现；

footer {
    padding: 1em ;//向下兼容不支持calc的浏览器
    //max-width: 900px;
    padding: 1em calc(50% - 450px);
    background: #333;
}

解释：

CSS 值与单位(第三版)(http://w3.org/TR/css-values-3...定义了 个 calc() 函数，它允许我们在 CSS 中直接以这种简单的算式来指定属性的值。 在这里可以取代内层里margin:auto的效果。

2.水平居中

• 如果它是一个行内元素， 就对它的父元素应用text-align: center ；

• 如果它是一个块级元素，就对 它自身应用margin:auto。

3.垂直居中

两种不太理想的方法：表格布局法、行内块法。这里不详细说，想了解可参看：
http://css-tricks.com/centeri... 。

以如下结构为例：

<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main> 

推荐方法：

• 基于绝对定位的解决方案：

  对于固定宽高的元素进行居中处理：
  main {
  position: absolute; top: calc(50% - 3em);

  left: calc(50% - 9em); width: 18em;
  height: 6em;
  }

*解释*：特点在与解决如何根据内部元素自身的宽高来计算移动比例。

对于绝大多数 CSS 属性(包括 margin)来说， 百分比都是以其父元素的尺寸为基准进行解析的 ；
translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度 为基准进行换算和移动的；
解决方法：
    main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    } 
存在问题：
 需要绝对定位，而且如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视 口裁切掉 
 

• 基于适口单位的解决方案：

  CSS 值 与 单 位( 第 三 版 )(http://w3.org/TR/css-values-3... relative-lengths)定义了一套新的单位，称为视口相关的长度单位 ：
  vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示 视口宽度的 1%，而不是 100%。
  与 vw 类似，1vh 表示视口高度的 1%。
  当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。
  当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。

 main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0; transform: translateY(-50%);
    } 
    
存在问题：它只适用于在视口中居中的场景 

• 基于flexbox的解决方案：

  Flexbox(伸缩盒)(http://w3.org/ TR/css-flexbox)是专门针对这类需求所设计的 。
  *解决方法：*

  body {

  display: flex;
  min-height: 100vh;
  margin: 0; }
  main {
  margin: auto;

  }

  *解释：*
  当我们使用 Flexbox 时，margin: auto 不仅在水平方向上将元 素居中，垂直方向上也是如此。 
  存在问题：兼容性不如前两种广泛。
  未来可能将会普遍试用的方式：盒对齐模型http://w3.org/TR/css-align-3) 
  对于简单的居中不需要特殊的布局模式，只需要align-self:center;就够了。
  

小科普：W3C标准从提起到正式写入规范的流程：
https://www.zhihu.com/questio...