蓁祎家进步中

# css属性

⬅️⬅️UI | 学习基础网站

# text-shadow

🔝Top

text-shadow: h-shadow v-shadow blur color;
1
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
h1 {
    text-shadow: 5px 5px 5px #FF0000;
}
1
2
3

# filter

🔝Top

CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
1

滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter 描述
none 默认值，没有效果。
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

<shadow>参数如下：

  • <offset-x> <offset-y> (必须)
    • 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
    • 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).
  • <blur-radius> (可选)
    • 这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
  • <spread-radius> (可选)
    • 这是第四个 <length>值.正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
    • 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
  • <color>(可选)
    • 查看<color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
Filter 描述
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url() URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

例如：

filter: url(svg-url#element-id)
1
Filter 描述
initial 设置属性为默认值，可参阅： CSS initial 关键字
inherit 从父元素继承该属性，可参阅：CSS inherit 关键字
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera 灰度 */
    filter: grayscale(100%);
}
1
2
3
4
  • filter 作用于元素本身的滤镜
    • 常用滤镜：
      • blur：高斯模糊
      • contrast：对比度
      • drop-shadow：投影
      • greyscale：灰度
      • hue-rotate：色调变换
    • backdrop-filter 作用于元素背景的滤镜

# box-shadow

🔝Top

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

box-shadow: h-shadow v-shadow blur spread color inset;
1

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

# position

🔝Top

可联合阅读——CSS绝对定位absolute详解

TIP

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位。
不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。
相对定位元素会相对于它在正常流中的默认位置偏移。

默认值 static
继承性 no
版本 CSS2
JavaScript 语法 object.style.position="absolute"
  • position：定元素的定位类型
    • static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    • relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
    • absolute：绝对定位，元素不占位置，通过指定元素相对于最近的非 static 定位祖先元素的偏移，否则相对body，来确定元素位置。
    • fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
    • sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
  • top | left | bottom | right
    上下左右的偏移距离
  • z-index
    层叠关系

sticky

注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

# dom中position

Object.style.position=static|relative|absolute|fixed

document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="10px";
1
2
3
4

# z-index

TIP

z-index只在定位的元素上生效,如果发现添加了z-index不生效，要给元素添加positon:relative;或者 position:fixed;

# vertical-align

取值

vertical-align: baseline|length|percentage|sub|super|top|middle|bottom|text-top|text-bottom|initial|inherit;

'vertical-align'
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:      inline-level and 'table-cell' elements
Inherited:      no
Percentages:      refer to the 'line-height' of the element itself
Media:      visual
Computed value:      for <percentage> and <length> the absolute length, otherwise as specified
1
2
3
4
5
6
7
8

可以看到vertical-align影响inline-level元素和table-cell元素垂直方向上的布局。根据MDN描述，vertical-align对::first-letter和::first-line同样适用。

# inline-level的元素

inline:<img>,<span>,<strong>,<em>,未知元素 inline-block:<input>(IE8+),<button><IE8+>....

# table-cell元素

table-cell:<td>

所以默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性。

# baseline

  • 1、字母‘x’与baseline

字母x的下边缘（线）就是基线。不是字母s之类下面有尾巴的字母

315302-20170416111321708-1935775568.png

基线甚至衍生出了：

“alphabetic” baseline: “字母”基线 – 英文
“hanging” baseline: “悬挂”基线 – 印度文
“ideographic” baseline: “表意”基线 – 中文

  • 2、baseline的确定规则

1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素【line box】的baseline是最后一个inline box 的baseline。
3、inline-block元素的baseline确定规则

规则1：inline-block元素，如果内部有line box，则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline，而这个元素的baseline的确定就要根据它自身来定了。
规则2：inline-block元素，如果其内部没有line box或它的overflow属性不是visible，那么baseline将是这个inline-block元素的底margin边界。

221615316047072.png

上图中从左到右都是line-block元素，红线代表margin-box的边界，蓝线代表baseline；黄色为border，绿色为padding，蓝色为content。

左边元素包含着没有脱离正常流的内容c
中间元素除了没有脱离正常流的内容c外还增加了overflow:hidden
右边元素没有内容，但是内容区有宽高。

