共计 3244 个字符，预计需要花费 9 分钟才能阅读完成。
作者：Ahmad shaded
译者：前端小智
起源：sitepoint
点赞再看，养成习惯
本文
GitHubhttps://github.com/qq44924588… 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送 Star 和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。
最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。
github 地址：https://github.com/qq44924588…
有很多 CSS 属性，有些人不理解，或者他们理解它们，然而遗记在须要时应用它们。其实，有时候咱们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这能够大大节约咱们编码的工夫。
作为前端开发人员，咱们常常会遇到这样的事件。所以我问本人，为什么不搞篇文章列出所有那些较少应用但既有用又乏味的 CSS 属性？
在本文中，我将介绍一些不一样的 CSS 属性，心愿能给你带来点新鲜感，废话不多说，让咱们开始吧。
在 CSS 网格中应用Place-Items
咱们只需应用两行 CSS 代码就能够将元素程度和垂直居中。
HTML
<div class="hero">
<div class="hero-wrapper">
<h2>CSS is awesome</h2>
<p>Yes, this is a hero section made for fun.</p>
<a href="#">See more</a>
</div>
</div>CSS
.hero {
display: grid;
place-items: center;
}place-items是将 justify-items 和align-items联合在一起的简写属性。下面的代码等同于上面代码：
.hero {
display: grid;
justify-items: center;
align-items: center;
}你可能想晓得，这是怎么回事? 咱们来解释一下。当应用 place-items 时，它将利用于网格中的 每个单元格，也就是说单元格的内容都会居中。如果咱们多减少几个单元格就会很清晰明了：
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
}
Flexbox 与 margin 的配合
与 flexbox 联合应用，margin: auto 能够十分轻松地将 flex 我的项目程度和垂直居中。
html
<div class="parent">
<div class="child"></div>
</div>css
.parent {
width: 300px;
height: 200px;
background: #ccc;
display: flex;
}
.child {
width: 50px;
height: 50px;
background: #000;
margin: auto;
}看起来有点酷 ????
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
列表的 marker 属性
这前，我还不晓得每个 li 项旁边的默认小圆圈称为 marker。在我晓得::marker 伪元素之前，如果要重置 小圆圈 列表款式，咱们个别应用伪类 ::before 或::after伪元素：
ul {
list-style: none;
padding: 0;
}
li {color: #222;}
li::before {
content: "•";
color: #ccc;
margin-right: 0.5em;
}如上所示 <li> 色彩是 #222，而伪元素::before 是#ccc。如果 <li> 和::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
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>.badge {
display: inline-flex; /* where the magic happens */
justify-content: center;
align-items: center;
}column-rule 属性
CSS 的 columns 属性是一种布局办法，能够将元素划分为列。一个常见的用例是将段落文本内容分为两行。然而，最不常见的是咱们能够在列之间增加边框。我从是 Manuel Matuzovic 的文章中学到了这一技巧。????
p {
columns: 3;
column-rule: solid 2px #222;
}column-rule属性名称可能不能反映其用处，但能够将其设想为相似 border-right 作用。
background-repeat: round
我最近从 Addy Osman i 的一条推文中理解了这种价值。background-repeat 有一个值，能够避免背景裁剪。
.element {
background-size: contain;
background-repeat: round;
}太神奇了，是不是 ????
object-fit 属性
object-fit属性是相当神奇且有用的。当我第一次理解它时，它扭转了很多事件，使我作为前端开发人员的生存更加轻松。最近，我正在钻研显示徽标网格的局部。因为徽标大小不统一，因而有时很难做到这一点。其中一些具备程度形态，一些具备垂直形态。????????
通过应用 object-fit:contain，我能够管制徽标的width 和height，并强制将图像蕴含在定义的宽度和高度中。????????
HTML
<ul class="brands">
<li class="brands__item">
<a href="#">
</a>
</li>
<li> <!-- other logos --> </li>
</ul>css
img {
width: 130px;
height: 75px;
object-fit: contain;
}通过定义 width 和height，强制限定图像的大小，这是一个微小的益处。更好的是，咱们能够将以上内容包装在 @supports 中，以防止在不反对对象适配的浏览器中拉伸徽标图像。
@supports (object-fit: contain) {
img {
object-fit: contain;
height: 75px;
}
}代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://ishadeed.com/article/…
交换
文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。