OOCSS，SMACSS，BEM，ITCSS，Utility-First CSS，ACSS 都是 CSS 编写规则，是结构化编写和组织 CSS 的指南，在一个项目中采用一致的 CSS 编写规则，更利于他人理解你的代码和团队协作。

面向对象的 CSS

面向对象的 CSS（Object Oriented CSS，OOCSS）是指把样式重复的代码片段，定义为 CSS 对象

• 盒模型与皮肤无关：盒模型属性与颜色、背景等皮肤主题属性分选择器定义
• 样式与位置无关：避免使用标签、关系选择器，应用时，我们通常提取多个元素的公用属性，作为基本类 在其基础上，通过其它类扩展每个元素的个性属性 这是避免 CSS 代码冗余的常用方法

1
2

<div class="box bg-red"></div>
<div class="box bg-green"></div>

1
2
3
4
5
6
7
8
9
10

.box {
    width: 20px;
    height: 20px;
}
.bg-red {
    background-color: red;
}
.bg-green {
    background-color: green;
}

可扩展模块化 CSS 架构

可扩展模块化 CSS 架构（Scalable and Modular Architecture for CSS，SMACSS）定义了 CSS 分类和命名规则，并对 CSS 书写提出优化建议

• Base：默认，基础，通用规则，包括重置浏览器样式的规则
• Layout：布局规则，以 l- 或 layout-开头
• Module：可复用模块规则
• State：布局或模块的特殊状态规则，如隐藏，激活等，以 is 开头
• Theme：皮肤或主题规则，可能包含另一种配色方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* base */
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}
/* layout */
.l-header {}
.l-primarynav {}
.l-main-content {}
/* module */
.article-title {}
.article-content {}
/* state */
.is-hidden {}
.is-shown {}
/* theme */
.button-large {
    width: 60px;
    height: 60px;
}

块元素修饰符

块元素修饰符（Block Element Modifier，BEM）定义了一种 CSS 的命名规则，用于解决命名冲突

• Block：块，忽略结构和优先级，具有独立意义的实体
• Element：元素，块内部没有独立意义的实体
• Modifier：修饰符，标识块或元素的外观、行为、状态被修改，含有修饰符的类名不可独立出现，通常跟在不含修饰符的类名后

BEM 在书写时需要遵循三个原则：

• 使用 __ 两个下划线将块名称与元素名称分开
• 使用 -- 两个破折号分隔元素名称及其修饰符
• 一切样式都是一个类，不能嵌套

1
2

.block__elementOne--modifier {
}

倒三角形CSS

倒三角形CSS（Inverted Triangle CSS，ITCSS）主要用 SASS 实现 提供了一种 CSS 由通用到具体的分层（分类）方法，层次可以按需增删

• Settings：全局变量、方法，例如字体、颜色定义
• Tools：结合预处理器使用，全局使用的函数（function）、混入器（mixin）
• Generic：浏览器默认样式重置，例如 normalize.css、reset.css
• Elements（Base）：仅可使用类型（标签）选择器，例如 h1 {}
• Objects：遵循 OOCSS 的对象的盒模型，无颜色、背景等
• Components：可复用的 UI 组件
• Trumps(Utilities)：对组件的微调和其他样式定义，可使用 !important

实用类优先CSS

实用类优先CSS（Utility-First CSS） 提供了一种外观组件的构建方法，以 tailwindcss 为代表

• 按照一定规则，基于 CSS 实用类构建复杂外观组件
• 不用起类名
• 样式文件体积不会随项目无限增长
• 增删类名，比直接修改属性更安全，维护更容易

原子CSS

原子CSS（Atomic CSS），可以看成 Utility-First CSS 的极致抽象 提供了一种 CSS 类的定义方法，提升大型项目 CSS 复用度

• 每个类选择器中只包含一条属性定义，一次编写，到处运行
• 属性名类似函数，属性值类似函数参数，像写内联样式一样写类名，适合 CSS-in-JS
• 提供工具，可按需编译

字体格式类型

字体格式类型有 TrueType、OpenType、EOT、WOFF/WOFF2 以及 SVG 等。

阅读更多

BMP

BMP（Bitmap）位图，是 Windows 操作系统中的标准图像文件格式，可以分成两类：设备相关位图（DDB）和设备无关位图（DIB）。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。BMP文件的图像深度可选1bit、4bit、8bit及24bit。BMP文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。由于BMP文件格式是 Windows 环境中交换与图有关的数据的一种标准，因此在 Windows 环境中运行的图形图像软件都支持BMP图像格式。

阅读更多

z轴索引 - z-index

z-index 是一个CSS属性，它指定了元素及其子元素在z轴上的层叠顺序，z轴上的顺序可以决定当元素发生覆盖的时候，哪个元素在上面。

z-index 属性仅在定位元素（定义了 position 属性，且属性值为非 static 值的元素）上有效果。

z-index 的默认值为 auto 相当于 z-index: 0; 但不会创建新的层叠上下文，z-index 可以设置为任何整数值，包括负数。通常 z-index 值较大的元素会覆盖较低的那一个。

阅读更多

css属性继承性

css样式继承指的是，特定的css属性可以向下传递到后代元素。

阅读更多

正常文档布局流

