前端网页字体优化指南
摘要：日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能
阅读全文
posted @ 2021-07-15 10:39
随笔分类 - CSS
我的2018前端踩坑记
摘要：某著名小白说过 ：世上本来到处都是坑，只要走的人多了，也就把坑都给埋了。该小白还说过：坑本身并不可怕，可怕的是踩了一次之后，还第二、第三次踩到了相同的坑。 所谓"坑"，主要是由于我们对某些知识点理解不够透彻，导致在应用的时出现了一些奇怪的问题。因为我们每个人，对于某个知识点的理解程度不一样，所以，有
阅读全文
posted @ 2019-01-16 23:10
深入理解CSS选择器优先级
摘要：题外话 今天把 《CSS REFACTORING》（中文名叫《CSS重构：样式表性能调优》）电子书粗略的浏览了一遍，这本书很薄，150页左右，首先是介绍了什么是重构并举了两个简单的重构例子，然后介绍了CSS的选择器优先级，再然后介绍了CSS的最佳实践， 再然后就介绍如何重置浏览器的默认样式，最后比较
阅读全文
posted @ 2018-11-06 21:21
深入理解CSS系列（二）：为什么height:100%不生效？
摘要：对于 属性，如果父元素 为` auto position fixed absolute `，希望满屏显示黑色背景，就写了如下 代码： 然后他发现这个 高度永远是 0，哪怕其父级 塞满了内容也是如此。事实上，他需要加上这样的设置才行： 并且仅仅设置 也是不行的，因为此时的 也没有具体的高度值： 只要经
阅读全文
posted @ 2018-07-04 17:23
深入理解CSS系列（一）：理解CSS的盒子模型
摘要：接触前端也有好几个年头了，但是，讲实话，对于 的理解真的是不敢恭维，相信很多同行也有类似的感受吧！这是为什么呢？因为我们都认为 太简单了，没有必要深入学习，果真如此？其实，只不过是自己图样图森破罢了。如果真的那么简单，为什么经常会遇到一些奇怪的样式问题，而要折腾好长时间呢？就是因为无从下手，终究还是
阅读全文
posted @ 2018-07-03 20:52
CSS如何实现”右部宽度固定，左部自适应“的布局
摘要：吃过晚饭后，开始刷前端笔试题，却遇到了一道CSS难题——使用CSS实现左部自适应、右部固定宽度为200px的布局。当时第一眼看到题目时，以为只是一道很简单的题目。不就是定义两个左浮动的div，右部的宽度固定为200px，左部的宽度为100%，但是真的是那么简单吗？我当时信心十足的以为真的就是这么简单
阅读全文
posted @ 2016-03-12 22:06
CSS实现垂直居中的常用方法
摘要：在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。 首先，定义一个需要垂直居中的div元素，他的宽度和高度均为3
阅读全文
posted @ 2016-03-06 10:18
Sass&Compass学习笔记（一）
摘要：1.sass中可以使用变量 变量名以$符号开头，可包含所有可用作CSS类名的字符，包括下划线和中划线。 可见，中划线也是可以作为命名的字符，这是与很多其他语言的不同之处。变量的使用实例： $company-blue: #1875e7; h1#brand { color: $company-blue;
阅读全文
posted @ 2015-09-26 02:14