分析图中各种情况inline-block元素的baseline：

上图左图，inline-block元素有处于正常流的内容，根据规则1，所以inline-block的baseline就是最后一个作为内容存在的元素的baseline，也就是内容c的baseline，而c的baseline根据自身定，就是图中蓝色。
上图中图，inline-block元素overflow:hidden不为visible，根据规则2，该inline-block元素baseline就是inline-block元素的margin-box的下边界了，即图中蓝线。
上图右图，inline-block元素没有内容，根据规则2，所以其baseline为margin-box的下边界，即蓝线。

# vertical-align基于baseline的不同取值

  • baseline
    • 将子元素盒子的baseline与父盒子的baseline对齐
  • middle
    • 将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐
    • 这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。
  • text-top
    • 将盒子的顶端(margin-top边界)与父盒子的文本区域顶端对齐
  • text-bottom -将盒子的底端（margin-bottom边界） 与父盒子的文本区域底端对齐
  • sub
    • 将子元素盒子的baseline降低，到适当的父盒子的下标位置
  • super
    • 将元素盒子的baseline升高，到适当的父盒子的上标位置。
  • percentage
    • 百分比：升高（正值）或降低（负值）子元素盒子，具体的升高/降低数值由父盒子的line-height的值乘以百分比计算得出。如果百分比为0%，就和vertical-align:baseline一样。
  • length
    • 升高（正值）或降低（负值）子元素盒子。值为升高/降低的距离，如果为0，和vertical-align:baseline一样。

# vertical-align基于line box的不同取值

vertical-align设置为top和bottom时，其就不是按照baseline进行定位了，而是根据line box进行定位。子元素盒子的顶部和底部也就是其上下margin外边界。

  • top
    • 将子元素盒子的顶部和其所在的line box顶部对齐
  • bottom
    • 将子元素盒子的底部和其所在的line box底部对齐

# inline元素下方可能会有一点空隙

  • 垂直空隙
    • 因为li元素默认vertical-align:baseline，而baseline的下方会给字母的一部分留出空间，因此会产生一个空隙，要产生理想的效果，解决方案就是改变line box的baseline位置，比如将这些li设置为vertical-align:middle。【tip:加一个x效果更明显】
  • 水平空隙
<ul>
  <li class="box"></li><li class="box"></li>
  <li class="box"></li>
</ul>
<!-- 因为前2个li之间没有空白，而2和3个li之间有空白。 -->
1
2
3
4
5

上面的代码可读性太差，也不美观，一般这样写(我们用一个注释节点代替空白（文本节点），而注释节点渲染的时候是不渲染的。)

<ul>
  <li class="box"></li><!-- 注释去空格
--><li class="box"></li>
  <li class="box"></li>
    </ul>
1
2
3
4
5

# 图片object-fit

🔝Top

  • object-fit 处理替换元素（如img）的变形问题
/* 可替换元素填满整个内容区域，可能会改变长宽比。 */
object-fit: fill; 
/* 保持长宽比，保证可替换元素完整显示，长宽比和内容区域的长宽比不一致时，内容区域会出现空白。 */
object-fit: contain; 
/* 保持长宽比,保证内容区域被填满，所以可替换元素可能会被切掉一部分，从而不能完整展示。 */
object-fit: cover; 
/* 保持可替换元素原尺寸和比例 */
object-fit: none; 
object-fit: scale-down;
1
2
3
4
5
6
7
8
9

# object-position

规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。

还可以使用 object-fit 属性来改变可替换元素的对象的内在（原文：intrinsic）大小（即它看上去的大小）的调整方式，借助拉伸与缩放等使对象更好地适应元素的内容框。

/* 默认值是50% 50%，也就是居中效果 */
/* <position> values */
object-position: center top;
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;
1
2
3
4
5
6
7
8
9

# svg

  • clip-path 裁剪路径，用来裁剪出各种形状
  • letter-spacing 字母间距
  • pointer-events 鼠标事件

# clip-path

🔝Top

# clip-path:inset()

inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。

