原文戳这里👉：https://bemcss.com BEM 解决的问题css 的样式应用是全局性的，没有作用域可言。考虑以下场景： 场景一：开发一个弹窗组件，在现有页面中测试都没问题，一段时间后，新需求新页面，该页面一打开这个弹窗组件，页面中样式都变样了，一查问题，原来是弹窗组件和该页面的样式相互覆盖了，接下来就是修改覆盖样式的选择器…又一段时间，又开发新页面，每次为元素命名都心惊胆战，求...

-webkit- 前缀：浏览器厂商会在 CSS 属性或值前加一个私有的前缀来支持新属性，带有此前缀的属性或值能够在以 WebKit 为内核的浏览器中正常使用。以 WebKit 为内核的浏览器代表有 Safari 和 Chrome。 fill-available：它会自动计算元素的宽度和高度，使元素的尺寸撑满其父元素的可用空间，这个属性通常用于解决某些布局问题。 下面是一个使用 -webkit...

只提供核心代码，多余代码已被省去。 padding适用于 parent 的高度不确定的情况 12345.parent { padding: 20px 0;}.child {} flex1234567.parent { display: flex; justify-content: center; align-items: cente...