![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 95
嗜码
公号『嗜码』作者
展开
-
CSS 属性 aspect-ratio
摘要:在响应式网页设计中,保持一致的宽高比,即所谓的长宽比,对于防止布局累积偏移至关重要。在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中推出了 aspect-ratio 属性,我们有了更直接的方法来实现这一目标。Aspect ratio长宽比最常见的表示方式是两个整数和一个冒号,尺寸为:宽:高,或x:y。摄影最常见的长宽比是4:3和3:2,而视频和最近的消费类相机则倾向于16:9的长宽比。随着响应式设计的出现,保持长宽比对Web开.原创 2021-02-01 18:05:09 · 19131 阅读 · 2 评论 -
CSS 中的 BEM 规范
BEM 规范BEM 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。规范默认有以下的几个约定:- 中划线:仅作为连字符使用-- 双中划线:表示不同状态或不同版本__ 双下划线:双下划线用来连接块和块的子元素.block {}.block__element {}.block--modifier{}其中.block 代表了更高级别的抽象或组件。.block__element 代表.block的后原创 2020-10-13 20:53:02 · 1219 阅读 · 0 评论 -
css Transfrom属性顺序问题: rotate() scale() 顺序不同导致效果不同
今天解 bug 时发现 transform 属性值的顺序会导致不同的效果。例如:.div1 { transform: scale(0.5, 1) rotate(45deg);}.div2 { transform: rotate(45deg) scale(0.5, 1)}上面的两个属性仅仅是调换了位置,却程现了不同的显示效果。写了一个 codeopen 的 demo。查阅后才发现,scale() 是对水平轴和垂直轴进行缩放,而 rotate() 会改变轴的方向。因此如果先旋转再进行原创 2020-07-22 20:50:14 · 953 阅读 · 0 评论 -
CSS 中的 transform-origin 属性
今天看到了 transform-origin 这个属性,不知道它的作用,遂总结整理一下。transform-origin CSS 属性可以让元素更改一个元素变形的原点,举个很简单的例子:<style>.outer { border: 1px solid red; margin-top: 50px;}.square { width: 100px; height: 100px; background-color: #aaaaaa; color: #fff; tr原创 2020-05-09 22:46:58 · 636 阅读 · 0 评论 -
如何设计一枚「拟态」按钮
如何设计一枚「拟态」按钮最近在微博上看到一款很好看的键盘皮肤????。这是一种被称作拟态化的设计,英文 Neumorphism /njʊ'mɔːfɪzəm/ 或者 Soft UI。拟态化设计是最近兴起的设计风格,是继拟物化设计、扁平化设计,下一个界面设计的趋势。最初起源于Dribble 用户 alexplyuto 分享的设计稿,之后一度成设计师的参考,也引领了一波设计潮流。可以看到,拟态设计...原创 2020-04-28 15:35:08 · 2600 阅读 · 0 评论 -
css中display属性区别
Display 属性区别display:block占据一整行,如果固定宽度,则会以margin的形式展现display: inline占据自己的一部分,设置padding对上下不生效display: inline-block占据自己的一部分,对padding生效display: none元素不显示,但是依然存在于dom文档流中...原创 2019-09-22 14:44:24 · 322 阅读 · 0 评论