一个 css 文件的核心内容是由许许多多的 css 规则组成的，而每个规则又包含了两部分：选择器和声明；声明块里可能又包含多个声明，每个声明又是由属性和值组成的。这个大概就是 css 的代码结构。

这么多的规则就像一个小镇上的房子一样，如果房子建造之初，毫无规划胡乱建造，那等房子建造起来的时候，从远远望去就会非常地错杂不堪，难以入目，给人的心里埋下了非常糟糕的印象；又可能后期，由于发展的需要，要给小镇加修道路或者新建个学校，由于房子与房子之间连接得很混乱，所以这给后期重建镇子的人带来了很大的困难。

同样，在 css 的世界里，代码的排列布局也是非常重要的。良好的代码书写习惯能够让代码看起来更加干净简洁，给阅读者一种赏心悦目的感觉；好的代码便于开发发现错误，提高工作效率。所以作为一名好前端，很有必要养成一个良好的 css 编码习惯。

要是问你，你知道当下都有哪些图像格式嘛？我猜你肯定说不全，因为现在图像格式真的太多了，但是应该能说出这几个常用的格式：jpg、gif、png和svg。然后我再问你，知不知道这几个格式有什么区别？各自的适用场景又是什么呢？logo应该是选择 svg 还是 png ？而截图是选 jpg 还是 png 好？在不生成过大文件的前提下，文件的最优质量是多少？了解每个图像格式的工作原理以及它们各自的利弊可以帮助回答这些问题。

在过去几年中，数字化设计和前端开发里大量的研究和测试工具已经帮助我们搞清楚了这些问题。在本文中，我将展示一下每种格式的工作原理，它们各自的优点以及在网页使用时的压缩与保存方法。

先来看几个概念

• 有损(Lossless)和无损(Lossy)：一般我们聊到图片的时候经常会听到别人提到有损或者无损的字眼，那么什么是有损和无损呢？无损就是图片在压缩保存后虽然占用的存储更小了，但是图像的呈现质量依然如旧；而有损则是相反，图像随着一次又一次的压缩后，质量会变得越来越差。
• 索引色(Indexed color)和直接色(Direct color)：按照不同的颜色深度可以将颜色分为索引色和直接色。索引色就是图像作者指定图片的用色总共不超过256种；而直接色则是对颜色使用没有限制，可以存在成千上万的颜色值。
• 光栅格式(raster)和矢量格式(vector)：图像根据信息的表示方式可以分为光栅图和矢量图。光栅图也叫作位图，点阵图或者像素图，图的最小单位是由一个个带颜色的像素组合而成，在 Photoshop 里把图片放到最大，将看到许许多多的像素方块，所以光栅图在伸缩的时候图像可能会失真；而矢量图则是以由点、线和一些几何图形为基础，通过数学计算来排列组合而成，这种图在伸缩的时候能完好的保护质量。

CSS 自定义属性，很多人又把它称之为 CSS 变量，是由用户自己定义的用来指定 CSS 属性值的变量。来看一个简单的例子：

1
2
3
4
5
6

:root {
    --color-red: red;
}
.red {
    color: var(--color-red);
}

上面这个例子中，首先在 :root(文档根元素即 html )处定义了一个全局变量，变量名称叫 color-red。然后在 red 元素里使用了这个变量，那么该元素颜色将变成红色。

flexbox 顾名思义 flexible box 弹性盒子，是 css3 中定义的一种新的布局方式。通过在某元素上使用 display: flex; 即可把该元素定义为 flex 容器 ( flex container )，而容器的所有子元素就是 flex 项目 ( flex item )。再介绍 flex 语法之前，先来看看一个重要的东西。

flex轴线

水平居中

• inline 或 inline-* 元素

  此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式：

  1 2 3

  .parent { text-align: center; }

• 块级元素

  块级元素水平居中，需要设置 margin-left 和 margin-right 为 auto，且需要显示设置宽度，不然就占满整行，就无所谓水平居中了。

  1 2 3 4

  .block { width: 300px; margin: 0 auto; }

chrome 浏览器是每个前端开发者最常用的浏览器，因为界面简洁友好，开发者工具功能强大且简单易用，大大提升了开发效率。所以很有必要了解 chrome 开发者工具都有哪些很常用或实用的功能。
写这篇文章的时候，chrome的版本如下：

什么是 CSS 特性检测？我们知道，前端技术日新月异的今天，各种新技术新属性层出不穷。在 CSS 层面亦不例外。

一些新属性能极大提升用户体验以及减少工程师的工作量，并且在当下的前端氛围下：

• 很多实验性功能未成为标准却被大量使用；
• 需要兼容多终端，多浏览器，而各浏览器对某一新功能的实现表现的天差地别；

所以有了优雅降级和渐进增强的说法，在这种背景下，又想使用新的技术给用户提供更好的体验，又想做好回退机制保证低版本终端用户的基本体验，CSS 特性检测就应运而生了。

CSS 特性检测就是针对不同浏览器终端，判断当前浏览器对某个特性是否支持。运用 CSS 特性检测，我们可以在支持当前特性的浏览器环境下使用新的技术，而不支持的则做出某些回退机制。

本文将主要介绍两种 CSS 特性检测的方式：

• @supports
• modernizr
• 用 javascript 进行特性检测

一个元素可以使用 background 来设置他的背景特性，background 是一个复合的属性，包括了 8 个子属性。

background-color

background-color 用于定义元素的背景颜色，值可以是具体的十六进制颜色值 #dedd6f，可以是 rgb 颜色值rgb(222, 221, 111) ，或者直接用颜色对应的英文表示 gray ，甚至是用关键字 transparent 来表示透明的颜色。

1
2
3
4
5
6
7
8
9

.yellow {
    background-color: #dedd6f;
}
.gray {
    background-color: gray;
}
.tran {
    background-color: transparent;
}

高阶函数是指满足下列条件之一的函数：

函数可以作为参数进行传递
函数可以作为返回值进行输出
JavaScript 语言中的函数显然满足高阶函数的条件，在实际开发中，无论是将函数当做参数传递，还是让函数的执行结果返回给另外一个函数，这两种情形都有很多应用场景。

函数作为参数传递

把函数当做参数进行传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来就可以分离业务代码中变化和不变的部分。

对于 JavaScript 的程序员来说，闭包是一个难懂又必须征服的概念。在介绍闭包前，先来看看和闭包息息相关的变量作用域和变量的生存周期。

变量的作用域

变量的作用域无非就是两种：全局变量和局部变量。当在函数中声明一个变量的时候，如果用关键字 var 来声明此变量，那么它就是局部变量，如果没有 var 那么就会成为全局变量。一般不建议用这种方式定义全局变量。而是用 var 将变量声明在函数的外面。

1
2
3
4
5

var name = 'bubuzou.com';  // 全局变量
function func() {
    var name = 'bubuzou';  // 局部变量
    age = 12;  // 全局变量，建议少用这种全局变量的定义方式
}