#css

起因是因为觉得 v2ex 网站主题略有拥挤，阅读体验不好，而正好网站支持自定义 css，所以就在参考其他人的基础上，修改了一套比较美观的样式。 本来是自用的，但是看到有人发帖分享主题，我也索性将它分享出来了。 v2ex 帖子：[https://www.v2ex.com/t/851735](https://www.v2ex.com/t/851735) G

## 1.问题 >css 中使用动画属性会和同标签下的 fixed 属性冲突，导致定位失效，那么该如何解决他呢？ ## 2.分析 简单说一下问题产生的背景，昨天夜里我想给我的博客页面做一个简单的动画，浏览器刷新的时候从下往上渐现的效果，代码如下： ```css /* index-container 类名是页面的主体部分 */ .index-conta

我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题，某一篇文章想用 `iframe` 引入一个外链视频，但是大小总是有问题，宽度可以固定到 100% ，但是高度比如用实际高度来表示，比如 `100px`, `200px`，诸如此类。 但是问题来了，在不同的页面宽度下，视频的高度是一致的，就会导致一个很麻烦的问题， 看下面两个图， **pc 端**

```js $("#test").click(function () {     $('html,body').animate({ 'scrollTop': '0' }, 500,) }) ``` 这行代码使用的是 jquery 的写法，一个 500 毫秒的动画，这样写在 Chrome 浏览器等没问题，可以正常运行。 但是今天在写项目的过程中，要求代码

ps：先说点题外话，因为工作的原因很久没更新博客了，最近也是告一段落，处理一了一些事情之后可以安心坐下来，把我的博客重新整理一下。 今天要讲的是 css3 的一个新属性 `animation`，也算是一个回顾吧，我只是将平时如何使用，以及一些技巧分享出来。如果想学习更基础的内容，可以点击链接：[https://www.runoob.com/css3/css

最近正在面试，遇到了很多有意思的东西，比如今天，在面试前先做了一套面试题，其中有这么一道题，觉得挺有意思，之前也没见过，就打算记录下来： ```html <!-- Chrome 浏览器 12px 字体大小以下无法显示，均显示为 12px，应该怎么解决。 --> ``` 我确实有点蒙，在之前写代码的时候，没有遇到过这样的情况，不过既然这样问了，就得想出解决

在浏览掘金社区的时候，发现一个很有意思的小彩蛋，在个人主页将鼠标悬浮在头像上，会不停的加速旋转，我感觉挺有意思，f12 看看这个样式怎么写的，发现用到了 css3 的相关技术。 下面是具体代码，img 是头像元素，直接写在 hover 中即可。 ```css img:hover { transform: rotate(666turn); t

在某些段落中，页面要求文字只显示一行，但是`width`固定，而文字过长，就会出现一个需求，超过长度限制的文字被隐藏且显示省略号，css 支持这样的属性。 **单行文本溢出隐藏** ````css div{ overflow: hidden;   white-space: nowrap;   text-overflow: ellipsis; } ``