随笔分类 -  CSS

CSS
为什么设置动画 translateX 比 left 更流畅？
摘要：提问 被问到怎么设置一个从左到右的动画？我回答了设置 key-frame 的动画名，加上 from 和 to 去设置 left 属性的变化。 追问设置 left 是最好的选择吗？有更快更流畅的方案吗？我回答了 translateX。 然为什么 transform: translateX() 比 le 阅读全文
posted @ 2020-06-09 00:39 Ever-Lose 阅读(1326) 评论(0) 推荐(0)
说说 flex-shrink 属性的规则
摘要：问题 面试题：你能说说 flex-shrink 么？ 我们所知 flex 语法如下 flex: <flex-grow> <flex-shrink> <flex-basis> 并且可以有一些缩写 flex: 1 # 等效于 flex: 1 0 0 其中 flex-grow 比较好理解，但是 flex- 阅读全文
posted @ 2020-05-22 15:10 Ever-Lose 阅读(818) 评论(0) 推荐(0)
background 扩展属性详解
摘要：background 简写 多图片模式下的写法： 以前没有那么多新增属性的时候，简写就是： 后面多了css3后就应该是 其格式就是： 上文里的 `` 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 background origin 和 background clip。如果出现 2 阅读全文
posted @ 2020-04-07 12:03 Ever-Lose 阅读(464) 评论(0) 推荐(0)
css3 scale 缩放出现 1px 问题
摘要：问题描述 先来一段html代码 此刻效果是正常的一倍效果 接着加入container缩放 则会出现极细致的一条白色边，原因大概就是.parent元素的border和.son的height经过缩放后不会是整数，两个数值的小数点被省去不渲染，导致两者叠加起来和真正要的效果差1px，而让.parent的背 阅读全文
posted @ 2020-03-14 18:56 Ever-Lose 阅读(1299) 评论(2) 推荐(0)
去除 inline-block 元素间距
摘要：案例重现 布局时经常能发现inline元素和inline block元素水平呈现的元素间，会存在着一些意想不到的间距，举例： 由于换行和空格分割符的存在，行内元素间将被渲染为一个小间距了。 解决办法1 元素间移除空格和换行 这样看着仍旧不太舒服，尤其是项目里缩进层级深的时候 解决办法2 父元素设置 阅读全文
posted @ 2020-03-14 18:54 Ever-Lose 阅读(191) 评论(0) 推荐(0)
css 一行自适应等比例布局
摘要：一、浮动布局+百分比 该样式兼容性较好，但是无法实现当里面的列增多时比例也随着变化，必须手动修改，当然你也可以使用一个JS来调整了。 二、行内元素（inline block）+百分比 三、display:table + display:table cell 我们知道表格可以根据内容进行划分，CSS也 阅读全文
posted @ 2020-03-14 18:42 Ever-Lose 阅读(1513) 评论(0) 推荐(0)
background-attachment 制造视差滚动效果案例
摘要：简介 background attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个： scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background 阅读全文
posted @ 2020-03-14 18:39 Ever-Lose 阅读(453) 评论(0) 推荐(0)
等宽字体的妙用-loading 点点点动画
摘要：原理 ch等宽字体 + text indent 动画负缩进 显示效果如 loading... 代码 阅读全文
posted @ 2020-03-14 18:33 Ever-Lose 阅读(182) 评论(0) 推荐(0)
BFC块级格式上下文介绍
摘要：块级格式上下文（Block formatting context） 什么是BFC? 块格式化上下文（block formatting context） 是页面 CSS视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。 – MDN 块格式上下文 BFC是一个容器，在这个容器中的元素不 阅读全文
posted @ 2020-03-14 18:20 Ever-Lose 阅读(138) 评论(0) 推荐(0)
css3 HSLA 颜色制造半透明效果
摘要：简介 HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础 阅读全文
posted @ 2020-03-14 18:00 Ever-Lose 阅读(426) 评论(0) 推荐(0)
css reset 代码
摘要：直接抄 "postcss css reset" 代码吧。 pc mobile 阅读全文
posted @ 2020-03-14 17:40 Ever-Lose 阅读(368) 评论(0) 推荐(0)
CSS 文本截断方案
摘要：单行截断 此方法兼容到ie6过。不过只能单行。 多行截断 此方法webkit私有，并且使用flex布局，只得在移动端和高版本 webkit 系列浏览器使用。 多行截断2 利用浮动元素特性模拟最后的省略号。 兼容性好，对各大主流浏览器有好的支持。 响应式截断，根据不同宽度做出调整。 文本超出范围才显示 阅读全文
posted @ 2020-03-14 17:35 Ever-Lose 阅读(1459) 评论(0) 推荐(0)
CSS BEM 命名方式
摘要：简介 简易 css 命名方式，减小命名冲突，使得 css 更有组织感和识别感。但如今写 react 项目大多可以忽略对 css 的命名约束了。 官网介绍：http://getbem.com/introduction/ 释义 Block：具有独立意义的实体，就如 header, container, 阅读全文
posted @ 2020-03-14 17:30 Ever-Lose 阅读(184) 评论(0) 推荐(0)
盒模型里的滚动条算什么？
摘要：测试代码 盒模型图 和一般的盒模型不同，这里画上了滚动条，在 padding 的外侧。 滚动条测验 我们都知道 box sizing 为 content box 为标准模型，那么如果你写上了 ，那么显示效果如下： chrome 和 safari 一样，就是调试的控制台里显示的效果有些错位。 如果是 阅读全文
posted @ 2020-03-14 17:18 Ever-Lose 阅读(306) 评论(0) 推荐(0)
CSS 权重图
摘要：关系图 图片出处我找不到了。 结论 权重从高到低排序 并且注意第6点，类、伪类、属性选择器权重一致。 阅读全文
posted @ 2020-03-14 16:56 Ever-Lose 阅读(435) 评论(0) 推荐(0)
纯 css column 布局实现瀑布流效果
摘要：原理 CSS property: columns。CSS属性 columns 用来设置元素的列宽和列数。 兼容性 chrome 50+ IE 10+ android browser 2.1+ with webkit "MDN 文档" 效果 代码 心得 在过去本人还用 100+ 行代码写过 JS 版的 阅读全文
posted @ 2020-03-14 13:32 Ever-Lose 阅读(1212) 评论(0) 推荐(0)