使用这些 CSS 属性，布局效率又提升了一个层次！

做者：Ahmad shaded
译者：前端小智
来源：sitepoint

点赞再看，养成习惯

本文 GitHub https://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 Osmani的一条推文中了解了这种价值。 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="#">
            ![](img/logo.png)
        </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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。