日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用這種技巧，可以大大地提高前端布局效率

在布局中，對于每塊功能的 DOM 結(jié)構(gòu)，我們一般使用一個帶有 wrapper 類元素把它包裹起來，讓代碼或者網(wǎng)頁內(nèi)容更易于閱讀。為此，我們一般使用wrapper 或者container。在CSS 中使用wrapper可能有多種方式，這些方式中，有些會帶來一些問題。

在本文中，將介紹 CSS中 的 wrapper 布局，它們?nèi)绾喂ぷ鳎绾问褂盟鼈円约昂螘r不使用它們。請注意，在本文中，可能會提到wrapper 和container這兩個術(shù)語，它們的含義相同。

wrapper 簡介

當我們說到 wrapper 或container，實際上是指一組元素被包裝或包含在另一個元素內(nèi)。我們可以為 元素添加一個 wrapper類，這樣我們就不用額外元素，如下所示：

 
 
 
 
    
  
  
  
  
  1. body { 
    2. 
  
  
  
  
  2.     max-width: 1170px; 
    3. 
  
  
  
  
  3.     margin-left: auto; 
    4. 
  
  
  
  
  4.     margin-right: auto; 
    5. 
  
  
  
  
  5.     padding-left: 16px; 
    6. 
  
  
  
  
  6.     padding-right: 16px; 
    7. 
  
  
  
  
  7. } 
    8.

但是，將 wrapper添加到元素是不切實際。 wrapper元素可以防止子項超出其邊界?？紤]下圖：

我們這里有aside和main元素，它們被放在了wrapper 元素中。當然，.wrapper元素有一個寬度

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.     
    ...
     
    4.
 

如果沒有wrapper，子元素將粘附在屏幕的邊緣。這可能會讓用戶非常惱火，尤其是在大屏幕上。

上圖顯示了當沒有用wrapper進行包裹時元素是如何展開的，用戶不應該體驗這種行為。我們來解釋一下背后的原因。

為什么頁面上 wrapper 有必要的

通過多加一層 wrapper 布局，有很多好處：

  1. 使內(nèi)容更具可讀性。沒有多加一層 wrapper，文本和圖像之類的內(nèi)容就可以拉伸以占據(jù)整個屏幕寬度。對于小屏幕，這似乎可以。但是，對于大屏幕，這是非常煩人的。
  2. 對設計元素進行分組可以更好地增加間距。
  3. 在沒有wrapper的情況下，將設計元素劃分為列是不容易完成的。

在CSS中實現(xiàn) wrapper

目前我們已經(jīng)了解了wrapper基礎知識和優(yōu)點，接下來我們來具體的看看在 CSS 如何使用它。

設置寬度

實現(xiàn)wrapper第一件事就是要確認它的寬度。而寬度如何這取決于 UI 的設計。一般來說，最常用寬度是1000px-1300px。例如，流行的框架Bootstrap使用1170px的寬度。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     width: 1170px; 
    3. 
  
  
  
  
  3. } 
    4.

但是，不建議使用width屬性，因為當屏幕尺寸小于1170像素時，會出現(xiàn)水平滾動。可以max-width 來解決這個問題。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     width: 1170px; 
    3. 
  
  
  
  
  3.     max-width: 100%; 
    4. 
  
  
  
  
  4. } 
    5.

我們還可以更簡單點，僅使用 max-width。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     max-width: 1170px; 
    3. 
  
  
  
  
  3. } 
    4.

現(xiàn)在有了寬度，我們可以將它居中 。

居中 wrapper

為了讓 wrapper 居中，使用讓左右外邊距的值為 auto，如下所示：

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     max-width: 1170px; 
    3. 
  
  
  
  
  3.     margin: 0 auto; 
    4. 
  
  
  
  
  4. } 
    5.

根據(jù) CSS 規(guī)范，下面是margin: 0 auto;的工作原理