正常文档布局流（normal document layout flow）是指在没有改变默认布局规则情况下的页面元素布局方式。如果你未曾应用任何CSS规则来改变它们的展现方式，网页上的元素将会按照正常布局流来组织布局。
首先说一下独立元素的布局。元素的内容被放在一个独立的元素盒子中，然后在其周边加上内边距（padding）、边框（border）和外边距（margin） — 就是我们所说的盒子模型（box model）。默认情况下，一个块级元素（典型如div）的内容宽度是其父元素的100%，其高度与其内容高度一致。内联元素（典型如span）的高度、宽度与内容一致。你可以通过设置 display: block 与 display: inline 来将一个元素变为块级元素或内联元素。
元素之间又是如何相互影响的呢？块级元素默认会按照基于其父元素的书写顺序（writing-mode: horizontal-tb）的块流动方向（block flow direction）放置 — 每个块级元素会在上一个元素下面另起一行，它们会被设置好的外边距（margin）分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。内联元素的表现有所不同 — 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。

阅读更多

CSS 预处理器

Sass (Syntactically Awesome StyleSheets)，是由Ruby语言编写的一款css预处理语言，诞生于2007年，有着严格的缩进风格。官方样式库为 Compass。

Scss (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感。兼容CSS。

Less 是由 Alexis Sellier于2009年编写的一个CSS 预处理器，最开始由 Ruby 书写，后来改为 JavaScript。Less 由 Sass 启发，语法更接近于CSS，完全兼容CSS。

Stylus 是由 TJ Holowaychuk 编写的一款CSS预处理器，诞生于2010年。官方样式库为 nib

这些CSS预处理器都支持一些常用的CSS语法扩展，比如
变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extends)、导入 (imports)、函数（functions）
但在语法和功能性上有些许差异。

阅读更多

为什么会有这篇

有些面试题会有这些，实际上并没有什么作用，可以用 flex 布局轻松实现。
在老旧浏览器中不支持 flex ，为了实现常见的三栏布局，即分左中右三部分，左右两部分宽度固定，中间部分宽度随浏览器变化。

这些布局有以下特点：

1. 两侧宽度固定，中间宽度自适应
2. 中间部分在DOM结构上优先，以便先行渲染
3. 允许三列中的任意一列成为最高列
4. 只需要使用一个额外的
   标签

阅读更多

box-shadow 元素阴影

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。可以使用 inset 表示是内阴影。

1
2
3
4
5
6
7

blockquote {
    padding: 20px;
    box-shadow:
        inset 0 -3em 3em rgba(0,0,0,0.1),
            0 0  0 2px rgb(255,255,255),
            0.3em 0.3em 1em rgba(0,0,0,0.3);
}

渲染如下：

You may shoot me with your words,

You may cut me with your eyes,

You may kill me with your hatefulness,

But still, like air, I’ll rise.

— Maya Angelou

阅读更多

Grid 布局

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

阅读更多

线性渐变

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型，是一种特别的 <image> 数据类型。

1
2
3
4
5
6
7
8

/* 渐变轴为45度，从蓝色渐变到红色 */
background-image: linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
background-image: linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image: linear-gradient(0deg, blue, green 40%, red);

阅读更多

CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。

它带来了许多期待已久的新特性，例如 border-radius(圆角)、box-shadow(阴影)、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。

W3C 的 CSS Working Group(CSS 工作组) 作出了一项被称为 Beijing doctrine 的决定，将 CSS 划分为许多小组件，称之为模块。这些模块彼此独立，按照各自的进度来进行标准化。

阅读更多

display 属性的含义

display 属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现。元素的内部显示类型可以控制其子元素的布局。

CSS3规范详细说明了 display 属性的两个值—显式地启用外部和内部显示类型的规，但是浏览器还没有很好地支持这一点。

阅读更多

伪元素

CSS伪元素(pseudo-elements)创建了一个有内容的虚拟容器，用于向某些选择器设置特殊效果
用法 selector:pseudo-element {property: value;}

::first-line : 用于向文本的首行设置特殊样式
::first-letter : 用于向文本的首字母设置特殊样式
::before : 可以在元素的内容前面插入新内容
::after : 可以在元素的内容之后插入新内容

阅读更多

什么是浮动？

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(normal flow)中移除，尽管仍然保持部分的流动性。
本属于普通流中的元素，在使用 float 属性后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0的情况。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高，也就是让浮动内容和周围的内容等高。

阅读更多

画一条0.5px的直线

1
2
3
4

.line {
    height: 1px;
    transform: scale(0.5);
}

阅读更多

盒模型

任何HTML元素都可以看作一个盒子，它包括：外边距，边框，内边距，和实际内容。
Margin(外边距) - 边框外的区域，外边距区域是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) -内容周围的区域，内边距区域是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度，可以通过 box-sizing 属性来设置盒模型。

• 内容盒模型 box-sizing: content-box
  content-box:
  width = content width;
  height = content height

• 边框盒模型 box-sizing: border-box
  border-box:
  width = border + padding + content width
  heigth = border + padding + content heigth

• 内边距盒模型 box-sizing: padding-box （这不是一个标准的 box-sizing 选项，大部分浏览器不支持）
  padding-box:
  width = padding + content width
  heigth = padding + content heigth

浏览器默认使用内容盒模型，在ie8以下的浏览器中默认使用边框盒模型。

html 布局

水平居中&垂直居中指的都是子元素相对于父元素位置，所以页面中需要有两个元素，假设外层元素id为out，内层元素id为in。

1
2
3
4

<div id="out">
    <div id="in"/>
    <!--p id="in"/-->
</div>

阅读更多