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

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

成都创新互联公司专注于雨山网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供雨山营销型网站建设，雨山网站制作、雨山网页设计、雨山网站官网定制、小程序开发服务，打造雨山网络公司原创品牌,更为您提供雨山网站排名全网营销落地服务。

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

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

在CSS网格中使用Place-Items

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

HTML

   
 
 
 
    
    
  
  
  
  1.  
    2.     
  
  
  
  2.      
    3.     
  
  
  
  3.         
    CSS is awesome
     
    4.     
  
  
  
  4.         
    Yes, this is a hero section made for fun.
     
    5.     
  
  
  
  5.         See more 
    6.     
  
  
  
  6.     
 
  •  

    CSS

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

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

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

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

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

    Flexbox 与 margin 的配合

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

    html

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.     
     
  •  

    • css

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

    看起来有点酷

    列表的 marker 属性

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

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

    如上所示

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

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

     
 
 
 
      
  
  
  
  
    1. li { 
      2.   
  
  
  
    2.     color: #222; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. li::marker { 
      6.   
  
  
  
    6.     color: #ccc; 
      7.   
  
  
  
    7. } 
      8.

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

    text-align 属性

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

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

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

    display: inline-Flex 属性

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

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .badge { 
      6.   
  
  
  
    6.     display: inline-flex; /* where the magic happens */ 
      7.   
  
  
  
    7.     justify-content: center; 
      8.   
  
  
  
    8.     align-items: center; 
      9.   
  
  
  
    9. } 
      10.

    CSS 的columns 属性

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

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

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

    background-repeat: round

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

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

    太神奇了，是不是

    object-fit 属性

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

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

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.          
      4.   
  
  
  
    4.              
      5.   
  
  
  
    5.          
      6.   
  
  
  
    6.     
      7.    
  
  
  
    7.     
    8.   
      9.    
  
  
  
    9.  
      10.

    css

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

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

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

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

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

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

    网页名称：使用这些不太常用的CSS属性，让我在前端布局效率上，又提高了一个层次！
    网页地址：http://www.zyruijie.cn/qtweb/news47/7847.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    外贸网站建设知识

    行业网站建设

    成都小程序开发　　 　成都钢筋机械设备　　 　东方电机技改　　 　腾讯云香港空间　　 　资阳网站建设　　 　德阳服务器托管　　 　网站建设方案　　 　乐山服务器托管　　 　重庆网站营销　　 　成都营销型网站建设　　 　成都网站设计　　 　成都租用服务器　　 　成都app软件开发公司　　 　成都网站推广　　 　泸州叙永网站建设　　 　LED亮化工程　　 　成都网站建设流程　　 　瑞杰企业管理　　 　成都做商城网站　　 　买链接