CSS其实远比我们想象的更复杂、他的任意一个点拿出来可能都可以写出一篇篇幅不小的文章，往往就能见微知著。所以CSS不仅仅局限于他的名字，层叠样式表，更像是一个世界，一个网页中必不可少的重要组成。 围绕着上面的CSS体系，当然上面的图可能还不够全面，但是也能说明CSS的主要构成了…

BEM规范是一种主流的css命名规范，BEM分别对应的是block ， element 和 modifier，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。 在BEM规范中，block（块）表示一个组件的意思，假设你要写一个按钮的组件，只需要设置一个 .button…

在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 当然，这种方法简单但是可能缺乏点用户体验。 我们先假设一下，我们的容器的宽度如果是固定的，但是不确定…

CSS变量又叫CSS自定义属性，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上CSS变量，可能其自身隐藏的魅力，让笔者对它刮目相看。 谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。 看完可能会觉得使用CSS变量的代…

1. 获取设备的真实开发分辨率（逻辑分辨率） 其实，对于开发来说，只需要了解三个概念。 物理分辨率，就是设备上标称的分辨率。 逻辑分辨率，开发时所用的分辨率。 设备像素比，物理分辨率和逻辑分辨率之比。 例如 iphone 6，它的物理分辨率是 750 x 1334，逻辑分辨率是…

经常就遇到有人说，用 Vue 做一个响应式的网站，用 Bootstrap 呢，还是用 Element-ui 或者 Ant Design Vue 还是其他的组件库。当然用 Vuetify 挺好的，但是有时候我们或者老板们不喜欢 Material Design 的设计。而且说实在的…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 …

flex-start：子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 baseline：如子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线…