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

开发 前端
在布局中,对于每块功能的 DOM 结构,我们一般使用一个带有 wrapper 类元素把它包裹起来,让代码或者网页内容更易于阅读。为此,我们一般使用wrapper 或者container。在CSS 中使用wrapper可能有多种方式,这些方式中,有些会带来一些问题。

[[339687]]

在布局中,对于每块功能的 DOM 结构,我们一般使用一个带有 wrapper 类元素把它包裹起来,让代码或者网页内容更易于阅读。为此,我们一般使用wrapper 或者container。在CSS 中使用wrapper可能有多种方式,这些方式中,有些会带来一些问题。

在本文中,将介绍 CSS中 的 wrapper 布局,它们如何工作,如何使用它们以及何时不使用它们。请注意,在本文中,可能会提到wrapper 和container这两个术语,它们的含义相同。

wrapper 简介

当我们说到 wrapper 或container,实际上是指一组元素被包装或包含在另一个元素内。我们可以为 元素添加一个 wrapper类,这样我们就不用额外元素,如下所示:

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

但是,将 wrapper添加到元素是不切实际。 wrapper元素可以防止子项超出其边界。考虑下图:

 

我们这里有aside和main元素,它们被放在了wrapper 元素中。当然,.wrapper元素有一个宽度

  1. <div class="wrapper"
  2.     <aside>...</aside> 
  3.     <main>...</main> 
  4. </div> 

 

如果没有wrapper,子元素将粘附在屏幕的边缘。这可能会让用户非常恼火,尤其是在大屏幕上。

 

上图显示了当没有用wrapper进行包裹时元素是如何展开的,用户不应该体验这种行为。我们来解释一下背后的原因。

为什么页面上 wrapper 有必要的

通过多加一层 wrapper 布局,有很多好处:

  1. 使内容更具可读性。没有多加一层 wrapper,文本和图像之类的内容就可以拉伸以占据整个屏幕宽度。对于小屏幕,这似乎可以。但是,对于大屏幕,这是非常烦人的。
  2. 对设计元素进行分组可以更好地增加间距。
  3. 在没有wrapper的情况下,将设计元素划分为列是不容易完成的。

在CSS中实现 wrapper

目前我们已经了解了wrapper基础知识和优点,接下来我们来具体的看看在 CSS 如何使用它。

设置宽度

 