inset( <length-percentage>{1,4} [ round <border-radius> ]? )
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）
// 示例
clip-path: inset(2em 3em 2em 1em round 2em);
1
2
3
4

# clip-path:circle()

//语法
circle( [ <shape-radius> ]? [ at <position> ]? )
//说明
circle()可以传人2个可选参数；
1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点
//半径公式
如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比 

//示例
clip-path: circle(30% at 150px 120px);
1
2
3
4
5
6
7
8
9
10
11

# clip-path:ellipse()

//语法
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
//说明
ellipse()可以传人3个可选参数；
1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点

//示例
clip-path: ellipse(45% 30% at 50% 50%);
1
2
3
4
5
6
7
8
9
10

# clip-path:polygon()

定义一个多边形 。

//语法
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
//说明
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero
后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点

//示例
clip-path: polygon(50% 0,100% 50%,0 100%);
1
2
3
4
5
6
7
8

# display

🔝Top

  • display
    • block：块级元素
    • inline：内联元素
    • flex：弹性盒子布局
    • grid：网格布局

# content-visibility 属性

ontent-visibility属性可能是在提高页面加载性能方面最具影响力的新CSS属性之一

三个可能的值：

  • visible — 元素渲染正常进行
  • hidden— 跳过元素渲染时，无论是在屏幕外还是在屏幕上
  • auto — 当元素在屏幕外时，将跳过其渲染；当它出现在屏幕上时，将自动渲染

# contain-intrinsic-size 属性

CSS 提供了另一个属性contains-intrinsic-size，如果元素受大小限制影响，它可以有效地指定元素的自然大小。

article {
  content-visibility: auto;
  contain-intrinsic-size: 700px 1000px;
}
1
2
3
4

# :is 和 :where 伪类

  • :is() CSS 伪类 函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
  • :where() CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。
  • :where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

例如，有以下选择器列表:

.my-class p em,
.my-class li em,
.my-class section em {
    // CSS rules
}
1
2
3
4
5

如果要保持较高的优先级，以使其更难以用后续声明覆盖所属规则，则可以使用:is()缩短列表。

.my-class :is(p, li, section) em {
  // CSS rules
}
1
2
3

如果我们希望将优先级保持为0以方便重写所属规则，那么可以使用:where()：

.my-class :where(p, li, section) em {
  // CSS rules
}
1
2
3

在上面的示例中，.my-class em选择器将覆盖:where规则，但不会覆盖:is。

# 盒模型

🔝Top

  • width | height
    宽高
  • padding | margin
    内外边距
  • overflow
    • visible：超出部分可见
    • hidden：超出部分不可见

# font

🔝Top

  • font-weight 字体粗细
  • font-size 字体大小
  • font-family 字体种类
  • line-height 字体行高

# cursor指针样式

🔝Top

值 描述
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
no-drop、not-allowed 圆圈加一个斜杠，禁止的含义
/* 关键字值 */
cursor: pointer;
cursor: auto;

/* 使用URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;

/* URL和xy的坐标偏移值，最后提供一个关键字值作为备用 */
/* 可选 x，y坐标。两个小于32的无单位非负数。 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# pointer-events

/* auto——与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同 */
pointer-events: auto;
/* none——会让cursor的样式不生效, 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。 */
pointer-events: none;
/* visiblePainted——元素只有在以下情况才会成为鼠标事件的目标：
visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值
visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值 */
pointer-events: visiblePainted; /* SVG only */
/* visibleFill——只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。 */
pointer-events: visibleFill;    /* SVG only */
/* visibleStroke——只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。 */
pointer-events: visibleStroke;  /* SVG only */
/* visible——只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。 */
pointer-events: visible;        /* SVG only */
/* painted——元素只有在以下情况才会成为鼠标事件的目标：
鼠标指针在元素内部，且fill属性指定了none之外的值
鼠标指针在元素边界上，且stroke属性指定了none之外的值
visibility属性的值不影响事件处理。 */
pointer-events: painted;        /* SVG only */
/* fill——只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理。 */
pointer-events: fill;           /* SVG only */
/* stroke——只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理。 */
pointer-events: stroke;         /* SVG only */
/* all——只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理。 */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

pointer-events

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。

