乐趣区

关于javascript:使用这种技巧可以大大地提高前端布局效率

jiezi

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

在布局中，对于每块性能的 DOM 构造，咱们个别应用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于浏览。为此，咱们个别应用 wrapper 或者 container。在 CSS 中应用wrapper 可能有多种形式，这些形式中，有些会带来一些问题。

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

wrapper 简介

当咱们说到 wrapper 或 container，实际上是指一组元素被 包装 或蕴含 在另一个元素内。咱们能够为 <body> 元素增加一个 wrapper类，这样咱们就不必额定元素，如下所示：

body {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

然而，将 wrapper增加到 <body> 元素是不切实际。wrapper元素能够避免子项超出其边界。思考下图：

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

<div class="wrapper">
    <aside>...</aside>
    <main>...</main>
</div>

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

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

为什么页面上 wrapper 有必要的

通过多加一层 wrapper 布局，有很多益处：

  1. 使内容更具可读性。没有多加一层 wrapper，文本和图像之类的内容就能够拉伸以占据整个屏幕宽度。对于小屏幕，这仿佛能够。然而，对于大屏幕，这是十分烦人的。
  2. 对设计元素进行分组能够更好地减少间距。
  3. 在没有 wrapper 的状况下，将设计元素划分为列是不容易实现的。

在 CSS 中实现 wrapper

目前咱们曾经理解了 wrapper 基础知识和长处，接下来咱们来具体的看看在 CSS 如何应用它。

设置宽度

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

.wrapper {width: 1170px;}

然而，不倡议应用 width 属性，因为当屏幕尺寸小于 1170 像素时，会呈现程度滚动。能够max-width 来解决这个问题。

.wrapper {
    width: 1170px;
    max-width: 100%;
}

咱们还能够更简略点，仅应用 max-width。

.wrapper {max-width: 1170px;}

当初有了宽度，咱们能够将它居中。

居中 wrapper

为了让 wrapper 居中，应用让左右外边距的值为 auto，如下所示：

.wrapper {
    max-width: 1170px;
    margin: 0 auto;
}

依据 CSS 标准，上面是 margin: 0 auto; 的工作原理

如果 ’margin-left’ 和 ’margin-right’ 均为 ’auto’，则它们的应用值相等。这会让元素绝对于蕴含块的边缘程度居中。

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

.wrapper {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

在左侧和右侧增加 padding

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

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

通过增加 padding，咱们能够确保从左右两边失去一个16px 的偏移量，即便视口的大小小于最大宽度。padding作为一种爱护策略，防止在宽度有余时让 wrapper 粘在视口边缘。

应用百分比的 wrapper

我收到了无关应用百分比宽度（如 max-width：90%）用于包装器而不是应用 padding-left 和 padding-right 的回答。

我常常能够到间接在 ‘wrapper’ 应用百分比宽度，如 max-width: 90%。而不是应用padding-left 和padding-right。

在大屏幕上，宽度 90% 太大了，咱们能够应用媒体查问来笼罩它。

.wrapper {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* A media query for a large screen */
@media (min-width: 1170px) {
    .wrapper {max-width: 1170px;}
}

应用百分比宽度，咱们多增加了一个额定的步骤。通过应用固定的宽度值，咱们能够轻松地防止此步骤。对应于这种计划，咱们能够将 width: 90% 与max-width：1170px属性联合在一起。

.wrapper {
    width: 90%;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

这是一个乏味的办法，但我更喜爱本人增加padding，而不是依赖于百分比宽度。

Wrapper 的 display 类型

因为 wrapper 是<div>，因而默认状况下它是块级元素。问题是，当要将wrapper 内的内容搁置在 grid 中时，该怎么办？咱们间接在 wrapper 上增加 display: grid？

我不建议您这样做，因为这与关注点拆散的概念南辕北辙。wrapper用于包裹其内容，仅此而已。如果须要应用 grid 布局，则在多增加一层 <div>专门用来 grid 布局会更容易也更清晰还容易保护。

<div class="wrapper">
    <!-- Content -->
</div>

不倡议这样做，因为 wrapper 元素能够在另一页上应用，这可能会无意间毁坏布局。

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

更好的解决方案如下：

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

在 wrapper 之间增加 margin

下面咱们说到不倡议应用简写版本来居中wrapper 元素:

.wrapper {margin: 0 auto;}

尽管它能够工作，但当页面上有多个 wrapper，并且须要在它们之间增加间距时，它可能会令人困惑。因为布局须要，咱们须要在 wrapper 上多增加一个类，如 wrapper-variation，那么margin 有可能无奈失常工作。

.wrapper-variation {margin-top: 50px;}

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

.wrapper-variation元素的 margin 无奈应用，因为它已被 margin: 0 auto 笼罩。为防止此类混同，倡议在这种状况下应用非简写格局。

当初让咱们来增加页边距。在每个我的项目中，我都筹备了一组用于 margin 和padding的实用工具类，在必要时应用它们，思考下图。

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

这样，wrapper 的 CSS 放弃原样，并且应用附加的 CSS 类增加了间距。当初，你可能会问，为什么能够在一个页面上增加多个 wrapper？在下面的 HTML 中，两个wrapper 之间有一个 <section> 元素。

在这里应用 !important 很好，因为实用程序类的要点是 强制属性，通过增加!important，咱们能够确保做到这一点。

全屏中的 Wrapper

在某些状况下，如果某个局部的背景视口宽度为 100%，并且其中蕴含wrapper`，则可能会呈现这种状况。与上一个示例中介绍的相似。

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

<section>的宽度是 100%。咱们能够向其增加背景色彩或图像。在其中，wrapper可避免内容占据视口的整个宽度。

主内容须要增加 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-heade r 元素时，.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);
    }
}

原文：https://ishaded.com/article/s…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版