html div层次感,使用这些 CSS 属性,布局效率又提高了一个层次!

本文介绍了CSS中一些不常用但非常有用的属性,如place-items用于网格居中,margin配合Flexbox实现居中,::marker伪元素控制列表样式,text-align属性快速居中文本,inline-flex布局徽章,column-rule在列间添加边框,background-repeat的round值防止背景裁剪,以及object-fit属性控制图像尺寸适应。通过掌握这些属性,可以提升前端开发的布局效率。
摘要由CSDN通过智能技术生成

作者:Ahmad shaded

译者:前端小智

来源:sitepoint点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

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

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

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

在CSS网格中使用Place-Items

bVbI4J2

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

HTML

CSS is awesome

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值