关于javascript:使用这些-CSS-属性布局效率又提高了一个层次

42次阅读

共计 3244 个字符,预计需要花费 9 分钟才能阅读完成。

作者: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-itemsalign-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 也能够疾速解决问题,思考以下示例。

如果仅内容须要居中,不肯定非要应用 flexboxgrid,应用 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,我能够管制徽标的widthheight,并强制将图像蕴含在定义的宽度和高度中。????????

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;
}

通过定义 widthheight,强制限定图像的大小,这是一个微小的益处。更好的是,咱们能够将以上内容包装在 @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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。

正文完
 0