随笔分类 -  CSS

摘要：前言 在 CSS 中，有很多需要反复使用的属性值，如果每个使用的地方都直接写死这个值，而没有使用变量去定义这个值的话，后期修改起来会很麻烦。有很多人忽略了在 CSS 中也可以定义变量这个事情，相信你会爱上它 ！ CSS 使用变量有很多好处: 可以减少样式代码的重复性，增加样式代码的扩展性和灵活性 声 阅读全文

摘要：背景：正常我们在修改样式的时候，直接在样式表里写死，但是如果我们想要动态的修改样式，例如el-input字体颜色时，我们需要修改的实际是.el-input__inner这个样式的color，既然是动态，我们就不能在样式表里写死了，而是使用CSS变量修改。 一、CSS变量是什么？ 1.css变量 注意 阅读全文

摘要：先来一个常见的案例，把一张图片和下方文字进行居中： 首先处理左右居中，考虑到img是一个行内元素，下方的文字内容也是行内元素，因此直接用text-align即可： 实际的效果如下： 火星 火星 这样做的问题是，直接在最外层的container设置一个text-align的属性，导致所有子元素都会继承 阅读全文

摘要：伪元素是一个好东西，但是很多人都没怎么用，因为他们觉得伪元素太诡异了。其实使用伪元素有很多好处，最大的好处是它可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。 1. 伪元素使用场景 伪元素一般是用于画图，特别是那种无关紧要的分隔线、点之类的小元素，如下图的 阅读全文

摘要：本文介绍使用css3的animation画一个太阳系行星公转的动画，再加以改进，讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例，最后结合css3的clip-path做一些比较特别的动画。 太阳系最终的效果图如下： css3的animation是通过关键帧的形式做出来的 阅读全文

摘要：如何实现一个三栏自适应布局，左右各100px，中间随着浏览器宽度自适应？ 第一个想到的是使用table布局，设置table的宽度为100%，三个td，第1个和第3个固定宽度为100px，那么中间那个就会自适应了，下面是一个实时的demo： 但是table布局是不推荐的，table布局是css流行之前 阅读全文

摘要：借用Effective之名，开始写Effective系列，总结一些前端的心得。 为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面 阅读全文