使用这个技巧可以大大提高前端布局的效率

如果没有wrapper，子元素会粘在屏幕边缘。这对用户来说非常烦人，尤其是在大屏幕上。上图显示了元素在未使用包装器包裹时如何扩展，用户不应体验到这种行为。让我们解释一下背后的原因。为什么页面上的包装器是必要的？通过添加额外的包装器布局层，有很多好处：使内容更具可读性。如果不添加额外的包装层，文本和图像等内容可以拉伸以占据屏幕的整个宽度。对于小屏幕，这似乎没问题。然而，对于大屏幕来说，这是非常烦人的。分组设计元素允许更好的间距。如果没有包装器，将设计元素分成几列是不容易的。在CSS中实现wrapper现在我们已经了解了wrapper的基础知识和优点，让我们来看看如何在CSS中使用它。设置宽度实现包装器的第一件事是确认它的宽度。宽度取决于用户界面的设计。一般来说，最常用的宽度是1000px-1300px。例如，流行的框架Bootstrap使用1170px的宽度。.wrapper{width:1170px;}但是不推荐使用width属性，因为当屏幕尺寸小于1170px时，会出现横向滚动。您可以使用max-width来解决这个问题。.wrapper{宽度：1170px；max-width:100%;}我们也可以更简单，只使用max-width。.wrapper{max-width:1170px;}现在我们有了宽度，我们可以将它居中。Centerwrapper为了使wrapper居中，将左右边距的值设为auto，如下图：.wrapper{max-width:1170px;margin:0auto;}根据CSS规范，以下是margin:0auto;的实现方式有效如果'margin-left'和'margin-right'都是'auto'，它们使用相同的值。这将使元素相对于包含块的边缘水平居中。我在这里使用margin:0auto，它基本上将顶部和底部边距重置为零，并使左右自动。使用此功能会产生一些后果，本文稍后将对此进行描述。目前推荐使用简化版的边距：.wrapper{max-width:1170px;左边距：自动；margin-right:auto;}Addpaddingontheleftandright重要的事情要考虑在左边和右边Addpaddingtotheside。当视口大小小于包装器的最大宽度时，这将导致包装器边缘粘在视口上。.wrapper{最大宽度：1170px；左边距：自动；右边距：自动；左填充：16px；padding-right:16px;}通过添加padding，我们可以确保左右偏移量为16px，即使视口的尺寸小于最大宽度。填充用作一种保护策略，以避免在宽度不足时包装器粘在视口的边缘。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。使用百分比的包装器我收到了关于使用百分比宽度（如最大宽度：90%）作为包装器而不是padding-left和padding-right的回复。我经常可以直接在“包装器”中使用百分比宽度，例如max-width:90%。而不是使用padding-left和padding-right。在大屏幕上，90%的宽度太大了，我们可以使用媒体查询来覆盖它。.wrapper{最大宽度：90%；左边距：自动；margin-right:auto;}/*大屏幕的媒体查询*/@media(min-width:1170px){.wrapper{max-width:1170px;}}使用百分比宽度，我们添加了一个额外的步骤。我们可以通过使用固定宽度值轻松避免这一步。对应这个方案，我们可以把width:90%和max-width:1170px属性组合在一起。.wrapper{宽度：90%；最大宽度：1170px；左边距：自动；margin-right:auto;}这是一种有趣的方法，但我更喜欢自己添加填充而不是依赖百分比宽度。Wrapper的显示类型由于wrapper是