移动web css布局_CSS排除简介：复杂Web布局的未来

移动web css布局

CSS布局从未像现在这样强大。 随着我们的布局梦想终于实现，濒临漂流，边缘魔法和所有脆弱伙伴的时代已经过去。 是否需要居中放置元素？ 容易小便。 想要粘贴页脚吗？ 没汗 如何实现类似杂志的布局？ 到达那里。

“ CSS排除项”是对我们的布局库的补充，它将成为另一个游戏规则改变者，为我们渴望的任何复杂布局方案提供帮助。 在本文中，我将向您介绍CSS排除功能，并说明如何提高您的声音以供浏览器采用，以帮助将来取得进步。

等等-还没准备好！

就像标题中所说的那样，截至撰写本文时的规范尚未得到完全采用。 IE10 +和Edge 12+是当前的开拓者。 这清楚地展示了Microsoft如何通过参与并愿意尝试来推动Web向前发展（如果您还记得的话，我们要感谢他们感谢CSS Grid的发展）。

当然，有些文章轻声暗示这是浪费时间，甚至是白日梦，但我现在要说的是（并继续）我们作为开发人员的助手，帮助我们进行导航，并引导浏览器走上主动性和革新。 我们的浏览器比以往任何时候都更好，它们所在的社区也同样提供支持。

现在是超越浏览器之战的时候了 ，它的开始是通过邮件列表，文章，问题跟踪器和可以表达您观点的任何其他渠道来表达您的声音。 我希望我在该主题上的文章有助于进一步推广，并使人们意识到我们作为Web开发人员社区希望实现此功能。

什么是CSS排除项？

好吧，准备一些词汇。 “排除”通过定义一个“排除区域”开始其生命，“排除区域”有助于包含块的“包装上下文”。 结果，排除影响包含块的后代的布局。 它定义了内联内容可以围绕的周围区域，并且可以在任何CSS块级元素上进行定义。 可以认为排除项比CSS形状更强大，因为它们不仅限于浮点数。

还在跟上吗？ 让我们尝试并更好地理解W3C的人们所说的“包装环境”和“排斥区域”的含义。

禁区

排除区域是不是float的块级元素，它会生成一个“排除框”。 排除元素建立新的块格式上下文，并定义内联内容如何在元素周围流动。 它还将内容的浮点包装能力扩展到任何块级元素。

当一个元素成为排除对象时，内联内容将包裹在排除区域周围，但位于它们自己的格式设置上下文中。 如果该元素是排除对象，则不会环绕其自身的排除区域。

多个排除项的顺序由z-index属性控制。 可以使用我们当前可以使用的任何选项（ relative ， absolute ， static ， fixed等）来定位排除项。 同样要记住，如果您浮动一个元素，它就不能成为排除对象。

包装上下文

到目前为止，我们已经多次提到“ 包装上下文 ”，并且在网上可以找到很多复杂的定义，但是到底是什么呢？ 可以将其视为保存内联流内容和排除区域的父容器。

包装流

排除项以wrap-flow属性开始，当使用auto以外的任何其他值定义时，该属性就会生效。 有迹象表明，可以给它的值，如极少数both ， start ， end ， minimum ， maximum ，并clear所有的行为不同相对于上下文。

如果您的浏览器不支持CSS排除功能，则以下是在支持以下内容的浏览器中的屏幕截图：

正如您将在上面的演示中看到的那样， wrap-flow有助于确定内联内容所围绕的区域。 该内容可以以几种不同的方式流动。 让我们更具体地介绍每一个，为清晰起见，提供一些屏幕截图：

• None ： None创建排除。
• auto ：不创建排除项。 内联流内容照常与元素交互。
• both ：内联流内容可以在排除的所有方向上流动。
• start ：内联流内容只能在排除区域的起始边缘周围流动，但是末端边缘是不流动区域。

• end ：内联流内容只能在排除区域的末端边缘周围流动，但是起始边缘是不流动区域。

• minimum ：内联流内容只能在可用空间较少的情况下在边缘周围流动，而将另一条边缘留空。

• maximum ：内联流内容只能在具有更多可用空间的边缘上流动，而使另一边缘留空。

• clear ：沿着内联方向，没有任何东西沿着排除项的开始和结束边缘流动。

直通

此属性控制要在排除区域周围流动的内容的行为方式，并可以通过几种我稍后将要分享的不同方式进行控制（如果您的浏览器不支持排除功能，请使用屏幕截图）。

对于诸如标注文本或拉引号之类的情况，可以使用wrap-through属性，就像您在打印布局设计中看到的那样。

• wrap ：元素继承其父节点的包装上下文 。 它的后代内联内容环绕在元素外部定义的排除。

• none ：元素不继承其父节点的包装上下文 。 它的后代仅受元素内部定义的排除区域约束。

范围和层次

排除影响从排除的包含块下降的内联流内容。 排除也遵循我们默认习惯的典型绘画顺序。 排除规则与定义它们的文档顺序相反。

如果您的浏览器不支持以上演示，请使用以下屏幕截图：

最后一个排除项出现在所有其他排除项的顶部，因此它会影响所有其他先前排除项或同一包含块的后代元素的内联流内容。 z-index属性可用于更改定位的排除框的顺序。 静态定位的排除对象不受z-index属性的影响，因此遵循典型的绘制顺序。

功能查询支持

为了与其他不支持CSS排除项的浏览器配合使用，您可以使用CSS功能查询，也称为@supports 。 如果您不使用支持的浏览器，那么到目前为止，我们将在演示中使用这些功能。

@supports (-ms-wrap-flow: both) {
  .element {…}
}

离别的想法

目前，CSS排除不适用于clip-path因为Edge不支持此属性。 话说回来，如果CSS 得到了广泛的支持，则通过采用抽象和倾斜的形状而不是严格的矩形框，CSS排除功能将更加强大。 这是一个不幸的场景，因为我们无法测试早期实现以真正见证使用非矩形对象进行文字换行的功能。

定位要求还可能导致排除父对象之外的任何元素位于z-index之下或之上，这可能会引起问题，因为这是CSS排除的要求。 排除区域也不会意识到浏览器的视口，因此它们在收缩或扩展浏览器时不会做出响应。 这意味着任何定位的对象都有可能根据其定位上下文从屏幕上掉落。

我希望本文能鼓励您在不考虑当前状况的情况下接受此财产！ 我也希望它能向浏览器供应商发送信息，以了解当前的限制，以及我们希望由任何制造浏览器的人全面实现这一限制的愿望。 祝大家编码愉快！

链接与资源

• caniuse.com上的CSS排除项
• w3.org上的CSS3排除项
• CSS排除项：减少无聊的布局对Tuts +的无聊
• 排除方式有望像 CSS Tricks上功能更强大的网格友好浮动对象
• 陈慧晶与女王贝（Byy Bey）的CSS排除
• Rachel Andrew 撰写CSS排除规则和网格布局
• developer.mozilla.org上的CSS Shapes
  
• 克里斯汀·坎特雷尔（Christian Cantrell）编写的具有CSS区域和排除项的类似杂志的Web版面
  

翻译自: https://webdesign.tutsplus.com/tutorials/an-introduction-to-css-exclusions-the-future-of-complex-web-layout--cms-32366

移动web css布局