使用这些不太常用的 CSS 属性,让我在前端布局效率上,又提高了一个层次!

开发 前端
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们。其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间。

有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们。其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间。

作为前端开发人员,我们经常会遇到这样的事情。所以我问自己,为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性?

在本文中,我将介绍一些不一样的CSS属性,希望能给你带来点新鲜感,废话不多说,让我们开始吧。

在CSS网格中使用Place-Items

 

我们只需使用两行 CSS 代码就可以将元素水平和垂直居中。

HTML

  1. <div class="hero"
  2.     <div class="hero-wrapper"
  3.         <h2>CSS is awesome</h2> 
  4.         <p>Yes, this is a hero section made for fun.</p> 
  5.         <a href="#">See more</a> 
  6.     </div> 
  7. </div> 

 

CSS

  1. .hero { 
  2.     display: grid; 
  3.     place-items: center; 

place-items是将justify-items和align-items结合在一起的简写属性。上面的代码等同于下面代码:

  1. .hero { 
  2.     display: grid; 
  3.     justify-items: center; 
  4.     align-items: center; 

你可能想知道,这是怎么回事? 我们来解释一下。当使用place-items时,它将应用于网格中的每个单元格,也就是说单元格的内容都会居中。如果我们多增加几个单元格就会很清晰明了:

  1. .hero { 
  2.     display: grid; 
  3.     grid-template-columns: 1fr 1fr; 
  4.     place-items: center; 

 

Flexbox 与 margin 的配合

 

与flexbox 结合使用,margin: auto 可以非常轻松地将 flex 项目水平和垂直居中。

html

  1. <div class="parent"
  2.     <div class="child"></div> 
  3. </div> 

 

 

 

css

  1. .parent { 
  2.     width: 300px; 
  3.     height: 200px; 
  4.     background: #ccc; 
  5.     display: flex; 
  6.  
  7. .child { 
  8.     width: 50px; 
  9.     height: 50px; 
  10.     background: #000; 
  11.     margin: auto; 

看起来有点酷 😎

列表的 marker 属性

 

这前,我还不知道每个li项旁边的默认小圆圈称为marker。在我知道::marker伪元素之前,如果要重置小圆圈列表样式,我们一般使用伪类::before或::after伪元素:

  1. ul { 
  2.     list-style: none; 
  3.     padding: 0; 
  4.  
  5. li { 
  6.     color: #222; 
  7.  
  8. li::before { 
  9.     content: "•"
  10.     color: #ccc; 
  11.     margin-right: 0.5em; 

如上所示<li>颜色是#222,而伪元素::before是#ccc。如果<li>和::before具有相同的颜色,那么小圆圈默认颜色就是 li 的颜色,因此根本不需要伪元素。

我们来看一种更好的方法:

  1. li { 
  2.     color: #222; 
  3.  
  4. li::marker { 
  5.     color: #ccc; 

比起上面伪类的方式,这简直不要太爽!

text-align 属性

随着CSS flexbox和 grid 的日益普及,初学者一般也是使用它们来居中文本,而不是使用text-align属性,但是,旧方法仍然有效。

使用text-align:center 也可以快速解决问题,考虑以下示例。

 

如果仅内容需要居中,不一定非要使用flexbox或grid,使用text-align反而会更简单。

display: inline-Flex 属性

 

当我们需要以为内联的方式显示徽章列表,并且每个徽章都应该是一个flexbox元素,这时就需要 inline-flex 出场了。

HTML

  1. <span class="badge"><svg></svg></span> 
  2. <span class="badge"><svg></svg></span> 
  3. <span class="badge"><svg></svg></span> 
  4. <span class="badge"><svg></svg></span> 
  5. .badge { 
  6.     display: inline-flex; /* where the magic happens */ 
  7.     justify-content: center; 
  8.     align-items: center; 

 

CSS 的columns 属性

column-rule 属性是一种布局方法,可以将元素划分为列。一个常见的用例是将段落文本内容分为两行。但是,最不常见的是我们可以在列之间添加边框。我从是 Manuel Matuzovic的文章中学到了这一技巧。😍

  1. p { 
  2.     columns: 3; 
  3.     column-rule: solid 2px #222; 

column-rule属性名称可能不能反映其用途,但可以将其想象为类似border-right作用。

background-repeat: round

 

我最近从Addy Osmani的一条推文中了解了这种价值。background-repeat有一个值,可以防止背景裁剪。

  1. .element { 
  2.  background-size: contain; 
  3.  background-repeat: round; 

太神奇了,是不是 😲

object-fit 属性


 

 

object-fit属性是相当神奇且有用的。当我第一次了解它时,它改变了很多事情,使我作为前端开发人员的生活更加轻松。最近,我正在研究显示徽标网格的部分。由于徽标大小不一致,因此有时很难做到这一点。其中一些具有水平形状,一些具有垂直形状。😒😵

通过使用object-fit:contain,我可以控制徽标的width和height,并强制将图像包含在定义的宽度和高度中。😱😱

HTML

  1. <ul class="brands"
  2.     <li class="brands__item"
  3.         <a href="#"
  4.             <img src="img/logo.png" alt=""
  5.         </a> 
  6.     </li> 
  7.     <li> <!-- other logos --> </li> 
  8. </ul> 

css

  1. img { 
  2.     width: 130px; 
  3.     height: 75px; 
  4.     object-fit: contain; 

通过定义width和height,强制限定图像的大小,这是一个巨大的好处。更好的是,我们可以将以上内容包装在@supports中,以避免在不支持对象适配的浏览器中拉伸徽标图像。

  1. @supports (object-fit: contain) { 
  2.   img { 
  3.     object-fit: contain; 
  4.     height: 75px; 
  5.   } 

作者:Ahmad shaded 译者:前端小智 来源:sitepoint

 

原文:https://ishadeed.com/article/common-css/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2019-06-21 08:39:23

SQLmysql索引

2021-12-08 12:50:39

代码MyBatisJava

2012-05-02 11:09:38

无线网络数据传输

2012-05-02 12:39:31

无线网络多跳无线网络数据传输

2021-07-28 14:35:09

代码进度条前端

2020-07-13 13:00:24

CSS变量技巧

2020-04-20 14:50:02

前端技巧优化

2019-12-10 09:47:51

IaaS云计算物联网

2020-08-28 10:22:26

前端布局效率

2023-11-22 08:26:03

HutoolJava工具集

2020-06-11 08:05:47

nginx线程池数据

2020-08-21 10:59:10

微软服务器运维

2020-06-12 14:44:06

线程池模式nginx

2023-12-26 17:18:13

darktable

2024-02-07 13:37:39

AWS系统应用程序

2020-10-10 11:35:10

IBMProject DebAI

2020-12-24 19:29:08

PCIntel芯片

2023-05-22 07:27:08

AI

2022-03-24 09:34:06

Bootstrap

2022-04-28 12:17:58

AI模型数据
点赞
收藏

51CTO技术栈公众号