# text

🔝Top

  • text-align 文本对齐
  • text-shadow 文本阴影
  • text-transform 文本大小写
  • text-decoration 文本装饰样式
  • -webkit-text-stroke 文本描边
  • color 文本颜色
  • opacity 颜色透明度
  • white-space 空格处理

# background

🔝Top

除去特定的属性 其他属性可以按任意位置放置。

  • background 属性被指定多个背景层时，使用逗号分隔每个背景层。每个属性用空格隔开
  • 如果有size的值必须紧跟着position，用 / 隔开
  • background-color只能设置一个值 且被包含在最后一层
  • border-box/padding-box/content-box 如果出现一次则同时设置origin和clip，如果出现两次 第一个指定origin，第二个指定clip
  • 多重背景，其他属性只有一个表示所有的背景共用一个属性的属性值
  • background-color的优先级比background-image低，如果同时存在backgound-color和background-image时，image会显示在color上面

语法

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

  • background-color 背景颜色 transparent、单词（black）、十六进制（#FFFFFF）、RGB 色彩模式（rgb(0, 0, 0)）
  • background-image 背景图片 none、url('img1'), url('img2')、url('img1')、linear-gradient（路径渐变）、radial-gradient（径向渐变）、repeating-linear-gradient（重复路径渐变）、repeating-radial-gradient（重复径向渐变）
  • background-size 背景大小 auto、100%、100px（当只设置一个值时，默认为宽度，而高度按比例自适应）、
  • background-position 背景定位 0%, 0%
  • background-repeat 背景是否重复 repeat、repeat-x、repeat-y、no-repeat
  • background-clip 背景裁剪 border-box
  • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 scroll
  • background-origin 指定背景图像的定位区域 padding-box

# linear-gradient（路径渐变）

深入理解linear-gradient

创建一个表示两种或多种颜色线性渐变的图片

background-image: linear-gradient([<angle> | to <side-or-corner>]?, color-stop1, color-stop2, ...);

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
1
2
3
4
5
6
7
8
9
10
11

# radial-gradient（径向渐变）

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

  • shape确定圆的类型:
    • ellipse (默认): 指定椭圆形的径向渐变。
    • circle ：指定圆形的径向渐变
  • size定义渐变的大小，可能值：
    • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
    • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
    • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
    • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
  • position定义渐变的位置。可能值：
    • center（默认）：设置中间为径向渐变圆心的纵坐标值。
    • top：设置顶部为径向渐变圆心的纵坐标值。
    • bottom：设置底部为径向渐变圆心的纵坐标值。
  • start-color, ..., last-color用于指定渐变的起止颜色。

# repeating-linear-gradient（重复路径渐变）

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

  • angle定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
  • side-or-corner指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
  • color-stop1, color-stop2,...指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。
#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
 
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}

#grad3 {
  background-image: repeating-linear-gradient(to left bottom, red, blue 7%, green 10%);
}
1
2
3
4
5
6
7
8
9
10
11

