当前位置：首页 > 科技观察

使用这些不常用的CSS属性，让我把前端布局的效率提升了一个档次！

时间：2023-03-13 19:28:15 科技观察

有很多CSS属性有些人不理解，或者他们理解了，但是在需要的时候忘了使用它们。其实有时候我们用JavaScript来实现某些交互，用CSS的一个属性就可以完成，可以大大节省我们的编码时间。作为前端开发者，我们经常会遇到这样的事情。所以我问自己，为什么不写一篇文章列出所有那些较少使用但有用且有趣的CSS属性？在这篇文章中，我将介绍一些不同的CSS属性，希望能给大家带来新鲜感，话不多说，让我们开始吧。使用CSSGrid中的Place-Items，我们只需两行CSS代码就可以将元素水平和垂直居中。HTML

CSSisawesome

是的，thisisaherosectionmadeforfun.

查看更多

CSS.hero{display:grid;place-items:center;}place-items是一个结合了justify-items和align-items的简写属性。上面的代码相当于下面的代码：.hero{display:grid;justify-items:center;align-items:center;}你可能想知道，这里到底发生了什么？让我们解释一下。使用place-items时，它将应用于网格中的每个单元格，这意味着单元格的内容将居中。如果我们再多加几个cell，就很清楚了：.hero{display:grid;grid-template-columns:1fr1fr;place-items:center;}flexbox和margin的结合是结合flexbox,margin使用的:auto可以很容易地水平和垂直居中弹性项目。html

css.parent{width:300px;height:200px;background:#ccc;display:flex;}.child{width:50px;height:50px;background:#000;margin:auto;}看起来有点酷😎列表的标记属性在此之前，我不知道每个li项目旁边的默认小圆圈叫做a标记。在认识::marker伪元素之前，如果我们要重新设置小圆列表样式，一般使用伪类::before或者::after伪元素：ul{list-style:none;padding:0;}li{color:#222;}li::before{content:"?";color:#ccc;margin-right:0.5em;}如上图

颜色为#222，伪-element::before是#ccc。如果

和::before具有相同的颜色，则小圆圈默认为li的颜色，因此根本不需要伪元素。我们来看一个更好的方法：li{color:#222;}li::marker{color:#ccc;}比起上面的伪类方法，这个简直不要太爽！text-align属性沿用了CSS随着flexbox和grid的日益流行，初学者一般使用它们来居中文本而不是使用text-align属性，但是，老方法仍然有效。使用text-align:center也可以快速修复，请考虑以下示例。如果只是内容需要居中的话，没必要用flexbox或者grid，但是用text-align会更简单。display:inline-flex属性当我们需要内联显示徽章列表，并且每个徽章应该是一个flexbox元素时，就需要inline-flex。HTML.badge{display:inline-flex;/*wherethemagichappens*/justify-content:center;align-items:center;}CSS的columns属性column-rule属性是一种将元素分列的布局方式。一个常见的用例是将段落文本内容分成两行。然而，最不常见的是我们可以在列之间添加边框。我从ManuelMatuzovic的一篇文章中学到了这个技巧。😍p{columns:3;column-rule:solid2px#222;}column-rule属性名可能不能体现其用途，但可以想象为类似于border-right。background-repeat:round我最近从AddyOsmani的推文中了解到这个值。background-repeat具有防止背景剪切的值。.element{background-size:contain;background-repeat:round;}厉害了，不就是😲object-fit属性object-fit属性还是蛮神奇的，好用的。当我第一次了解它时，它改变了很多事情，让我作为前端开发人员的生活变得更加轻松。最近，我正在处理一个显示徽标网格的部分。由于徽标大小不一致，这有时很难做到。其中一些具有水平形状，一些具有垂直形状。😒😵通过使用object-fit:contain，我可以控制徽标的宽度和高度，并强制图像包含在定义的宽度和高度内。😱😱HTML

cssimg{width:130px;height:75px;object-fit:contain;}通过定义宽高，图片的大小被强制限制，这是一个巨大的好处。更好的是，我们可以将上面的内容包装在@supports中，以避免在不支持对象适配的浏览器中拉伸徽标图像。@supports(object-fit:contain){img{object-fit:contain;height:75px;}}作者：Ahmadshaded译者：FrontendXiaozhi来源：sitepoint原文：https://ishadeed.com/article/common-css/本文转载自微信公众号“大招天下”，可通过以下二维码关注。转载本文请联系大千世界公众号。

上一篇：哄骗可以让GPT-3的准确率暴涨61%！谷歌&东京大学的研究震惊了所有人

下一篇：中国电信NB-IoT模组开启年度“首标”：信义信息如何摘得桂冠？

使用这些不常用的CSS属性，让我把前端布局的效率提升了一个档次！相关文章

最新推荐

猜你喜欢