如果'margin-left'和'margin-right'均為'auto'，則它們的使用值相等。這會讓元素相對于包含塊的邊緣水平居中。

這里我使用margin:0 auto，這基本上將頂部和底部的margin重置為零，并使其左側(cè)和右側(cè)為auto。使用此功能會有一些后果，這將在本文后面介紹。目前，建議使用簡化版邊距:

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     max-width: 1170px; 
    3. 
  
  
  
  
  3.     margin-left: auto; 
    4. 
  
  
  
  
  4.     margin-right: auto; 
    5. 
  
  
  
  
  5. } 
    6.

在左側(cè)和右側(cè)添加 padding

要考慮的重要事項是在左側(cè)和右側(cè)添加padding。當視口大小小于 wrapper 的最大寬度時，這將導致 wrapper 邊緣粘在視口上。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     max-width: 1170px; 
    3. 
  
  
  
  
  3.     margin-left: auto; 
    4. 
  
  
  
  
  4.     margin-right: auto; 
    5. 
  
  
  
  
  5.     padding-left: 16px; 
    6. 
  
  
  
  
  6.     padding-right: 16px; 
    7. 
  
  
  
  
  7. } 
    8.

通過添加padding，我們可以確保從左右兩邊得到一個16px的偏移量，即使視口的大小小于最大寬度。padding作為一種保護策略，避免在寬度不足時讓 wrapper 粘在視口邊緣。

使用百分比的 wrapper

我收到了有關使用百分比寬度(如max-width：90%)用于包裝器而不是使用padding-left和padding-right的答復。

我經(jīng)?？梢缘街苯釉?'wrapper' 使用百分比寬度，如max-width: 90%。而不是使用padding-left和padding-right。

在大屏幕上，寬度90%太大了，我們可以使用媒體查詢來覆蓋它。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.     max-width: 90%; 
    3. 
  
  
  
  
  3.     margin-left: auto; 
    4. 
  
  
  
  
  4.     margin-right: auto; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. /* A media query for a large screen */ 
    8. 
  
  
  
  
  8. @media (min-width: 1170px) { 
    9. 
  
  
  
  
  9.     .wrapper { 
    10. 
  
  
  
  
  10.         max-width: 1170px; 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12. } 
    13.

使用百分比寬度，我們多添加了一個額外的步驟。通過使用固定的寬度值，我們可以輕松地避免此步驟。對應于這種方案，我們可以將width: 90%與max-width：1170px屬性結(jié)合在一起。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2. 
  
  
  
  
  2.  width: 90%; 
    3. 
  
  
  
  
  3.  max-width: 1170px; 
    4. 
  
  
  
  
  4.  margin-left: auto; 
    5. 
  
  
  
  
  5.  margin-right: auto; 
    6. 
  
  
  
  
  6. } 
    7.

這是一個有趣的方法，但我更喜歡自己添加padding，而不是依賴于百分比寬度。

Wrapper 的display類型

由于wrapper 是

，因此默認情況下它是塊級元素。問題是，當要將wrapper內(nèi)的內(nèi)容放置在grid中時，該怎么辦?我們直接在 wrapper 上添加 display: grid ?

我不建議您這樣做，因為這與關注點分離的概念背道而馳。wrapper用于包裹其內(nèi)容，僅此而已。如果需要使用grid布局，則在多添加一層

專門用來 grid 布局會更容易也更清晰還容易維護。

   
 
 
 
    
    
  
  
  
  1.   
    2. 
    
  
  
  
  2.       
    3.
  

不建議這樣做，因為wrapper元素可以在另一頁上使用，這可能會無意間破壞布局。

   
 
 
 
    
    
  
  
  
  1. .wrapper {  
    2. 
    
  
  
  
  2.     display: grid;  
    3. 
    
  
  
  
  3.     grid-template-columns: 2fr 1fr;  
    4. 
    
  
  
  
  4.     grid-gap: 16px;  
    5. 
    
  
  
  
  5. }  
    6.