# repeating-radial-gradient（重复径向渐变）

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

  • shape定义渐变的形状。可以是:
    • ellipse (默认)：指定椭圆形的径向渐变
    • circle：指定圆形的径向渐变
  • size边缘轮廓的具体位置。可以是以下值：
    • farthest-corner (默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角。
    • closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。
    • closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。
    • farthest-side：与 closest-side 相反，指定径向渐变的半径长度为从圆心到离圆心最远的边。
  • position圆心位置，类似 on与 background-position 或者 transform-origin。默认为 "center"
  • start-color, ..., last-color用于指定渐变的起止颜色，可以使用 长度值或百分比来指定起止色位置，但不允许负值。
#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
1
2
3

# border

🔝Top

  • border-width 边框宽度
  • border-style 边框样式
  • border-color 边框颜色
  • border-radius 边框圆角
  • box-shadow 阴影

# overflow

🔝Top

  • visible——默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden——内容会被修剪，并且其余内容是不可见的。
  • scroll——内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto——如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit——规定应该从父元素继承 overflow 属性的值。

# mix-blend-mode

🔝Top

  • mix-blend-mode
    • 常用混合模式
      • multiply：正片叠底
      • screen：滤色
      • difference：插值

# list-style-type

🔝Top

  • list-style-type 列表的marker样式（通常都设为none）

# UI

🔝Top

  • appearance 元素的默认样式（通常都设为none）
  • box-sizing 盒模型类型
    • content-box：默认，标准盒模型
    • border-box：IE盒模型（将border和·padding一并算作长宽）
  • cursor 光标类型，最常用的是pointer，也就是一只手
  • outline 轮廓
  • user-select 用户是否能选择文本（通常都设为none）

# scroll

🔝Top

  • scroll-behavior
    • auto：默认滚动行为
    • smooth：丝滑滚动行为
  • scroll-snap-type 定义在滚动容器中的一个临时点（snap point）如何被严格的执行
  • scroll-snap-align 控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式

# counter-reset

用于将 CSS计数器 重置为制定值

计数器的值能够通过 CSS 属性 counter-increment 控制递增或递减。

/* Set counter-name to 0 */
counter-reset: counter-name;

/* Set counter-name to -1 */
counter-reset: counter-name -1;

/* Set counter1 to 1, and counter2 to 4 */
counter-reset: counter1 1 counter2 4;

/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 动画

🔝Top

# 变换transform

  • transform 常见的几何变换：
    • translate：平移
    • scale：缩放
    • rotate：旋转
    • skew：斜切
  • transform-origin 变换中心
  • transform-style 子元素是位于 3D 空间中还是平面中
    • flat：默认
    • preserve-3d：3d场景
  • perspective 透视距离
  • backface-visibility 物体后方是否可视

# 过渡和动画transition

  • transition 过渡(此为简写属性)
    • transition-property 过渡属性名
    • transition-duration 过渡时间
    • transition-timing-function 过渡时间函数
    • transition-delay 过渡延迟
    • 默认值：all 0 ease 0
    • 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
  • animation 动画
    • animation-name 动画名称
    • animation-duration 动画时间
    • animation-delay 动画延迟
    • animation-timing-function 动画时间函数
    • animation-iteration-count 动画播放次数
    • animation-fill-mode 动画填充模式
  • @keyframes 关键帧

# perspective

指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。

  • 默认情况下，消失点位于元素的中心，但是可以通过设置 perspective-origin 属性来改变其位置。
  • 当该属性值不为 0 和 none 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。
/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;
1
2
3
4
5
6
7
8
9
10
11

# backface-visibility

指定当元素背面朝向观察者时是否可见

虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见

/* Keyword values */
backface-visibility: visible;
backface-visibility: hidden;

/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;
1
2
3
4
5
6
7
8

# 其他

🔝Top

  • var() CSS自定义变量
  • calc() 计算值
  • @media 媒体查询，用于适配不同设备
  • -webkit-box-reflect 投影

# calc

calc()

calc() 只作用于属性值

  • + 和 - 运算符的两边必须要有空白字符
  • * 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
px
%
em
rem
in
mm
cm
pt
pc
ex
ch
vh
vw
vmin
vmax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 不能在媒体查询中使用
@media (min-width: calc(40rem + 1px)) {
  /* Wider than 40rem */
}
1
2
3
  • 混合单位

# css文本设置及选择器

🔝Top

style 含义
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

# css颜色表示法

css颜色值主要有三种表示方法：

  • 颜色名表示，比如：red 红色，gold 金色
  • rgb表示，比如：rgb(255,0,0)表示红色
  • 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

# 标签选择器

🔝Top

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

举例：

*{margin:0;padding:0}
div{color:red}

<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
1
2
3
4
5

# id选择器

🔝Top

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{color:red}

<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
1
2
3

# 类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
1
2
3
4
5
6
7

# 层级选择器

🔝Top

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
 <span>....</span>
 <a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
1
2
3
4
5
6
7
8
9

# 组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
1
2
3
4
5
6
7
8

# 伪类及伪元素选择器

🔝Top

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
1
2
3
4
5
6

# css3选择器用法介绍

返回：css其他要点难点学习-选择器

  • element
    元素本身，p
  • class
    类，p.class
  • id
    id，p#id
  • child
    子元素，ul li
  • attribute
    属性，input[type="checkbox"]
  • sibling
    相邻元素，input ~ label
  • pseudo class
    伪类，button:hover
    • 常用伪类：
      • hover：鼠标悬浮
      • focus：本身获得焦点
      • focus-within：本身及子元素获得焦点
      • nth-child：第n个子元素
      • not：非某元素
      • target：URL的锚点
    • 表单伪类：
      • checked：单/复选框开关on的状态
      • disabled：被禁用的元素
      • valid：表单校验通过时的情况
      • invalid：表单校验不通过时的情况
      • placeholder-shown：有占位符时的情况（也就是用户还未输入时的情况）
  • pseudo element
    伪元素，button::before
    • 常用伪元素：
      • before
      • after
  • *
    全选

# 1、 属性选择器

🔝Top

属性选择器可以根据网页标记的属性及属性值来选择标记。属性选择器一般是一个记后紧跟中括号“[]”，中括号内部是属性或者属性表达式
CSS3中常见的属性选择器主要包括E[att^=value]、E[att$=value]和E[att*=value]这三种性选择器

div[id^=section]
/* 表示匹配包含id属性，且id属性值是以“section”字符串开头的div标记。 */

div[id$=section]
/* 表示匹配包含id属性，且id属性值是以“section”字符串结尾的div标记 */

div[id*=section]
/* 表示匹配包含id属性，且id属性值包含“section”字符串开头的div标记。 */
1
2
3
4
5
6
7
8
/*用于选取带有指定属性的元素。*/
p[title] {
 color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
 color: green;
}
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
 color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
 color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
 color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
 color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 2、关系选择器

🔝Top

包括子代选择器和兄弟选择器，其中子代选择器由符号>连接，兄弟选择器由符号“+”和“~”连接

（1）关系选择器

h1>strong
/* 表示选择嵌套在<h1></h1>标记的子标记<strong>。 */
/* 选择所有父级是 <h1> 元素的 <strong> 元素 */
1
2
3

（2）临近兄弟选择器

h2+p
/* 说明：表示选择h2标记后紧邻的第一个兄弟标记p。 */
1
2

（3）普通兄弟选择器

p~h2
/* 说明：表示选择p标记所有的h2兄弟标记。 */
1
2

（4）后代选择器

/*li内部的a标签设置字体颜色*/
li a {
 color: green;
}
1
2
3
4

# 3、结构化伪类选择器

🔝Top

结构化伪类选择器可以减少文档内class属性和id属性的定义，使文档变得更加简洁

伪类选择器 含义
:root 用于匹配文档根标记，使用“:root选择器”定义的样式，对所有页面标记都生效。
:not 例如：body*:not(h2);/* 用于排除body结构中的子结构标记h2。 */
:only-child 例如：li:only-child,用于匹配属于某父标记的唯一子标记(li)，也就是说某个父标记仅有一个子标记（li）。
:first-child 用于选择父元素第一个子标记。
:last-child 用于选择父元素最后一个子标记。
:nth-child(n) 例如：p:nth-child(2),表示用于选择父元素第二个p标记。
:nth-last-child(n) 例如：p:nth-last-child(2),用于表示父元素倒数第二个p标记。
:nth-of-type(n) 例如：h2:nth-of-type(odd),表示用于选择所有h2标记中位于奇数行数的标记。
:nth-last-of-type(2) 例如：p:nth-last-of-type(2),表示用于选择倒数第二个p标记。
:empty 用于选择没有子标记或者文本内容为空的所有标记。
/* 未访问的链接 */
a:link {
 color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
 color: #FF00FF
}
/* 选定的链接 */
a:active {
 color: #0000FF
}
/* 已访问的链接 */
a:visited {
 color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
 outline: none;
 background-color: #eee;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 4、伪元素选择器

🔝Top

  • first-letter：常用的给首字母设置特殊样式：
p:first-letter {
 font-size: 48px;
 color: red;
}
1
2
3
4
  • before
/*在每个<p>元素之前插入内容*/
p:before {
 content:"*";
 color:red;
}
1
2
3
4
5
  • after
/*在每个<p>元素之后插入内容*/
p:after {
 content:"[?]";
 color:blue;
}
1
2
3
4
5

before和after

多用于清除浮动

# 选择器的优先级

🔝Top

  • CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

  • 权重

参考CSS权重

# CSS权重

🔝Top

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

# 权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

  1. !important，加在样式属性值后，权重值为 10000,过多的使用!important会使样式文件混乱不易维护。
  2. 内联样式，如：style=””，权重值为1000
  3. ID选择器，如：#content，权重值为100
  4. 类，伪类和属性选择器，如： content、:hover 权重值为10
  5. 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
  6. 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

# 权重的计算实例

1、实例一：

<style type="text/css">
 div{
 color:red !important;
 }
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->
1
2
3
4
5
6
7
8
9
10
11

2、实例二：

<style type="text/css">
 #content div.main_content h2{
 color:red;
 }
 #content .main_content h2{
 color:blue;
 }
