css知识点:布局_CSS排除项目：减少无聊的布局

最新推荐文章于 2023-05-05 03:40:53 发布

daique1908

最新推荐文章于 2023-05-05 03:40:53 发布

阅读量256

点赞数

文章标签： css html html5 python css3

css知识点:布局

在本教程中，我们将探讨CSS排除。乍一看，CSS排除项看起来类似于CSS形状，因为它们将内容包裹在元素周围。但是，从技术上讲，它们具有不同的目的。

CSS Shapes Module定义了元素的真实形状，但是在元素浮动之前，内容不会环绕该形状。另一方面，CSS排除模块是专门为此设计的；允许内联内容环绕元素而不浮动元素，而不管元素的位置如何- absolute ， relative或fixed 。

物产

CSS排除模块引入了两个新的属性和值，即：

wrap-flow ：设置排除区域，以及内容应如何环绕它。
wrap-margin ：很明显，可以设置排除区域周围的边距或偏移量。

浏览器支持

值得注意的是，CSS Exclusions当前仅适用于Internet Explorer 10及更高版本，并且Edge再次展示了Microsoft如何推动Web浏览器领域的发展（我们也要感谢CSS Grid的发展）。目前，使用新属性时-ms-在它们之前加上-ms-前缀。

为了更好地理解CSS Exclusions的工作原理，我们准备了一个简单的起始页，其中包含几行内容和最后的头像。

这是网络上相当普遍的一种模式，所以让我们看看是否可以使用CSS Exclusions对其进行完善。假设您的浏览器支持“排除”，我们将针对以下结果：

使用CSS排除

首先，让我们将内容分为两列，并将头像图像放置在中心。不管如何安排布局，都可以使用CSS Flexbox，CSS Grid或使用float属性的“传统”方法。

从上面的图像中我们可以看到，头像图像已从文档流中删除，并位于内容的顶部，从而将其遮盖了。使用CSS排除项，我们可以强制内容在头像图像周围流动。

为此，我们将wrap-flow属性设置为头像，并将值设置为both 。

.avatar {
   -ms-wrap-flow: both; // Works in IE and Edge.
   wrap-flow: both; // Does't not work in any browser.
}

wrap-flow属性将.avatar设置为“排除区域”；没有内容应通过的区域。如下所示，内容现在流到头像图像的左右。

可能的值

其他可接受的值是start ， end ， maximum ， minimum和clear 。

第一个值start会将内容包装在排除区域的开头，但将区域的末尾留空。

.avatar {
   -ms-wrap-flow: start;
}

给定页面上的内容，结果将如下所示。

顾名思义， end值相反地起作用。它将内容包裹在排除区域的末尾。

.avatar {
   -ms-wrap-flow: end;
}

这给我们以下结果：

注意：排除区域的开始和结束由内容的书写方向决定。从右到左书写脚本的地方（例如阿拉伯语和希伯来语经常看到的地方），内容自动换行在排除区域的右侧开始并在左侧结束。

对于日语，从上到下书写时，内容从顶部开始包装，从底部开始包装。

第三可接受值是maximum 。

.avatar {
   -ms-wrap-flow: maximum;
}

它将内容包裹在排除区域周围，只要它在容器区域内找到较宽的空间即可。

minimum以相反的方式起作用。

.avatar {
   -ms-wrap-flow: minimum;
}

在这里，内容将流经排除区域周围可用的最窄空间。

最后一个值是clear 。

.avatar {
   -ms-wrap-flow: clear;
}

这与您已经很熟悉的浮点数clear非常相似，因为它将清除排除区域的右侧和左侧。因此，它仅允许内容流到排除区域的顶部和底部。

排除保证金

与CSS Shapes相似，CSS Exclusions Module还具有用于定义排除区域边缘的属性，即wrap-margin 。与margin属性不同， wrap-margin的值必须为正值。

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: -10px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

此外， wrap-margin属性不允许我们分别设置每侧（右，左，上和下）的边距。将来是否会引入此功能还有待观察。

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

设置好之后，我们应该在排除区域周围看到更多空白。

@支持

鉴于我们已将头像放置在内容上方，而不支持CSS Excludes，因此我们的布局杂乱无章。因此，明智的是考虑回退，并将相关样式包装在@supports规则中，如下所示：

.site-content .avatar {
  width: 180px;
  height: 180px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 80px;
}

/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
  .site-content .avatar {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -90px;
    -ms-wrap-margin: 50px;
    -ms-wrap-flow: both
  }
}