使用这种技巧，可以大大地提高前端布局效率

主内容需要添加 wrapper 吗?

这要看情况。让我们探讨两种最常用内容区间的设计。

第一个以其内容为中心，并受特定宽度限制。

第二个将其内容扩展到主内容的边缘。

为了更好地理解这两种模式，我们来一起探讨如何构建其中的每种模式。

内容居中

你可能想在不使用 wrapper前提下让内容居中。

<section class="hero"> 
    <h2>How to make bread at home</h2> 
    <p>....</p> 
    <p><a href="/sign-up">Sign up</a></p> 
</section> 

在上面的 HTML 中，可以使用text-align将内容居中

.hero { text-align: center; } 

除非你调整浏览器窗口的大小，不然你可能会忽略掉这个问题。

内容紧贴边缘

由于左侧和右侧没有padding，因此内容将粘在边缘上。这对用户是不友好的，因为使内容浏览变得更加困难。

大屏幕的行长

在大屏幕上，由于行长太长，段落文本可能很难看清。根据应用于 Web 的版式样式元素，行的建议字符数为45到75。超出该范围的任何字符都会使阅读更加困难。

为避免上述问题，可以使用wrapper来防止文本长度变得过长并在移动设备中增加间距。

<section class="hero"> 
    <div class="hero__wrapper"> 
            <h2>How to make bread at home</h2> 
            <p>...</p> 
            <p><a href="/sign-up">Sign up</a></p> 
    </div> 
</section> 

这里使用了hero__wrapper类，因为该wrapper可能仅是针对hero部分定制的，因此它可以具有一定的宽度，该宽度小于通用的wrapper元素。

.hero__wrapper { 
    max-width: 720px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 16px; 
    padding-right: 16px; 
} 

为了使内容居中，可以根据具体情况使用具体的属性。对于此示例，使用text-align:center足以使内容居中。

对wrapper使用 CSS 变量

只用一种尺寸的wrapper很少。wrapper的宽度可以小也可以大，具体取决于内容。通过利用 CSS 变量，我们可以创建一个更现代的wrapper，它拥有极大的灵活性。考虑以下内容：

<div class="wrapper"></div> 

.wrapper { 
    max-width: var(--wrapper-width, 1170px); 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 16px; 
    padding-right: 16px; 
} 

var有两个值，第一个值是变量--wrapper-width，第二个值是1170px，如果未设置--wrapper-width变量，则将使用1170px。

当然，我们可以直接在标签内对 --wrapper-width 进行赋值，这样就能动态设置我们想要的值。

<div class="wrapper" style="--wrapper-width: 720px"></div> 

如果你不使用 CSS 变量的方式，也可以通过多加一个类来解决：

<div class="wrapper wrapper--small"></div> 

.wrapper--small { 
    --wrapper-width: 720px; 
    /* this will override the default wrapper width. */ 
} 

使用 display: contents

首先，简要介绍一下这个属性。CSS中的每个元素都是一个盒子，该盒子包含content、padding、margin和border。display: contents样式规则使div元素不产生任何边界框，因此元素的margin、border和padding部分都不会渲染。然而，继承的属性如颜色(color)和字体(font)却能照常影响到子元素。

<header class="site-header"> 
    <div class="wrapper site-header__wrapper"> 
            <!-- Header content --> 
    </div> 
</header> 
.site-header__wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

在上面的示例中，你可能需要让标题扩展到整个页面的宽度，而不是受wrapper宽度的限制。

.site-header__wrapper { 
    display: contents; 
} 
 
.site-header { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

这样，.wrapper元素将被隐藏(类似)。现在，当将display:flex应用于.site-header元素时，.wrapper的后代项将成为.site-header的子项。

流动背景，固定内容

Lea Verou 在她的《CSS Secrets》一书中介绍了一种有趣的技巧，该技巧可用于流动背景(占据整个视口宽度)且内部带有wrapper部分。让我们回顾一下常见的做法。

<section> 
 <div class="wrapper"></div> 
</section> 

section { 
 background-color: #ccc; 
} 
 
.wrapper { 
 max-width: 1170px; 
 margin-left: auto; 
 margin-right: auto; 
 padding-left: 16px; 
 padding-right: 16px; 
} 

margin-left: auto和margin-right: auto的工作方式是计算视口宽度的一半减去内容宽度。使用padding也可以做到。

section { 
  padding: 1rem calc(50% - 585px); 
} 

这样还有问题，在移动设上内容将粘贴备的边缘，一种解决方案如下：

section { 
  padding: 1rem; 
} 
 
@media (min-width: 1170px) { 
 section { 
   padding: 1rem calc(50% - 585px); 
 } 
} 

作者：Ahmad shaded 译者：前端小智 来源：sitepoint 原文：https://ishaded.com/article/styling-css/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。