</style>
......
<div id="content">
 <div class="main_content">
 <h2>这是一个h2标题</h2>
 </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# css常见样式命名规则

🔝Top

  • BEM（block+element+modify）
    块级，元素，修改，它的主要设计思路是需要定义块级，对于子元素分别利用_区分，对于修饰的部分增加--实现。对于比较复杂的块级元素用-实现连接
site-nav
site-nav_logo
site-nav_login
site-nav--active
site-nav--active
1
2
3
4
5

  • OOCSS
    结构和设计分离
    容器和内容分离

  • SMACSS 可扩展和模块化结构的 CSS
    目标是减少代码量并简化代码维护

1.基本规则(Base rules): 为网址的主要元素设置样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用HTML标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JavaScript-Style选择);
2.布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤).
3.模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立).
4.状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用"!important"的地方.
5.主题规则(Theme rules): 设计您可能需要更换的样式.
6.我们推荐为属于某个组的CSS类定义命名空间, 并为JavaScript中使用的CSS类使用单独的命名空间.

  • Atomic CSS 原子 CSS
    好处是写出基于视觉功能的小的, 单用途CSS类.

1.使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如,
margin-top: 1px; 就可以创建一个类似于mt-1的CSS类,
或者width: 200px; 对应的CSS类为w-200.
这样设计可以最大程度的统一页面的共用样式，便于管理，尤其在你采用了预处理器之后，可以使用继承，拓展等方式快速使用某常用代码段或者样式模块，最大程度的减少css代码数量。 存在的缺点:
1.CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化.
2.直接在HTML中进行显示设置.
3.由于这些短板的存在, 这种做法遭到了大量的批评. 然而, 这种做法对于大型项目来说是有一定效果的.
4.此外, Atomic CSS在各种框架中被用于校正元素样式以及某些层(layers)的其他方法

  • MCSS 多层 CSS
  • AMCSS 属性模块 CSS
