乐趣区

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

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

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

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

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

wrapper 简介

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

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

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

咱们这里有 asidemain元素,它们被放在了 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-leftpadding-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 笼罩。为防止此类混同,倡议在这种状况下应用非简写格局。

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

<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 的版式款式元素,行的倡议字符数为 4575。超出该范畴的任何字符都会使浏览更加艰难。

为防止上述问题,能够应用 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 中的每个元素都是一个盒子,该盒子蕴含 contentpaddingmarginborderdisplay: contents款式规定使 div 元素不产生任何边界框,因而元素的 marginborderpadding局部都不会渲染。然而,继承的属性如色彩 (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: automargin-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。

退出移动版