实现wrapper第一件事就是要确认它的宽度。而宽度如何这取决于 UI 的设计。一般来说,最常用宽度是1000px-1300px。例如,流行的框架Bootstrap使用1170px的宽度。

  1. .wrapper { 
  2.     width: 1170px; 

但是,不建议使用width属性,因为当屏幕尺寸小于1170像素时,会出现水平滚动。可以max-width 来解决这个问题。

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

我们还可以更简单点,仅使用 max-width。

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

现在有了宽度,我们可以将它居中 。

居中 wrapper

 

为了让 wrapper 居中,使用让左右外边距的值为 auto,如下所示:

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

根据 CSS 规范,下面是margin: 0 auto;的工作原理

如果'margin-left'和'margin-right'均为'auto',则它们的使用值相等。这会让元素相对于包含块的边缘水平居中。

这里我使用margin:0 auto,这基本上将顶部和底部的margin重置为零,并使其左侧和右侧为auto。使用此功能会有一些后果,这将在本文后面介绍。目前,建议使用简化版边距:

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

在左侧和右侧添加 padding

 

要考虑的重要事项是在左侧和右侧添加padding。当视口大小小于 wrapper 的最大宽度时,这将导致 wrapper 边缘粘在视口上。

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

通过添加padding,我们可以确保从左右两边得到一个16px的偏移量,即使视口的大小小于最大宽度。padding作为一种保护策略,避免在宽度不足时让 wrapper 粘在视口边缘。

使用百分比的 wrapper

我收到了有关使用百分比宽度(如max-width:90%)用于包装器而不是使用padding-left和padding-right的答复。

我经常可以到直接在 'wrapper' 使用百分比宽度,如max-width: 90%。而不是使用padding-left和padding-right。

 

在大屏幕上,宽度90%太大了,我们可以使用媒体查询来覆盖它。

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

使用百分比宽度,我们多添加了一个额外的步骤。通过使用固定的宽度值,我们可以轻松地避免此步骤。对应于这种方案,我们可以将width: 90%与max-width:1170px属性结合在一起。

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

这是一个有趣的方法,但我更喜欢自己添加padding,而不是依赖于百分比宽度。

Wrapper 的display类型

由于wrapper 是<div>,因此默认情况下它是块级元素。问题是,当要将wrapper内的内容放置在grid中时,该怎么办?我们直接在 wrapper 上添加 display: grid ?

 

我不建议您这样做,因为这与关注点分离的概念背道而驰。wrapper用于包裹其内容,仅此而已。如果需要使用grid布局,则在多添加一层

专门用来 grid 布局会更容易也更清晰还容易维护。

  1. <div class="wrapper">  
  2.     <!-- Content -->  
  3. </div>  

 

 

 

不建议这样做,因为wrapper元素可以在另一页上使用,这可能会无意间破坏布局。

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

更好的解决方案如下:

  1. <div class="wrapper"
  2.     <div class="featured-news"
  3.         <!-- Elements that needs to be placed in a grid --> 
  4.     </div> 
  5. </div> 
  1. .featured-news { 
  2.     display: grid; 
  3.     grid-template-columns: 2fr 1fr; 
  4.     grid-gap: 16px; 

在 wrapper 之间添加 margin

上面我们说到不建议使用简写版本来居中wrapper 元素:

  1. .wrapper {  
  2.     margin: 0 auto; 

虽然它可以工作,但当页面上有多个wrapper ,并且需要在它们之间添加间距时,它可能会令人困惑。由于布局需要,我们需要在 wrapper 上多添加一个类,如 wrapper-variation,那么margin有可能无法正常工作。

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

.wrapper-variation元素的margin无法使用,因为它已被margin: 0 auto覆盖。为避免此类混淆,建议在这种情况下使用非简写格式 。

现在让我们来添加页边距。在每个项目中,我都准备了一组用于margin和padding的实用工具类,在必要时使用它们,考虑下图。

  1. <div class="wrapper mb-5"></div> 
  2. <section
  3.     <div class="wrapper"></div> 
  4. </section
  5. <div class="wrapper"></div> 
  1. .mb-5 { 
  2.     margin-bottom: 3rem !important; 

这样,wrapper 的 CSS保持原样,并且使用附加的 CSS 类添加了间距。现在,你可能会问,为什么可以在一个页面上添加多个wrapper?在上面的HTML中,两个wrapper之间有一个<section>

元素。

 

在这里使用!important很好,因为实用程序类的要点是强制属性,通过添加!important,我们可以确保做到这一点。

全屏中的 Wrapper

在某些情况下,如果某个部分的背景视口宽度为100%,并且其中包含wrapper`,则可能会出现这种情况。与上一个示例中介绍的类似。

  1. <section
  2.     <div class="wrapper"></div> 
  3. </section
  4. <section
  5.     <div class="wrapper"></div> 
  6. </section

 

 
 

 

 

 

的宽度是 100%。我们可以向其添加背景颜色或图像。在其中,wrapper可防止内容占据视口的整个宽度。

 

 

主内容需要添加 wrapper 吗?

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

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

 

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

 

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

内容居中

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

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

 

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

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

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

内容紧贴边缘

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

 

大屏幕的行长

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

 

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

  1. <section class="hero"
  2.     <div class="hero__wrapper"
  3.             <h2>How to make bread at home</h2> 
  4.             <p>...</p> 
  5.             <p><a href="/sign-up">Sign up</a></p> 
  6.     </div> 
  7. </section

 

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

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

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

对wrapper使用 CSS 变量

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

  1. <div class="wrapper"></div> 
  1. .wrapper { 
  2.     max-width: var(--wrapper-width, 1170px); 
  3.     margin-left: auto; 
  4.     margin-right: auto; 
  5.     padding-left: 16px; 
  6.     padding-right: 16px; 

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

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

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

 

 

 

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

  1. <div class="wrapper wrapper--small"></div> 
  1. .wrapper--small { 
  2.     --wrapper-width: 720px; 
  3.     /* this will override the default wrapper width. */ 

使用 display: contents

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

  1. <header class="site-header"
  2.     <div class="wrapper site-header__wrapper"
  3.             <!-- Header content --> 
  4.     </div> 
  5. </header> 
  6. .site-header__wrapper { 
  7.     display: flex; 
  8.     flex-wrap: wrap; 
  9.     justify-content: space-between

 

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

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

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

 

流动背景,固定内容

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

  1. <section
  2.  <div class="wrapper"></div> 
  3. </section
  1. section { 
  2.  background-color: #ccc; 
  3.  
  4. .wrapper { 
  5.  max-width: 1170px; 
  6.  margin-left: auto; 
  7.  margin-right: auto; 
  8.  padding-left: 16px; 
  9.  padding-right: 16px; 

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

 

 

 

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

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

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

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

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

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2020-07-13 13:00:24

CSS变量技巧

2021-11-17 16:24:23

JS 代码函数声明

2022-02-28 10:02:54

Linux技巧命令

2024-03-17 20:01:51

2013-01-08 16:05:23

Android开发布局ViewStub

2015-08-04 10:51:26

vim效率技巧

2023-11-27 18:01:17

MySQL技巧

2021-09-09 08:23:11

Vue 技巧 开发工具

2019-05-10 14:50:09

Java代码技巧

2009-12-22 19:14:36

WCF效率

2022-08-02 16:38:53

恶意软件密码

2022-09-05 14:17:48

Javascript技巧

2019-05-16 14:09:03

容器技巧开发

2023-04-26 18:09:32

人工智能AI

2020-03-18 15:54:41

开发效率代码

2015-11-02 17:11:38

RelProxyJava开发效率

2019-08-30 14:25:03

Vim命令Linux

2016-09-22 09:24:33

AndroidViewStub

2019-10-18 09:08:35

Vue组件验证码

2012-02-28 09:41:00

Linux管理效率技巧
点赞
收藏

51CTO技术栈公众号