<div class="button button--large button--blue">Button</div>
1

如果这样写CSS类的链, 是有点复杂的, 所以让我们通过属性来为这些CSS类分组. 分组后就变成下面这样了:

<div button="large blue">Button</div>
1

为了避免属性名称冲突, 好的方式是为属性加上命名空间. 然后, 我们的button代码就变成这样了:

<div am-button="large blue">Button</div>
1
/* CSS类选择器 */
.button { ... }
.button--large { ... }
.button--blue { ... }
/* CSS属性选择器 */
[am-button] { ... }
[am-button ~= "large"] { ... }
[am-button ~= "blue"] { ... }
1
2
3
4
5
6
7
8

如果您认为这段代码十分的不寻常, 可以尝试使用较为温和的AMCSS 形式:

<div am-button am-button-large am-button-blue>Button</div>
1
  • FUN
    FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."

F, 选择器的扁平的层次结构: 建议使用CSS类选择元素(items), 避免不必要的级联, 杜绝使用id.
U, 实用(功能)样式: 鼓励创建原子(atomic)样式来解决典型的修正(微调)任务, 例如: w100表示width: 100%; 或者fr表示float: right;
N, 名称分割组件: Ben建议添加命名空间来指定特定模块元素的样式. 这种方法将避免类的中重叠.