CSS常用布局简洁解决方案

2019年9月7日 332次阅读 来源: lizziebing

相关基础知识

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…

    原文作者：lizziebing
    原文地址: https://segmentfault.com/a/1190000010124579
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