更好的解決方案如下：

   
 
 
 
    
    
  
  
  
  1.  
    2. 
    
  
  
  
  2.      
    3. 
    
  
  
  
  3.          
    4. 
    
  
  
  
  4.     
 
  •   
       
 
 
 
      
    
  
  
  
    1. .featured-news { 
      2. 
    
  
  
  
    2.     display: grid; 
      3. 
    
  
  
  
    3.     grid-template-columns: 2fr 1fr; 
      4. 
    
  
  
  
    4.     grid-gap: 16px; 
      5. 
    
  
  
  
    5. } 
      6.

    在 wrapper 之間添加 margin

    上面我們說到不建議使用簡寫版本來居中wrapper 元素:

       
 
 
 
      
    
  
  
  
    1. .wrapper {  
      2. 
    
  
  
  
    2.     margin: 0 auto; 
      3. 
    
  
  
  
    3. } 
      4.

    雖然它可以工作，但當頁面上有多個wrapper ，并且需要在它們之間添加間距時，它可能會令人困惑。由于布局需要，我們需要在 wrapper 上多添加一個類，如 wrapper-variation，那么margin有可能無法正常工作。

       
 
 
 
      
    
  
  
  
    1. .wrapper-variation { 
      2. 
    
  
  
  
    2.     margin-top: 50px; 
      3. 
    
  
  
  
    3. } 
      4. 
    
  
  
  
    4.  
      5. 
    
  
  
  
    5. .wrapper {  
      6. 
    
  
  
  
    6.     max-width: 1170px; 
      7. 
    
  
  
  
    7.     margin-left: auto; 
      8. 
    
  
  
  
    8.     margin-right: auto; 
      9. 
    
  
  
  
    9.     padding-left: 16px; 
      10. 
    
  
  
  
    10.     padding-right: 16px; 
      11. 
    
  
  
  
    11. } 
      12.

    .wrapper-variation元素的margin無法使用，因為它已被margin: 0 auto覆蓋。為避免此類混淆，建議在這種情況下使用非簡寫格式 。

    現(xiàn)在讓我們來添加頁邊距。在每個項目中，我都準備了一組用于margin和padding的實用工具類，在必要時使用它們，考慮下圖。
     
  •  
  •     
    •  
  •  
    •   
       
 
 
 
      
    
  
  
  
    1. .mb-5 { 
      2. 
    
  
  
  
    2.     margin-bottom: 3rem !important; 
      3. 
    
  
  
  
    3. } 
      4.

    這樣，wrapper 的 CSS保持原樣，并且使用附加的 CSS 類添加了間距?，F(xiàn)在，你可能會問，為什么可以在一個頁面上添加多個wrapper?在上面的HTML中，兩個wrapper之間有一個

    元素。

    在這里使用!important很好，因為實用程序類的要點是強制屬性，通過添加!important，我們可以確保做到這一點。

    全屏中的 Wrapper

    在某些情況下，如果某個部分的背景視口寬度為100%，并且其中包含wrapper`，則可能會出現(xiàn)這種情況。與上一個示例中介紹的類似。

        
 
 
 
      
     
  
  
  
    1.  
      2. 
     
  
  
  
    2.     
     
  •  
  •  
  •     
    •  
  •  

    •    

    的寬度是 100%。我們可以向其添加背景顏色或圖像。在其中，wrapper可防止內(nèi)容占據(jù)視口的整個寬度。

    主內(nèi)容需要添加 wrapper 嗎?

    這要看情況。讓我們探討兩種最常用內(nèi)容區(qū)間的設計。

    第一個以其內(nèi)容為中心，并受特定寬度限制。

    第二個將其內(nèi)容擴展到主內(nèi)容的邊緣。

    為了更好地理解這兩種模式，我們來一起探討如何構(gòu)建其中的每種模式。

    內(nèi)容居中

    你可能想在不使用 wrapper前提下讓內(nèi)容居中。

          
 
 
 
      
       
  
  
  
    1.  
      2. 
       
  
  
  
    2.     
      How to make bread at home
       
      3. 
       
  
  
  
    3.     
      ....
       
      4. 
       
  
  
  
    4.     
      Sign up
       
      5. 
       
  
  
  
    5.  
      6.

    在上面的 HTML 中，可以使用text-align將內(nèi)容居中

         
 
 
 
      
      
  
  
  
    1. .hero { text-align: center; } 
      2.

    除非你調(diào)整瀏覽器窗口的大小，不然你可能會忽略掉這個問題。

    內(nèi)容緊貼邊緣

    由于左側(cè)和右側(cè)沒有padding，因此內(nèi)容將粘在邊緣上。這對用戶是不友好的，因為使內(nèi)容瀏覽變得更加困難。

    大屏幕的行長

    在大屏幕上，由于行長太長，段落文本可能很難看清。根據(jù)應用于 Web 的版式樣式元素，行的建議字符數(shù)為45到75。超出該范圍的任何字符都會使閱讀更加困難。

    為避免上述問題，可以使用wrapper來防止文本長度變得過長并在移動設備中增加間距。

           
 
 
 
      
        
  
  
  
    1.  
      2. 
        
  
  
  
    2.      
      3. 
        
  
  
  
    3.             
      How to make bread at home
       
      4. 
        
  
  
  
    4.             
      ...
       
      5. 
        
  
  
  
    5.             
      Sign up
       
      6. 
        
  
  
  
    6.     
     
  •  

    • 這里使用了hero__wrapper類，因為該wrapper可能僅是針對hero部分定制的，因此它可以具有一定的寬度，該寬度小于通用的wrapper元素。

         
 
 
 
      
      
  
  
  
    1. .hero__wrapper { 
      2. 
      
  
  
  
    2.     max-width: 720px; 
      3. 
      
  
  
  
    3.     margin-left: auto; 
      4. 
      
  
  
  
    4.     margin-right: auto; 
      5. 
      
  
  
  
    5.     padding-left: 16px; 
      6. 
      
  
  
  
    6.     padding-right: 16px; 
      7. 
      
  
  
  
    7. } 
      8.

    為了使內(nèi)容居中，可以根據(jù)具體情況使用具體的屬性。對于此示例，使用text-align:center足以使內(nèi)容居中。

    對wrapper使用 CSS 變量

    只用一種尺寸的wrapper很少。wrapper的寬度可以小也可以大，具體取決于內(nèi)容。通過利用 CSS 變量，我們可以創(chuàng)建一個更現(xiàn)代的wrapper，它擁有極大的靈活性?？紤]以下內(nèi)容：
      
         
 
 
 
      
      
  
  
  
    1. .wrapper { 
      2. 
      
  
  
  
    2.     max-width: var(--wrapper-width, 1170px); 
      3. 
      
  
  
  
    3.     margin-left: auto; 
      4. 
      
  
  
  
    4.     margin-right: auto; 
      5. 
      
  
  
  
    5.     padding-left: 16px; 
      6. 
      
  
  
  
    6.     padding-right: 16px; 
      7. 
      
  
  
  
    7. } 
      8.

    var有兩個值，第一個值是變量--wrapper-width，第二個值是1170px，如果未設置--wrapper-width變量，則將使用1170px。

    當然，我們可以直接在標簽內(nèi)對 --wrapper-width 進行賦值，這樣就能動態(tài)設置我們想要的值。
     

     

    如果你不使用 CSS 變量的方式，也可以通過多加一個類來解決：
      
         
 
 
 
      
      
  
  
  
    1. .wrapper--small { 
      2. 
      
  
  
  
    2.     --wrapper-width: 720px; 
      3. 
      
  
  
  
    3.     /* this will override the default wrapper width. */ 
      4. 
      
  
  
  
    4. } 
      5.

    使用 display: contents

    首先，簡要介紹一下這個屬性。CSS中的每個元素都是一個盒子，該盒子包含content、padding、margin和border。display: contents樣式規(guī)則使div元素不產(chǎn)生任何邊界框，因此元素的margin、border和padding部分都不會渲染。然而，繼承的屬性如顏色(color)和字體(font)卻能照常影響到子元素。

         
 
 
 
      
      
  
  
  
    1.  
      2. 
      
  
  
  
    2.      
      3. 
      
  
  
  
    3.              
      4. 
      
  
  
  
    4.      
      5. 
      
  
  
  
    5.  
      6. 
      
  
  
  
    6. .site-header__wrapper { 
      7. 
      
  
  
  
    7.     display: flex; 
      8. 
      
  
  
  
    8.     flex-wrap: wrap; 
      9. 
      
  
  
  
    9.     justify-content: space-between; 
      10. 
      
  
  
  
    10. } 
      11.

    在上面的示例中，你可能需要讓標題擴展到整個頁面的寬度，而不是受wrapper寬度的限制。

         
 
 
 
      
      
  
  
  
    1. .site-header__wrapper { 
      2. 
      
  
  
  
    2.     display: contents; 
      3. 
      
  
  
  
    3. } 
      4. 
      
  
  
  
    4.  
      5. 
      
  
  
  
    5. .site-header { 
      6. 
      
  
  
  
    6.     display: flex; 
      7. 
      
  
  
  
    7.     flex-wrap: wrap; 
      8. 
      
  
  
  
    8.     justify-content: space-between; 
      9. 
      
  
  
  
    9. } 
      10.

    這樣，.wrapper元素將被隱藏(類似)。現(xiàn)在，當將display:flex應用于.site-header元素時，.wrapper的后代項將成為.site-header的子項。

    流動背景，固定內(nèi)容

    Lea Verou 在她的《CSS Secrets》一書中介紹了一種有趣的技巧，該技巧可用于流動背景(占據(jù)整個視口寬度)且內(nèi)部帶有wrapper部分。讓我們回顧一下常見的做法。

         
 
 
 
      
      
  
  
  
    1.  
      2. 
      
  
  
  
    2.   
      3. 
      
  
  
  
    3.  
      4. 
     
 
 
 
         
 
 
 
      
      
  
  
  
    1. section { 
      2. 
      
  
  
  
    2.  background-color: #ccc; 
      3. 
      
  
  
  
    3. } 
      4. 
      
  
  
  
    4.  
      5. 
      
  
  
  
    5. .wrapper { 
      6. 
      
  
  
  
    6.  max-width: 1170px; 
      7. 
      
  
  
  
    7.  margin-left: auto; 
      8. 
      
  
  
  
    8.  margin-right: auto; 
      9. 
      
  
  
  
    9.  padding-left: 16px; 
      10. 
      
  
  
  
    10.  padding-right: 16px; 
      11. 
      
  
  
  
    11. } 
      12.

    margin-left: auto和margin-right: auto的工作方式是計算視口寬度的一半減去內(nèi)容寬度。使用padding也可以做到。

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

    這樣還有問題，在移動設上內(nèi)容將粘貼備的邊緣，一種解決方案如下：

         
 
 
 
      
      
  
  
  
    1. section { 
      2. 
      
  
  
  
    2.   padding: 1rem; 
      3. 
      
  
  
  
    3. } 
      4. 
      
  
  
  
    4.  
      5. 
      
  
  
  
    5. @media (min-width: 1170px) { 
      6. 
      
  
  
  
    6.  section { 
      7. 
      
  
  
  
    7.    padding: 1rem calc(50% - 585px); 
      8. 
      
  
  
  
    8.  } 
      9. 
      
  
  
  
    9. } 
      10.

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

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


    網(wǎng)頁標題：使用這種技巧，可以大大地提高前端布局效率
    當前地址：http://www.dlmjj.cn/article/cccoiop.html

    其他資訊