22个鲜为人知的CSS高招让你技高

白癜风在哪家医院治疗最好 http://m.39.net/pf/bdfyy/bjzkbdfyy/
今天我想告诉你一些在技术文献中也很少提到的CSS属性和值，但在我看来，它们对提高Web界面开发的速度和质量特别帮助。我今天与你讨论的许多特性都是实验性的。所有现代浏览器都支持它们中的大多数。但是，如果你决定在开发项目中使用这些属性中的任何一个，请自行了解查询下浏览器对它是否支持，虽然目前大多数属性，现代浏览器是支持的。那么，你准备好进入令人惊叹且几乎无边界的CSS世界了吗？让我们开始吧！1、grid+place-items这种技术允许你仅用两行代码水平和垂直对齐项目。

.parent{display:grid;place-items:center;}

place-items是justify-items和align-items的简写属性。

此属性可以一次应用于一个或多个（子）单元格。

.parent{display:grid;grid-template-columns:1fr1fr;place-items:center}

2、flex+margin

另一种水平和垂直对齐项目的现代方法是使用display:flex和margin:auto的组合。

.parent{display:flex;}.child{margin:auto;}

其实，使用以下代码段可以完成相同的效果：

.parent{display:flex;justify-content:center;align-items:center;}

3、flex+gap

既然我们在谈论Flexbox，值得一提的是，我们终于能够使用gap属性设置flex项之间的间隙（我们真的需要这个）：

.parent{display:flex;flex-wrap:wrap;gap:1em;}

4、inline-flex

此属性允许你创建具有Flexbox功能的内联元素。一个例子胜过我说很多话：

span??/spanspan??/spanspan??/spanspan??/span

body{margin:0;height:vh;display:flex;justify-content:center;align-items:center;gap:0.5em;background:#fbfbfb;}span{width:2.5em;height:2.5em;/*---*/display:inline-flex;justify-content:center;align-items:center;/*---*/background:#f1;border-radius:30%;box-shadow:01px2pxrgba(0,0,0,0.25);font-size:1.1rem;}

5、columns

此技术允许你将文本拆分为列。column-count属性指定列数，column-gap设置列间间隙的大小，column-rule设置列间垂直线的样式。

columns是column-count和column-width的简写属性。

pLoremipsumdolorsitametconsecteturadipisicingelit.Quisreprehenderitinventoreadliberoofficia,necessitatibuslaudantiumcorporisveniamquae,fugiatdoloresquaeratcorruptitemporeipsaconsequuntursimiliqueexplicaboducimus

转载请注明：http://www.aierlanlan.com/tzrz/5.html