Web前端入门第 28 问：你知道使用率超过 50% 的 CSS 属性有多少吗？

截止发文， MDN 收录的 CSS 属性大约 135 个（不包括特定浏览器的属性，所有可合并的属性算作一个，比如 margin-left 和 margin-right 都记作一个属性）。

这些 CSS 属性中，老师傅也有见过的，用过的，也有没见过的，甚至都没听过的。

这些属性中有高频使用的，也有基本没用的，入门学习必先掌握高频使用的 CSS 属性，毕竟时间花在刀刃上。

Chrome 统计的 24 小时数据

根据 Chrome 的统计报告（目前只有过去24小时的数据），以点窥面也能大概知道哪些属性使用率最高，这些属性在学习中，有必要重点掌握。

2025年3月12日 CSS 属性超过 50% 使用率的统计数据如下，总数 98 个：

属性	24小时使用率	作用
width	93.0569%	设置元素的宽度。
display	92.5967%	设置元素的显示类型（如block, inline, none等）。
height	92.4519%	设置元素的高度。
padding	92.1537%	设置元素内容周围的内部间距。
position	91.9492%	设置元素的定位方式（如static, relative, absolute, fixed）。
margin	91.7931%	设置元素外部间距。
border	91.3030%	设置元素的边框。
color	90.5246%	设置文本颜色。
top	90.3624%	设置定位元素相对于其包含块的顶部位置。
background-color	90.3568%	设置背景颜色。
font-size	90.1405%	设置字体大小。
left	90.0981%	设置定位元素相对于其包含块的左侧位置。
margin-top	89.2561%	设置元素顶部的外部间距。
font-family	88.6809%	设置字体族。
font-weight	88.5308%	设置字体的粗细。
text-align	88.1626%	设置文本的对齐方式。
overflow	87.6311%	设置如何处理内容溢出元素框的情况。
background	87.5296%	设置背景的所有属性（简写）。
opacity	87.2332%	设置元素的透明度。
line-height	86.6366%	设置行高。
border-radius	86.1802%	设置边框圆角。
box-sizing	86.0064%	设置如何计算元素的宽度和高度。
z-index	85.5547%	设置元素的堆叠顺序。
cursor	85.0137%	设置鼠标指针在元素上的样式。
margin-left	84.2926%	设置元素左侧的外部间距。
text-decoration	84.1391%	设置文本的装饰（如下划线、删除线）。
margin-bottom	83.7742%	设置元素底部的外部间距。
right	83.6255%	设置定位元素相对于其包含块的右侧位置。
margin-right	83.5182%	设置元素右侧的外部间距。
transform	83.4085%	应用2D或3D转换。
max-width	82.5852%	设置元素的最大宽度。
vertical-align	82.5433%	设置元素的垂直对齐方式。
content	82.2682%	与::before和::after伪元素一起使用，设置内容。
box-shadow	81.9831%	设置元素框的阴影效果。
white-space	81.6994%	设置如何处理元素内的空白。
bottom	81.6986%	设置定位元素相对于其包含块的底部位置。
padding-left	81.3251%	设置元素左侧的内部间距。
padding-top	80.5716%	设置元素顶部的内部间距。
font-style	80.2592%	设置字体样式（如斜体）。
transition	79.8274%	设置元素从一种样式变化到另一种样式所需要的时间。
padding-right	79.6011%	设置元素右侧的内部间距。
min-height	79.4970%	设置元素的最小高度。
padding-bottom	79.1572%	设置元素底部的内部间距。
background-image	78.7527%	设置背景图像。
outline	78.4006%	设置元素周围的轮廓线。
align-items	78.0386%	设置弹性盒子子项的对齐方式（如果弹性盒子方向是交叉轴）。
min-width	77.9204%	设置元素的最小宽度。
justify-content	77.5037%	设置弹性盒子子项在主轴上的对齐方式。
float	77.3522%	设置元素是否浮动。
border-color	77.2816%	设置边框颜色。
visibility	76.8687%	设置元素的可见性。
border-bottom	76.7058%	设置元素底部边框。
background-position	75.6707%	设置背景图像的位置。
src	74.1053%	设置图像元素的来源地址。
border-top	73.3972%	设置元素顶部边框。
text-transform	73.1295%	控制文本的大小写。
flex-direction	72.9762%	设置弹性盒子主轴的方向。
background-size	72.8830%	设置背景图像的尺寸。
background-repeat	72.7808%	设置背景图像是否以及如何平铺。
max-height	72.5370%	设置元素的最大高度。
pointer-events	68.6552%	设置元素是否响应鼠标事件。
list-style	67.8753%	设置列表项的标记类型。
animation	67.8417%	设置动画效果。
overflow-y	67.6971%	设置如何处理内容在垂直方向上溢出元素框的情况。
border-width	67.5421%	设置边框的宽度。
flex-wrap	67.1105%	设置弹性盒子内子元素的换行方式。
user-select	66.8810%	控制用户是否可以选择页面上的文本。
-webkit-user-select	66.4369%	控制用户是否可以选择页面上的文本，但仅适用于Webkit内核的浏览器（如Chrome、Safari）
flex	66.3424%	弹性盒子模型的简写属性，用于同时设置flex-grow、flex-shrink和flex-basis。
letter-spacing	66.1451%	设置文本字符之间的间距。
font	66.1215%	字体属性的简写，可以同时设置字体样式、变体、粗细、大小/行高等。
-webkit-appearance	65.7443%	设置Webkit内核浏览器中元素的外观（如按钮、输入框等）。
text-overflow	65.0775%	当文本溢出包含元素时如何处理。
border-left	65.0300%	设置元素左边框的样式、宽度和颜色。
variable	64.4802%	通常指CSS变量（--*），用于定义可在整个文档中复用的值。
clear	64.2394%	控制元素是否允许其左右两侧浮动元素的影响。
overflow-x	64.1687%	设置当内容在水平方向上溢出元素框时如何处理。
webkit-font-smoothing	63.8561%	在Webkit内核浏览器中控制字体的抗锯齿处理。
border-right	63.6825%	设置元素右边框的样式、宽度和颜色。
fill	62.8034%	设置SVG图形填充属性。
-webkit-transform	62.6039%	用于在Webkit内核浏览器中设置元素的2D或3D转换。
border-style	62.4780%	设置元素所有边框的样式。
webkit-tap-highlight-color	60.9645%	设置Webkit内核浏览器中用户点击元素时的高亮颜色。
-webkit-transition	60.1390%	用于在Webkit内核浏览器中设置元素属性变化的过渡效果。
flex-grow	58.6169%	设置弹性盒子内子元素的放大比例。
-webkit-text-size-adjust	58.4831%	用于在Webkit内核浏览器中调整文本大小。
flex-shrink	57.4661%	设置弹性盒子内子元素的缩小比例。
word-wrap	57.4072%	设置如何处理长单词或URL地址的换行。
-webkit-box-sizing	57.1823%	用于在Webkit内核浏览器中设置元素的盒模型。
word-break	55.3881%	设置如何断开单词以适应其容器。
transform-origin	54.7700%	设置元素变换（旋转、缩放等）的原点。
border-top-right-radius	53.8141%	设置元素右上角边框的圆角半径。
clip	53.6230%	设置一个元素的裁剪区域。
border-top-left-radius	53.5167%	设置元素左上角边框的圆角半径。
border-bottom-right-radius	53.0683%	设置元素右下角边框的圆角半径。
border-bottom-left-radius	52.7435%	设置元素左下角边框的圆角半径。
gap	51.7953%	设置弹性盒子或网格布局中项目之间的间距。
align-self	51.2023%	允许单个弹性盒子子元素在交叉轴（垂直于主轴）上对其父元素进行对齐。

这些 CSS 属性在实际项目编码中，也确实属于高频使用，至于排名靠后的属性，可以从文章后面的链接里面获取。

总结

学习优先级，可聚焦 >50% 的高频属性，对 >20% 的属性保持了解。

高频属性是基础，中低频属性则需根据实际需求选择性掌握。

参考资料：https://chromestatus.com/metrics/css/popularity