主內容需要添加 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/

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。