CSS大纲思维导图模板_ProcessOn思维导图、流程图

基础知识

发展历程

什么是CSS？

层叠样式表(Cascading Style Sheets)

作用

<span>用来描述 </span><a title="The HyperText Mark-up Language">HTML</a><span> 或 </span><a title="zh-CN/docs/XML">XML</a><span>（包括如 </span><a title="zh-CN/docs/SVG">SVG</a><span>、</span><a title="zh-CN/docs/XHTML">XHTML</a><span> 之类的 XML 分支语言）文档的呈现；<br></span><span>描述了在</span><span>屏幕、纸质、音频等其它媒体上的元素应该如何被渲染</span><span>的问题；<br></span>

优势

集中管理易于使用

可在多个页面上使用同一个样式

可针对所有同类型的元素应用一组样式

缩减文档大小

为将来做准备

CSS之前

HTML只是一种简洁的标记语言，并不关心外观

HTML不能设置文本样式

<big>

<font>

一片混乱

结构没有语义，使得建立内容索引很困难

可防问性极低

大量无意义元素相互嵌套

救星CSS

1995年进行的计划(work-in-progress)

1996年推荐草案(Recommendation)，同年底发布1.0

1997年讨论第一版中没有涉及的问题

1998发布2.0

2011年6月7日发布2.1推荐标准

CSS3分模块，各模块的时间不同

使用的方式

HTML全局属性style

内联样式，有针对性的设置

不可共享，维护麻烦

HTML<style>标签

文档中单独的样式

可共享，不方便维护

@import

必须放在其他CSS规则的前面

HTML<link />标签

链接外部样式文件

可共享，方便维护

@import

不同媒体，加载不同文件

media

all

用于所有媒体

screen

在屏幕媒体中使用(Web浏览器都属于屏幕媒体)

print

打印设备、打印预览

...

核心特性

向文档中的一组元素应用某些规则；每个样式表都是由一系列规则组成的

规则结构

选择器(selector)

选择器必须以字母或下划线开头，其后可以是数字、字母、下划线、中横线等，区分大小写；

建议使用小写字母开头，用中横线进行分隔多个单词，用有意义的单词命名

声明块(declaration block)

{

标记声明块的开始

声明1

语法

属性: 属性值;

属性

一些W3C规则的一些标识符，指示要修改的样式特征，如width-修改宽度，font-设置字体相关

属性值

每个属性都必须有一个或多个值，用来指示这个属性的样式，你想让他变成什么样子

大部分情况下值是一个关键字，或该属性可取关键字的一个列表(包含一个或多个关键字，用空格分隔)

Tips

<span>属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围；<br></span><span>如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它</span><span><br></span>

有些情况下属性值还会使用斜线(/)和英文半角逗号(,)进行多个值的分隔

<span>CSS 的属性和属性值都是区分大小写的</span>

<span>属性和属性值之间，用英文半角冒号 (</span><code>:</code><span>) 隔离，属性值后用英文半角分号(;)隔离另一个声明</span>

声明2

声明N

}

标记声明块的结束

规则结构

注释

/* 注释内容 */

选择器

基本选择器

元素选择器

必须是合法的 HTML 标签名

语法

标签名 { 声明 }

例

div { font-size: 14px; }<br>

<div>这是一个字号为14像素的div</div>

设置文档中所有的div标签的字体大小为 14像素

类选择器

通过 HTML 的全局属性 class 来关联 CSS 中的类选择器

语法

.自定义的类名 { 声明 }

必须以一个英文点号(.)开头；<br>通过这个点号，可以帮助类选择器与其他选择器相组合时分隔开来；

例

.header { font-size: 18px; }

<div class="header">字体大小为18像素</div>

设置页面中 class 属性值包含 header 的标签字体大小为 18像素；<br>class="header"或class="header search"都可以匹配到

例2

li.name { color: red; }

设置页面中 class 属性值包含 name 的 li 标签文本颜色为红色

多类选择器

在 HTML 中同一个 class 属性值中包含多个类名的选择器

语法

.类1.类2.类N { 声明 }

在CSS中声明的时候类名之间是没有空格的；在HTML的class属性中使用时要用空格进行分隔的；

例

p.warning.info { color: red; }

<p class="info warning">红色的文字</p>

设置页面中 class 属性值至少包含 warning 和 info 的 p 标签文本颜色为红色；<br>多个类的顺序无关；

ID选择器

通过 HTML 的全局属性 id 来关联 CSS 中的ID选择器

语法

#自定义的id名 { 声明 }

必须以一个井号(#)开头；<br>通过这个井号，可以帮助ID选择器与其他选择器相组合时分隔开来；

一个文档中ID的值是唯一的，并且ID属性不允许有以空格分隔的词列表<br>

例

#tel { color: green; }

<a id="tel" href="tel:186****4589">拨打电话(绿色的文本)</a>

设置页面中 id 属性的值为 tel 的元素的文本颜色为绿色；

通配选择器

通配选择器，显示为一个星号(*)，匹配任意的HTML标签

语法

* { 声明 }

设置所有的 HTML 标签的样式

例

* { color: green; }

<p>绿色的文本</p><br><div>绿色的文本</p><br><span>绿色的文本</span>

例子中的<p>、<div>、<span>标签的文本都将显示为绿色

群组选择器

多个选择器的声明块相同时，我们就可以用群组选择器，选择器名称之间使用英文半角逗号(,)分隔

语法

选择器1, 选择器2, 选择器N { 声明 }

选择器可以是其他基本选择器，也可以是后面的属性选择器或伪类选择器

例

div, p, .waring { color: red; }

设置<div>、p及class="warning"的元素的文本为红色

属性选择器

属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；<br>属性选择器，必须是放到一对英文的中括号内；

[attribute]

<span>匹配带有指定属性的元素</span>

语法

[属性名] { 声明 }<br>[属性名="属性值"] { 声明 }

例

[class] { color: red; }

设置文档中包含 class 属性的元素文本颜色为红色

[attribute=value]

匹配带有指定的属性和属性值的元素，属性的值必须是等于的，不能是包含

语法

[属性名=属性值] { 声明 }<br>

例

[title=name] { color: green; }

设置存在 title 属性且 title属性值等于 name 的元素，文本颜色为绿色；<br>上例中，只会匹配第一个 span；因为第二个 span 的title属性值还包含" hello"；

[attribute^=value]

匹配带有指定属性且属性的值以指定的开头的所有元素

语法

[属性名^=属性值] { 声明 }

例

[title^=h] { color: green; }

设置存在 title 属性且 title属性值以字母 h 开头的元素，文本为绿色

[attribute$=value]

匹配带有指定属性且属性的值以指定的结束的所有元素

语法

[属性名$=属性值] { 声明 }

例

[title$=o] { color: green; }

设置存在 title 属性且 title属性值以字母 o 结尾的元素，文本为绿色

[attribute*=value]

<span>匹配带有指定属性且属性值中包含指定值的每个元素，可以在属性值的任意位置</span>

语法

[属性名*=属性值] { 声明 }

例

[title*=e] { color: green; }

设置存在 title 属性且 title属性值存在字母 e 的元素，文本为绿色

[attribute~=value]<br>

匹配带有指定属性且属性值包含指定词汇的所有元素，匹配的属性值必须是一个词汇

语法

[属性名~=属性值] { 声明 }

例

[title~=hel] { color: green; }

设置存在 title 属性且 title属性值列表中包含词汇 hel 的元素，文本为绿色<br>

[attribute|=value]

<span>匹配带有指定属性且属性值是指定的单词或以指定的单词- 开头的元素</span>

语法

[属性名|=属性值] { 声明 }

例

p[title|=hello] { color: green; }

设置存在 title 属性且 title 属性值等于 hello 或以 hello- 开头的 p 标签，文本为绿色

派生选择器

<span>派生选择器允许我们根据文档的上下文关系来确定元素的样式</span>

HTML DOM Tree<br>(图片来源于w3school)

HTML DOM

<span>节点之间的关系</span>

子选择器

该元素是另一个元素的直接子元素，元素之间必须是父子关系，<span>子选择器使用大于号（>）</span>

语法

父元素 > 子元素 { 声明 }

父/子元素可以是HTML标签，也可以是其他选择器

例

.main > span { color: red; }

设置父元素的class包含main的子元素是 <span> 标签的文本颜色为红色，满足两条件：<br>1. 父元素的 class 必须包含有 main；<br>2. 元素本身必须是 <span> 标签；

后代选择器

匹配嵌套在某一个元素中的某个元素(可以是子元素，也可以是孙子元素)，后代选择器使用英文半角空格(  )

语法

祖先元素后代元素 { 声明 }

例

.main span { color: green; }

设置祖先元素的class包含main的所有后代元素是 <span> 标签的文本颜色为绿色，满足两条件：<br>1. 祖先元素的 class 必须包含有 main；<br>2. 元素本身必须是 <span> 标签；

相邻兄弟选择器

匹配紧挨着当前元素的后一个兄弟元素，使用加号( + )：<br>1. 他们有共同的父元素；<br>2. 是紧挨着的后边的第一个兄弟元素；<br>3. 如果中间隔着另一个元素，则样式不会生效；

语法

当前元素 + 挨着的后边的第一个兄弟元素 { 声明 }

例

.bro + span { color: green; }

设置class包含 bro 的元素紧挨着的兄弟元素，并且这个兄弟元素必须是 <span> 标签，文本颜色为绿色

通用兄弟选择器

匹配当前元素的后边所有兄弟元素，使用波浪线( ~ )：<br>1. 他们有共同的父元素；<br>2. 后边所有的兄弟元素；<br>3. 中间可以隔着其他元素；

语法

当前元素 ~ 后边的所有兄弟元素 { 声明 }

伪类选择器

CSS  伪类（pseudo-class）是一个以冒号( : )作为前缀的关键字；<br>当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）

语法

:伪类关键字 { 声明 }

:active

<div>伪类匹配被用户激活的元素。<br>当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间；<br>通常用于但并不限于 <a> 和 <button> HTML元素。</div><div><br></div><div>这个样式可能会被后声明的其他链接相关的伪类覆盖：<br>这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active的样式放在所有链接相关的样式后；<br>这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active</div>

:checked

表示任何处于选中状态的radio, checkbox 或<select>元素中的<option>元素

:default

<div>表示一组相关元素中的默认表单元素。</div><div><br></div><div>该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。</div>

:disabled

表示任何被禁用的元素；<span>如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态</span>

:empty

没有子元素的元素，<span>子元素只可以是元素节点或文本（包括空格和换行），注释节点不受影响</span>

:enabled

匹配任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的

:first-child

匹配一个元素的第一个子元素，必须是第一个子元素，跟位置有关的

:first-of-type

匹配任意类型当中第一次出现的元素，不用管他的位置

:focus

匹配获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择时会被触发

:hover

通常匹配在PC上鼠标移上去的元素

<span>:last-child</span>

匹配一个元素的最后一个子元素，必须是最后一个子元素，跟位置有关的

:last-of-type

匹配任意类型当中最后一次出现的元素，不用管他的位置

<span>匹配尚未访问的链接</span>

:not(X)

否定伪类; 是一个简单的X选择器为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器

:nth-child(an+b)

选择其父元素的第n 个子元素或多个子元素，索引从1 开始，当n 用于表达式时索引从0 开始!<br><code><span>a</span></code><span> 和 </span><code><span>b</span></code><span> 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素</span><br>

odd

匹配奇数，等价于 2n + 1

even

匹配偶数，等价于 2n

int

expression

<span>span:nth-child(-n+3)</span>

<span>匹配前三个子元素中的span元素</span>

:nth-last-child(an+b)

基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处

<span>li:nth-last-child(-n+4)</span>

匹配HTML列表中的最后四行

:nth-of-type(an+b)

匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值

:nth-last-of-type(an+b)

它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处

:only-child

匹配某个父元素<span>的唯一一个子元素；<br>等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点<br></span>

:only-of-type

匹配任意一个元素，这个元素没有其他相同类型的兄弟元素；

:required

匹配拥有required属性的 <input> 或 <textarea> 元素

:root

匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 元素选择器相同

<span>:target</span>

匹配id是URI的片段标识符的元素

:visited

匹配已访问的链接元素

伪元素选择器

伪元素选择器，是以两个冒号(::)开始，后根关键字，伪元素<span>不是描述特殊状态，它们允许您为元素的某些部分设置样式</span>

语法

::伪元素关键字 { 声明 }

::before

为匹配的元素创建一个伪元素，该伪元素将作为这个元素的第一个子元素，通常需要配合 content 属性一起使用；<br>默认该伪元素是一个行内元素

::after

为匹配的元素创建一个伪元素，该伪元素将作为这个元素的最后一个子元素，通常需要配合 content 属性一起使用；<br>默认该伪元素是一个行内元素

::first-letter

匹配首行的首字母，只有一小部分CSS属性能够使用

只在display属性值为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用. 其他情况下, ::first-letter 毫无意义

::first-line

匹配首行，只有一小部分CSS属性能够使用

只能应用在display值为block, inline-block, table-cell 或者 table-caption中。在其他的类型中，::first-line 是不起作用的

::selection

匹配选中的元素，只有一小部分CSS属性能够使用

结构和层叠

特殊性(优先级)

一个元素可以使用多个规则，但是最终相同的声明，只会显示一个；<br>浏览器通过特殊性(优先级)来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值；<br>特殊性是基于不同种类选择器组成的匹配规则。<br>

选择器的特殊性由四部分构成，由四位数字表示；<br>左边每一位都比后面一位大(不管后面一位的数值是多大)

行内样式(style="")

1, 0, 0, 0

ID选择器

0, 1, 0, 0

类、属性及伪类选择器

0, 0, 1, 0

元素及伪元素选择器

0, 0, 0, 1

通配符

0, 0, 0, 0

结合符(<code>+</code><span>, </span><code>></code><span>, </span><code>~</code><span>, '</span><code> </code><span>'</span>)没有特殊性

:not()

对特殊性没有影响；但是，在 :not() 内部声明的选择器会影响优先级<br>

重要性

当某条声明特别重要，但是选择器的特殊性又比较低，这时候就可以就可以使用 !important 来标志其重要性

重要性优先级始终比非重要性的声明高

一旦确定了一个选择器的特殊性，那么其值将授予里面所有的声明

继承

后代元素获取祖先元素的属性值

某些属性不能继承，如border，大多数盒模型属性(margin、padding、background、border)都不能继承；<br>当元素的一个继承属性（inherited property ）没有指定值时，则取父元素的同属性的计算值 (computed value)；<br>当元素的一个非继承属性 (non-inherited property ) 没有指定值时，则取属性的初始值(initial value)；<br>

inherit，显示设置继承父元素；继承的值没有特殊性

层叠

按特殊性排序

按出现顺序排序

属性、属性值和单位

属性

用来描述元素的外观，同一个属性可以取多种类型的值，同一个属性在一个声明块中应该只出现一次，如果出现多次，后出现的会覆盖先出现的(在特殊性相同的情况下)

前缀

-moz

Firefox

-webkit

Chrome/Safari

Opera

IE

属性值

CSS属性值定义语法（CSS value definition syntax）

基本组成元素

关键字

一般关键字

一般关键字是预先都有定义的，不需要引号，如auto, smaller或ease-in

特殊关键字

所有CSS属性值都可以使用inherit或者initial这两个特殊关键字；<br>这两个关键字不会出现在CSS合法值定义中，但都是隐含可用的<br>

符号

斜杠('/')

斜杠用来分隔一个值的多个部分，通常用在CSS缩写中

逗号(',')

逗号用来分隔数个并列值，或者分隔函数的参数

带类型的参数

代表参数必须是一个字符串，应用放到单(' ')或双(" ")引号中

<angle>

代表着一个表示度数（degrees）、百分度（gradians）、弧度（radians）或者转数（turns）的角度值；<br>例如在rotate和skew transform中它会被用到

例

{ transform: rotate(20deg) }

代表着一个数字，可为整数或小数，注意没有任何单位的哟，并不是一个CSS尺寸

例

{ line-height: 1.5 }

一种特殊类型的<number>，代表一个整数，可为负数或正数

例

{z-index: 1}

表示距离尺寸，由一个 <number> 后加一个长度单位(px, em等)组成；<br><span>数字和单位之间没有空格；<br></span>如果<number>为0，则可以省略单位；

例

{ margin: 10px }

一个百分比值

...

组合符号

方括号([])

方括号将多个属性值组成一个整体，用来强调组合的优先级

并置

指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都必须出现并且按所规定的顺序出现

“与”组合符(&&)

"与" 组合符连接的各个部分都必须出现，但是顺序任意

“或”组合符(||)

"或" 组合符表示其连接的所有组成元素是可选的，次序任意，但是至少其中一个要出现。“或”组合符通常用来描述属性缩写中的各部分

“互斥”组合符(|)

"互斥" 组合符表示各组成部分中只能恰好出现一个，通常用来分隔一个属性的所有可选值

数量符号

星号 (*)

星号表示可以出现 0 到多次(（即不出现，出现一次，或出现任意多次)

加号 (+)

加号表示可以出现一次或多次

问号 (?)

问号表示可选，即出现零次或一次

大括号 ({ })

大括号包含两个以逗号分隔的整数A与B，表示最少出现A次，且最多出现B次

井号 (#)

井号表示可以出现一次或多次，与加号相似。但是其多次出现必须以逗号分隔

总结

组合符号与数量符号(图片来源于MDN)

种类

可以看成是属性的默认值

指定值(specified value)

CSS属性的指定值会通过3种途径取得

首先，在当前文档的样式表中查找给这个属性赋的值

如果在当前文档的样式表中没有匹配到，则会尝试从父元素继承一个值

如果上面两种途径都不可行，则会使用其初始值作为指定值

计算值(computed value)

应用值(<span>used value)</span>

是完成所有计算后最终使用的值

计算出CSS属性的最终分为三个步骤

首先，指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值

然后，按规范算出计算值computed value  (例如， span 指定 position: absolute 后display 变为 block)

最后，计算布局(尺寸比如 auto 或百分数换算为像素值 )，结果即应用值used value<br>这些步骤是在内部完成的

与计算值的区别

CSS 2.0 只定义了计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样(引自 CSS 2.1 Changes: Specified, computed, and actual values)

实际值(actual value)

是应用值（used value）被应用后的近似值

解析值(resolved value)

getComputedStyle()返回的值

属性的简写

简写属性是可以让我们同时设置其他几个 CSS 属性值，其目的在于将那些关于同一主题的常见属性的定义集中在一起

边界情况

没有指定值的属性会被设置为其初值

例

div {<br><div>  background-color: red;</div><div>  background: url(images/bg.gif) no-repeat top right;</div>}

这里的红色背景将不会显示，因为会被下边 background 属性的值覆盖掉；<br>第二条声明中background使用的属性的简写，而在简写中并没有定义背景颜色，因此会使用background-color的默认值 transparent

关键词 inherit 只可以应用于单独属性，<span>如果应用于一个简写属性则必须整体都应用</span>

注意简写值的顺序

例

非简写

div {<br>  margin-top: 10px;<br>  margin-bottom: 10px;<br>  margin-left: 15px;<br>  margin-right: 15px;<br>}

简写

div {<br>  margin: 10px 15px;<br>}

单位

绝对长度单位

px

<div>与显示设备相关。</div><div>对于屏幕显示，通常是一个设备像素（点）的显示。</div><div>对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右</div>

mm

毫米

cm

厘米（10毫米）

in

英寸（2.54厘米）

pt

磅（1/72 英寸）

相对长度单位

em

表示元素的font-size的计算值，如果用在font-size 属性本身，它会继承父元素的font-size

ex

表示元素font的 x-height；在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体， 1ex ≈ 0.5em

rem

表示根元素(<html>标签)的font-size的计算值；当用在根元素的font-size上面时，它代表了它的初始值；常用作自适应布局

百分比

%

百分比单位依赖于某个属性的计算值，通常跟据应用在不同的属性上，其参考值不一样

视口比例的长度单位

相对于视口的长度大小，视口即文档可视的部分；<br>如果html或body设置了overflow:auto，则滚动条所占的空间是算在视口内的；当<span>设置为overflow:scroll时，滚动条所占的空间不算在视口内；</span><br>

vh

视口高度的 1/100

vw

视口宽度的 1/100

角度单位

deg

角度单位，一个完整的圆为360度，如0deg, 90deg, 14.23deg.

grad

百分度单位，一个完整的圆为400grad.如0grad，100grad，38.8grad

rad

弧度单位，一个完整的圈是2πrad，大概是6.2832rad。1rad是180/πdegrees（度）。如0rad，1.0708rad，6.2832rad。

turn

转单位，一个完整的圈是1turn。如0turn，0.25turn，1.2turn

例<br>(图片来源于 MDN)

0度

0 = 0deg = 0grad = 0turn = 0rad

顺时针90度

90deg = 100grad = 0.25turn ≈ 1.5708rad

顺时针180度

180deg = 200grad = 0.5turn ≈ 3.1416rad

逆时针90度

-90deg = -100grad = -0.25turn ≈ -1.5708rad

时间单位

ms

毫秒

s

秒

1s == 1000ms

颜色

色彩关键字

合法的命名颜色关键字，不区分大小写，建议小写

CSS3包含 <span>147 个</span>

未知的颜色关键字，会让CSS属性无效

某些关键字表示相同的颜色

<div>darkgray / darkgrey</div><div>darkslategray / darkslategrey</div><div>dimgray / dimgrey</div><div>lightgray / lightgrey</div><div>lightslategray / lightslategrey</div><div>gray / grey</div><div>slategray / slategrey</div>

RGB立体坐标系统<br>(<span>红-绿-蓝(</span><span>red-green-blue </span><span>))</span>

以 '#' 开头的十六制

"#" 后跟6位十六进制字符（0-9, A-F,a-f）

"#" 后跟3位十六进制字符（0-9, A-F,a-f）

三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的

rgb() 函数表达式

"rgb" 后跟3个 <integer> 或3个 <percentage> 值<br>整数范围在 0~ 255 间，百分比在 0% ~ 100%

整数 255 相当于 100%，和十六进制符号里的FF

rgb(255, 255, 255) 白色

rgba() 函数表达式

rgba 扩展了 rgb 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度；<br>a 表示透明度：0=透明；1=不透明，取值只能是 0~1之间<br>

HSL圆柱坐标系统<br>(<span>色相-饱和度-明度（Hue-saturation-lightness）)</span>

HSL 相比 RGB 的优点是更加直观：我们可以估算我们想要的颜色，然后微调；<br>色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的 <number> 被给出；<br>定义 red=0=360，其它颜色分散于圆环，所以 green=120, blue=240，以此类推；<br>作为一个角度，它隐含像 -120=240 和 480=120 这样的回环；<br><div>饱和度和明度由百分数来表示。</div><div>100% 是满饱和度，而 0% 是一种灰度。</div><div>100% 明度是白色， 0% 明度是黑色，而 50% 明度是“一般的”；<br></div>

hsl() 函数表达式

hsl(0,  100%, 50%) 一种红色

hsla() 函数表达式

类似rgba

HSL与十六进制对比图

transparent 关键字

表示一个完全透明的颜色，即该颜色看上去将是背景色，是 rgba(0, 0, 0, 0)的简写

transparent 关键字在 CSS Level 2 (Revision 1) 中不是一个真实的颜色；它是一个特殊的关键字；<br>只能用在 background 和 border 属性中，本质上使用它可以覆盖一个继承的单色；

随着阿尔法通道（alpha channels）透明度的支持，transparent 在 CSS Colors Level 3 中被重新定义为一个真实的颜色，<br>允许在任何一个需要 <color> 类型的值的地方使用，像 color 属性

currentColor 关键字

代表原始的 color 属性的计算值

字体相关属性

font-family

描述

为浏览器指定一个字体或一个字体的列表(用逗号分隔)，如果设置的字体都不可用，则会使用默认的字体代替

多个字体的优先级是从左往右的，浏览器优先使用最左边定义的字体，如果没找到才会依次往右找

网页中使用的字体，必须是用户电脑上已安装的字体，CSS3支持字体下载

网页安全字体

字体对不同系统的可用性不一样，只有几个字体通常可以应用到所有系统，这些字体都是所谓的网页安全字体

常用网页安全字体(图片来源于MDN)

引号

当一个字体中有空格或包含# 或 $以及中文字体的时候，需要用引号包裹字体名称

初始值依赖与用户的操作系统，可继承

值

[[<family-name> | <generic-name>],]* [<family-name> | <generic-name>] | inherit

例

body { font-family: '微软雅黑', Arial, sans-serif, '<span>Times New Roman</span>' }

font-weight

描述

设置字体的粗细程度

font-weight 数值采取离散式定义（使用 100 的整倍数）；<br>数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200 

初始值是 normal(== 400)，可继承

值

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

例

div { font-weight: 700 }

font-size

描述

设置网页字体大小，浏览器的默认字体大小通常是 16px

初始值是 <span>medium，可继承</span>

值

取值为 <percentage> 时或单位是em、ex时，跟据父元素的 font-size 值来计算；<br>取值为 <length> 时，长用单位为 px、em、rem

例

div { font-size: 14px }

font-style

描述

选择 font-family 字体下的 italic 或 oblique 样式；<br>不是所有的字体都有确切的 oblique 和 italic 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形；<br>

初始值是 normal，可继承

值

normal | italic | oblique

normal

选择 font-family 的常规字体

italic

选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代

oblique

选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（ italic ）替代

font-variant

描述

设置字体的变形

CSS3扩展了这个属性：font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian

初始值是 normal，可继承

值

small-caps | normal | none

small-caps

使用小型大写字母

font-stretch

描述

字体拉伸，让字体变胖或变瘦

值

font

描述

font 属性是设置 font-style, font-variant, font-weight, font-size, line-height 和 font-family属性的简写，或使用特定的关键字设置元素的字体为某个系统字体

除了使用关键字的情况之外，该属性必须同时设置 font-size 和 font-family 属性值；<br>并非所有的 font-variant 属性值是被允许的。只有在 CSS 2.1 里规定的值才被允许使用，它们是 normal 和 small-cap；<br>尽管 font-stretch, font-size-adjust 和 font-kerning 不会由 font 直接设置，它们仍然会被重置为初始值；<br>属性值的顺序并非完全自由：如需设置 font-style, font-variant 和 font-weight 中任意一个或几个的值，它们必须要放在 font-size 值的前面。 line-height 值必须紧跟在 font-size 之后，并且要在属性值前面加上 / 。最后， font-family 是必不可少的，且必须放在最后（inherit 值是无效的）<br>

值

[[<font-style> || <font-variant> || <font-weight>] ? <font-size>[/<line-height>]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar

关键字用于表示某个特定的系统字体，以代替每个单独的普通属性

例

body { font: 14px Arial, sans-serif; }<br>div { font: italic 2em Arial, sans-serif; }<br>p { font: italic small-caps bolder 18px/2 Arial, sans-serif; }<br>a { font: message-box; }

@font-face规则

描述

设置网页的在线字体，当用户电脑上不存在此种字体时，会执行下载并使用

不能在一个 CSS 选择器中定义 @font-face 

语法

<div>@font-face {</div><div>  [ font-family: <family-name>; ] ||</div><div>  [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||</div><div>  [ unicode-range: <urange>#; ] ||</div><div>  [ font-variant: <font-variant>; ] ||</div><div>  [ font-feature-settings: normal | <feature-tag-value>#; ] ||</div><div>  [ font-variation-settings: normal | [ <string> <number>] # ||</div><div>  [ font-stretch: <font-stretch>; ] ||</div><div>  [ font-weight: <weight>; ] ||</div><div>  [ font-style: <style>; ]</div><div>}</div>

值

src

远程字体文件位置的URL或者用户计算机上的字体名称，可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。如果找不到该字体，将会尝试其他来源，直到找到它

font-family

设置字体的名称，为后边的属性调用使用

例

<div>@font-face {</div><div>  font-family: MyHelvetica;</div><div>  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf);</div><div>  font-weight: bold;</div><div>}<br><br>div { font-family: MyHelvetica; }</div>

应用

字体图标(icofont)

在线图标转字体

文字相关属性

text-indent

描述

设置块元素的首行文本缩进

只能应用于块级元素

值

初始值为 0，<percentage>相对于父元素的宽度进行计算；可取负值

text-align

描述

设置行内(如文本)内容如何相对于其父元素对齐

只能应用于块级元素

要将块元素本身相对于其父元素居中对齐，可以设置 { margin-left: auto; margin-right: auto; }

值

left | center | right | justify

初始值取决于用户代理或者书写方向

line-height

描述

设置行间距

line-height控制了行间距，这是文本行之间超出字体大小的额外空间，换句话说，其值和字体大小之差就是行间距

值

<length> | <percentage> | <number> | normal

<percentage> | <number> 相对于当前元素的font-size

vertical-align

描述

设置垂直对齐文本

应用于行内元素、表格单元格和替换元素

值

word-spacing

描述

设置字间距

这里的“字”可以是任何非空白符组成的串，并由某种空白符包围；

值

<length> | normal

正长度值，会增加字之间的间隔，负长度值，会把字拉近

letter-spacing

描述

设置字母间隔

在汉语体系中，一个汉字可以看成是一个字母

值

<length> | normal

用法跟word-spacing类似

text-transform

描述

文本转换

值

uppercase | lowercase | capitalize | none

text-decoration

描述

文本装饰

值

none | [ underline || overline || line-through || blink ]

text-shadow

描述

文本阴影

值

none | [ <color> || <length> <length> <length>?, ]* [ <color> || <length> <length> <length>?]

white-space

描述

空白符的处理

默认的浏览器会把所有空白符合并为一个空格

值

normal | nowrap | pre | pre-wrap | pre-line

基本视觉格式化

可视化格式模型( visual formatting model )简介

一个HTML文档，是由各种HTML标签组成的，每一个HTML标签可以看成是一个Box，而这些Box应该在页面中如何呈现就是由视觉格式化模型来确定的

通常用户所看到的页面都是平面 2D 效果，但可视化模型却是 3D 的，除了 X 轴， Y 轴，还有决定元素显示顺序的 Z 轴(由 z-index 属性控制)，框在 Z 轴方向上离用户越近，显示越靠前

可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树(document tree)

用户端

通常指浏览器

媒介

展示页面的介质

显示器

电视

听觉浏览器

纸媒介

... ...

文档树(document tree)

就是文档(document)和页面上的元素所构成的类似树形的结构

一个文档由HTML元素构成，除根元素(html)外，其他元素恰好都有唯一的一个父元素

基本框(元素框)

CSS假定每个元素都会生成一个或多个矩形框，这称之为元素框；它描述了一个元素在文档布局中所占的空间大小，因此，每个框都影响着其他元素框的位置和大小

各元素框的中心有一个内容区(content area)，内容区的周围有可选的内边距(padding)、边框(border)和外边距(margin)；<br>

框中的每层大小都可以使用一些特定的CSS属性来调整

外边距

margin

top+right+bottom+left

边框

border

top+right+bottom+left

内边距

padding

top+right+bottom+left

内容

width

height

#text

框的类型可以由 display 属性来决定

块

block

行内

inline

行内块

inline-block

表格

table

单元格

table-cell

... ...

元素框

包含块(Containing blocks)

简介

元素框的定位和尺寸的计算，都取决于一个矩形边界，这个矩形就被称为是一个包含块(containing blocks)。一般来说，元素生成的框会扮演它子孙元素包含块的角色；我们称之为：一个元素的框为它的子孙节点创建了包含块。(包含块不一定是它的父元素，但一定是它的祖先元素)

对于正常的文本流中的一个元素，其包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界(content edge)构成

例

<div><br>  <table><br>    <tr><br>      <td>Hello CaiTai</td><br>    </tr><br>  </table><br></div>

div是table的包含块，table是td的包含块；因此， td 的布局依赖于 table，而 table 的布局依赖于 div；

这不是绝对的，只是在正常的文档流中是这个样子的

一个框的包含块，指的是该框所存在的那个包含块，并不是它创建的包含块；如上例中，table 的包含块是指 div 创建的包含块，而不是 table自身创建的包含块，table 自身创建的包含块是 td 的包含块；

每个框都有一个关于它的包含块的位置，但是这个框并不会被它的包含块限制；它可以溢出包含块；对于溢出的处理，可以在包含块上设置 overflow 属性来处理

确定规则

根元素

根元素，就是处于文档树最顶端的元素，它没有父节点

根元素存在的包含块，被称做初始包含块 (initial containing block)；具体，跟设备有关

对于连续媒体设备(continuous media)，初始包含块的大小等于视口(viewport)的大小，其基点在画面的原点(视口的左上角)

对于分页媒体(paged media)，初始包含块是页面区域(page area)

初始包含块的 direction 属性与根元素相同

position 值为 static 或 relative 的元素

它的包含块由最近的块级、表格单元格或行内块祖先元素的内容边界创建

未声明 position 属性的元素，默认取值为 static

position 值为 fixed 的元素

它的包含块由视口创建(连续媒体)或由页面区域创建(分布媒体)

position 值为 absolute 的元素

它的包含块由最近的 position 值不为 static 的祖先元素创建，具体规则如：

如果创建包含块的祖先元素是行内元素(inline element)，包含块的范围是这个祖先元素的第一个和最后一个行内框的 padding boxes 区域

如果创建包含块的祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距边界(padding+width)

如果没有找到这样的祖先元素，那么这个 absolute 的元素的包含块为初始包含块(initial containing block)

元素术语

文档流

正常文档流是指西方语言文本从左向右，从上向下显示，这也是HTML文档的文本布局

非替换元素

元素的内容直接在文档中显示出来

替换元素

元素本身只是一个占位符，其内容是跟据元素的属性来确认的

img 标签，通过 src 属性来显示具体的图像

input 标签，通过 type 值来确认类型

块级元素

比如我们的div、p之类的元素，这些元素在正常的文档流中，会在其框之前和之后生成“换行”

正常文档流中块级元素会垂直摆放

通过声明 display: block，可以让元素生成块级框

行内元素

比如我们的span、strong之类的元素，这些元素不会在框之前和之后生成“行分隔符”，通常是块级元素的后代元素

正常文档流中行内元素会从左往右，依次摆放，直接到达右边界才会折行

通过声明 display: inline, 可以让元素生成行内框

根元素

文档树顶端的元素，在HTML文档中，就是 html 标签

块级元素

完整的框模型(图片源自网络)

水平格式化

水平属性

margin-left

左外边距

border-left

左边框

padding-left

左内边距

width

元素自身的宽度

padding-right

右内边距

border-right

右边框

margin-right

右外边距

以上七个属性的值相加的结果必须是其包含块的宽度，一般是当前块元素的父元素的width值(块元素的父元素，一般都是块元素)

宽度计算

元素框的宽度计算 == 父元素的 width == 元素自身的左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距

父元素 width = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

可通过box-sizing属性来修改元素的默认width所指的宽度

border-box

width 的值包含 border-left-width + padding-left + content width + padding-right + border-right-width

content-box

width 仅指内容的宽度

auto 值

只有元素内容的width和margin-left、margin-right可取值为 auto，其他属性必须设置特定的值或者默认宽度0

值为 auto 时，可以弥补实际值与所需总和的差距，如果 3 个属性都设置了某个特定值，则用户代理将把右外边距(margin-right)重置为 auto

例

div { width: 300px; }<br>p { width: 100px; margin-left: auto; margin-right: 50px; }

元素p的水平七大属性值和应该等于父元素的width

父元素width == 300 == margin-left(auto) + border-left(0) + padding-left(0) + width(100) + padding-right(0) + border-right(0) + margin-right(50)

所以这里的 margin-left 最终计算出来的值为 300 - 0 - 0 - 100 - 0 - 0 - 50 = 250

div { width: 300px; }<br>p { width: 100px; margin-left: 50px; margin-right: 50px; }

父元素width == 300 理论上应该是等于 margin-left(50) + border-left(0) + padding-left(0) + width(100) + padding-right(0) + border-right(0) + margin-right(50)

300 > 50 - 0 - 0 - 100 - 0 - 0 - 50 

如果这些属性过分受限即这些属性都设置了一个具体的非 auto 值，此时会把 margin-right 重置为 auto 参与计算；<br>只是针对从左向右读的语言<br>

结果将 margin-right 重置为 auto 参与计算，即 50 - 0 - 100 - 0 - 0 - auto，最终 margin-right 的应用值就是 150；<br>

div { width: 300px; }<br>p { width: 100px; margin-left: auto; margin-left: auto; }

块元素的水平居中，与 text-align: center 是不同的哟，一个是设置的块元素的内联内容，一个是设置的块元素本身

div { width: 300px; }<br>p { width: auto; margin-left: 50px; margin-right: 50px; }

等价于没有设置 width，此时 width 会占满剩余的空间

div { width: 300px; }<br>p { width: auto; margin-left: auto; margin-right: 50px; }

当三个属性中设置了 width: auto；然后只设置了 margin-left 或 margin-right 其中一个为 auto，而另一个为具体值时，那么在参于计算的时候值为 auto 的 margin会计算成 0

div { width: 300px; }<br>p { width: auto; margin-left: auto; margin-right: auto; }

margin-left 和 margin-right 计算成 0

负外边距

在水平位置的 7 大属性中，只有外边距可以设置为负值

例

div { width: 300px; }<br>p { width: auto; margin-left: 50px; margin-right: -50px; }

auto + 50 + (-50) == 300

auto == 300

最终子元素会超出父元素

百分数

width、margin(left/right/top/bottom)、padding(left/right/top/bottom)取值为百分比时都是相对于父元素的 width，border不能设置为百分比值

替换元素

替换元素的块级水平格式化跟非替换元素基本一样，只是当 width 取值为 auto 时有一点区别，就是替换的 width: auto 时，其 width 计算结果是内容的固有的宽度值

垂直格式化

垂直属性

margin-top

上外边距

border-top

上边框

padding-top

上内边距

height

高度

元素的默认高度是由其内容决定的并且高度值还会受内容的高度影响

padding-bottom

下内边距

border-bottom

下边框

margin-bottom

下外边距

以上七个属性的值相加的结果必须是其包含块的高度，一般是当前块元素的父元素的height值(块元素的父元素，一般都是块元素)

高度计算

同水平格式化

auto值

只有元素内容的height和margin-top、margin-bottom可取值为 auto，其他属性必须设置特定的值或者默认高度0

上、下外边距为 auto 时，会自动重置为 0 参与计算

auto高度

块级正常流元素设置 height: auto 时，其高度将恰好包含其内联内容(包括文本)的行盒；在没有其他属性时，其框的上边界刚好在文本第一行的上面，而下边界刚好在文本最后一行的下面；

高度为 auto 时，而且只有块级子元素，其默认高度将是从最高块级子元素的上外边框边界到最低块级子元素下外边框边界之间的距离；因此子元素的外边距会“超出”包含这些子元素的元素；不过，如果包含这些子元素的元素有上、下内边距或上、下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离

百分数

如果一个块级正常流元素的 height 取值为百分数时，这个值则是相对于包含块 height 进行计算的一个结果；不过，如果包含块没有显示声明 height 值，这时百分数高度将会重置为 auto

垂直外边距合并

默认情况块元素的垂直相邻的外边距会合并成一个，取值最大的一个，父子元素会合并，相邻兄弟元素也会合并

如果元素有边框或内边距，就不会产生合并

负外边距

负外边距会影响外边距的合并

如果外边距都为负值，浏览器在解析的时候，会取他们的绝对值中的最大值

如果有正有负，则会用正值减去这个负值的绝对值

overflow属性对垂直外边距的合并和负外边距都有影响

列表元素

列表元素除具有块元素的一些特性外，它还有自身的一些特性，一般会在元素前面生成一个圆点或一个数字

行内元素

基本术语

匿名文本

没有直接包含在其他元素内的字符串(注意，空格也是匿名文本的一部分)

例

匿名框

匿名文本与其兄弟元素之间会产生一个匿名框，会影响行内元素的布局

em框

也称为字符框(一个字母或汉字)，在字体中定义；实际的字形可能比其 em 框更高或更低；在CSS中，font-size的值确定了各个 em 框的高度

内容区

在非替换元素中，内容区一般是元素中各字符的 em框串在一起构成的框；<br>在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框和内边距；

行间距

font-size值和line-height值之差，实际上要分为两半，分别应用到内容区的顶部和底部

行内框

对于非替换元素，元素行内框的高度刚好等于 line-height 的值；<br>对于替换元素，元素行内框的高度恰好等于内容区的高度；

行框

包含该行中出现的行内框的最高点和最低点的最小框，换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界；

行为与概念

内容区类似于一个块级元素的内容框

行内元素的背景应用于内容区及所有内边距

行内元素的边框要包围内容区及所有内边距和边框

非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果；也就是说，它们不影响元素行内框的高度(也不会影响包含该元素的行框的高度)

替换元素的外边距和边框会影响该元素行内框的高度，相应地，也可能影响包含该元素的行框的高度

行内框在行中根据其 vertical-align 属性值垂直对齐

构建一个行框

确定行中各元素行内框的高度

获得各行内非替换元素且不属于后代行内元素的所有文本的 font-size 值和 line-height 值，再用 line-height 值减去 font-size 值，这就得到了框的行间距；再将这个得到的行间距除以 2，将其一半分别应用到 em 框的顶部和底部

得到各替换元素的七大垂直属性，然后加在一起

确认内容区在整行的基线的上方和下方分别超出多少

对于指定了 vertical-align 属性的元素，确定期垂直偏移量

最后，再来计算行框高度，只需将基线与最高行内框顶端之间的距离加上基线与最低行内框底端之间的距离

行内格式化

行内非替换元素

建立框

对于行内非替换元素或匿名文本的某一部分，font-size 值就是内容区的高度，因为元素中所有 em 框的高度都是一样的(等于font-size)

line-height与font-size之差，一分为二，将一半应用到内容区的顶部，一半应用到内容区的底部，这就得到了行内框

例

font-size: 15px;<br>line-height: 21px;

行内框(图片来源于<CSS3权威指南>)

垂直对齐

默认元素是基线对齐的，可以通过 vertical-align 属性修改对齐方式

基线

中线

顶线

底线

(图片来源于网络)

vertical-align

描述

用来设置行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式

初始值: baseline

对于 table-cell 取值只能是 baseline、top、middle、bottom

所有垂直对齐的元素都会影响行框的高度；行框的高度要足以包含最高行内框的顶端和最低行内框的底端，包括因垂直对齐上升或下降的行内框

值

baseline

默认取值，元素基线与父元素的基线对齐

如果该元素没有基线，如图像或表单元素，或者其他替换元素，那么该元素的底端与其父元素的基线对齐

浏览器总把替换元素的底边放在父元素的基线上，即使该行中没有其他文本，在某些浏览器中，基线下面的空间会导致图像下出现一段空白

sub

元素基线与父元素的下标基线对齐

不会改变元素的字体大小

super

元素基线与父元素的上标基线对齐

不会改变元素的字体大小

text-top

元素顶端与父元素字体的顶端对齐

替换元素或任何其他类型的非文本元素会忽略这个值

text-bottom

元素底端与父元素字体的底端对齐

替换元素或任何其他类型的非文本元素会忽略这个值

middle

元素中垂线与父元素的基线加上小写 x (由font-size值确定)一半的高度值对齐

top

将元素行内框的顶端与包含该元素的行框的顶端对齐

bottom

将元素行内框的底端与包含该元素的行框的底端对齐

把一个元素升高或降低指定的距离，可以取负值

设置元素的基线相对于父元素的基线升高或降低指定的值，可取负值，正的升高，负的降低

其结果是依据该元素的 line-height 值计算得出

(图片来源于网络)

line-height

描述

设置行间距

line-height控制了行间距，这是文本行之间超出字体大小的额外空间，换句话说，其值和字体大小之差就是行间距

值

<length> | <percentage> | <number> | normal

<percentage> | <number> 相对于当前元素的font-size

改变元素类型

常用类型

block

块级元素

inline

行内元素

inline-block

行内块元素

作为替换元素放在行中，这说明，行内块元素的底端默认地位于文本行的基线上；

table

表格元素

table-cell

表格单元素格元素

list-item

列表元素

flex

弹性盒子

inline-flex

内联弹性盒子

display

描述

将元素的默认类型改变成指定类型

盒子模型

(图片来源于网络)

width

描述

一个元素的宽度(width)被定义为从左内边界到右内边界之间的距离

应用于块级元素和替换元素

可通过 box-sizing 属性来改变其包含的范围

border-box

width 的值包含宽度、边框以及内边距，即左外边框边界到右外边框边界

content-box

width 仅指内容的宽度，即左内边界到右内边界

值

<length> | <percentage> | auto

<percentage> 相对于包含块的 width

height

同 width

取值为 <percentage> 时，其包含块必须有一个显示的 height 值，否则会转换成 auto

margin

描述

设置元素与元素之间的间隔，在这个间隔中可以看到父元素的背景，在正常文档流中这个间隔中不能放置其他的元素

值

[ <length> | <percentage> | auto ]{1, 4}

<percentage> 相对于包含块的 width；不仅是左右外边距，上下外边距如果取值是百分数，也是相对于包含块的 width(正常流)

默认值为 0，可取负值

后出现的元素覆盖先出现的(正常流)

块元素左右 auto 居中

HTML标签的默认 margin 值

值的顺序，上右下左

值复制

如果缺少左边的值，则用右边的值

如果缺少下边的值，则用上边的值

如果缺少右边的值，则用上边的值

图片来源于w3school

如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到

例

div { margin: 10px; }

top ==  right == bottom == left == 10px

div { margin: 10px 15px; }

top == bottom == 10px && right == left == 15px<br>

div { margin: 10px 15px 5px; }

top == 10px && right == left == 15px && bottom == 5px

div { margin: 10px 15px 5px 10px; }

top == 10px && right == 15px && bottom == 5px && left == 10px

单外边距属性

margin-top

margin-right

margin-bottom

margin-left

垂直外边距的合并

父子元素

兄弟元素

行内非替换元素的外边距

上下外边距

规范中是允许的，不过行内非替换元素的外边距对行高没有任何影响；而且外边距实际上是透明的，所以它不会有任何视觉效果

左右外边距

左外边距会应用到元素的开始处，而右外边距会应用到元素的末尾，如果跨多行，只会应用到最后一行的最后一个字符

替换元素的外边距会影响行高，所以也会产生视觉效果

border

描述

元素的外边距内就是元素的边框；边框是围绕元素内容和内边距的一条或多条线；元素的背景会在外边框边界处停止，也就是说如果边框是透明的，会显示元素的背景色

边框有三个方面

样式或外观

border-style

描述

设置边框的样式，如果边框没有样式，则该边框不会显示，因为颜色和宽度都有默认取值

值

[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1, 4}

border-width: 3px

单边属性

border-top-style

[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1, 4}

初始值 none

border-right-style

border-bottom-style

border-left-style

注

如果有简写和单边属性，记得把单边属性放在最后

div {<br>  border-style: solid;<br>  border-top-style: dotted;<br>}

宽度或粗线

border-width

描述

设置边框的宽度

值

[ thin | medium | thick | <length> ]{1, 4}

简写属性没有初始值

单边属性

border-top-width

thin | medium | thick | <length><length></length><br><length></length>

初始值 medium

三个关键字的粗细值跟据用户代理不同而不同，不过始终都是 thick > medium > thin

border-right-width

border-bottom-width

border-left-width

颜色

border-color

描述

设置边框的颜色

如果没有声明颜色，则默认颜色是元素的前景色，及color属性的值

值

[ <color> | transparent ] {1, 4}

transparent是设置颜色透明

单边属性

border-top-color

border-right-color

border-bottom-color

border-left-color

单边简写

border-top

<border-width> || <border-style> || <border-color>

3个属性的出现顺序是任意的且每个属性只能出现一次，width 和 color 可以省略

border-right

border-bottom

border-left

简写

border

描述

全局边框的属性

值

<border-width> || <border-style> || <border-color>

3个属性的出现顺序是任意的且每个属性只能出现一次，width 和 color 可以省略

圆角边框

描述

设置边框圆角，当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果

即使元素没有边框，圆角也可以应用到背景上

(图片来源于MDN)

值

[ <length> | <percentage> ] {1, 4} [ / [<length> | <percentage>]{1, 4}]

取值为 <percentage> 时，水平圆角相对于当前元素的 width，垂直圆角相对于当前元素的 height

简写

border-radius

非简写

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

(图片来源于MDN)

例

border-radius: 1em / 5em;

border-top-left-radius: 1em 5em; <br>border-top-right-radius: 1em 5em; <br>border-bottom-right-radius: 1em 5em; <br>border-bottom-left-radius: 1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

border-top-left-radius: 4px 2px; <br>border-top-right-radius: 3px 4px; <br>border-bottom-right-radius: 6px 2px; <br>border-bottom-left-radius: 3px 4px;

border-radius: 1em 5em;

border-top-left-radius: 1em; <br> border-top-right-radius: 5em; <br> border-bottom-right-radius: 1em; <br> border-bottom-left-radius: 5em;

图片边框

描述

CSS3允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单；<br>使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式；

若 border-image-source的值为 none 或者图片不能显示，则将应用 border-style

单属性

border-image-source

定义边框图片的路径

border-image-slice

设置边框图片向内偏移

border-image-outset

定义边框图片可超出边框盒的大小

border-image-repeat

定义图片如何填充边框

border-image-width

定义图片边框宽度

简写

border-image

行内非替换元素的边框

行内元素的边框宽度不会影响行框高度，但是由于边框是可见的，如果设置了上下边框，这就可能会在视觉上影响页面的显示；<br>如果设置了左右边框，那边框所占的空间会把行中的某些部分向后移一点点；

padding

内边距在边框和内容区之间

内边距的大部分使用规则都跟外边距类似，主要说一下不同的地方

内边距不会发生合并

背景颜色会应用到内边距内

取值为百分比时也是基于父元素的 width 计算

内边距不能取负值

对于行内非替换元素的内边距使用跟 border 类似，上下内边距不会改会行框的高度，只是会延伸背景的显示区域，左右内边距会在行内内容的开始和结尾产生间距

颜色与背景

color

描述

设置元素的前景色，通常就是文本的颜色

color 值还可以影响元素边框的颜色，如果一个元素没有显示设置边框颜色，则默认为 color 属性的值

值

<color>

可继承的

背景

元素的背景区包括内容区及内边距和边框，也就是说直到边框外边界的所有区域；

background-color

描述

设置背景颜色

值

<color>

初始值为 transparent

不可继承

background-image

描述

设置背景图像，同一个元素可以设置一个或多个背景图，图像在绘制时，以Z轴方向堆叠，先指定的图像在最上面绘制

如果指定的图像无法被绘制，浏览器会将此情况等同于其值设定为none，同时会显示背景颜色，如果有设置的话

值

none | <image>

多个背景图使用英文半角分号分隔，如果没有显示设置 background-position，默认多张图是重叠在一起的

例

div {<br>  background: url(https://www.caitaijob.com/images/ico-android.png),<br>                       url(https://www.caitaijob.com/images/ico-ios.png);<br>}

background-repeat

描述

设置背景图像的重复方式，可以沿X轴或Y轴重复或者不重复

值

<repeat-style>[ <repeat-style>]

repeat-x

X轴重复

等价于 repeat no-repeat

repeat-y

Y轴重复

等价于 no-repeat repeat

repeat

X和Y轴同时重复

等价于 repeat repeat

space

等价于 space space

round

等价于 round round

no-repeat

不重复

等价于 no-repeat no-repeat

可取一个值或两个值(用空格分隔)，取两个值时第一个表示水平重复行为，第二个值表示垂直重复行为

图片来自MDN

background-position

描述

设置背景图像的初始位置，会受 background-origin 影响

值

一个或多个 <position> 值，用逗号分隔；如果只有一个值，则这个值默认设置为水平方向，同时垂直方向默认设置为50%；<br><br>关键词 left 和 right 只能被设置成水平方向的位置(第一个值)同时 top 和 bottom 只能被指定为垂直方向的值(第二个值)

可以取负值

top left == left top == 0% 0%

top, top center == center top == 50% 0%

right top == top right == 100% 0%

left, left center == center left == 0% 50%

center == center center == 50% 50%

right, right center == center right == 100% 50%

bottom left == left bottom == 0% 100%

bottom, bottom center == center bottom == 50% 100%

bottom right == right bottom == 100% 100%

background-attachment

描述

设置背景图像是否固定或者随着页面的其余部分滚动

值

fixed

背景相对于视口固定，即使元素有滚动条，背景也不会随着元素的内容滚动

local

背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域

scroll

默认值，跟随元素一起滚动

background-origin

描述

设置背景图像的起始点

当使用 background-attachment 为fixed时，该属性将被忽略不起作用

值

padding-box

默认值，背景图已padding区域为参考

border-box

背景图已border区域为参考

content-box

背景图以content区域为参考

background-clip

描述

设置元素的背景（背景图片或颜色）是否延伸到边框下面

值

border-box

背景延伸到边框外沿（但是在边框之下）

padding-box

背景延伸到内边距外沿

content-box

背景裁剪到内容区 (content-box) 外沿

text

背景被裁剪为文字的前景色

background-size

描述

设置背景图像的大小

值

指定背景图片大小，不能为负数

指定背景图片相对背景区的百分比(背景区由 background-origin 设置)；如果background-attachment的值为fixed，则背景区为浏览器可视区域

auto

默认值，以背景图片的比例缩放背景图片

cover

用背景图把整个元素的背景区域填满，背景图可能会被拉伸变形或者被裁切

contain

将背景图完全放入到背景区域，背景图不会拉伸，可能会出现背景区域部分空白

一个属性值时表示设置背景图的宽度，高度隐式的为 auto；<br>两个值的时候，第一个指宽，第二个指高；<br>逗号分隔的多个值，是用来设置多重背景的；

background

整个背景的简写

默认值

background-image: none<br><br> background-position: 0% 0%<br><br> background-size: auto auto<br><br> background-repeat: repeat<br><br> background-origin: padding-box<br><br> background-clip: border-box<br><br> background-attachment: scroll<br><br> background-color: transparent

有一点需要注意的就是在使用简写属性的时候 background-size 必须紧跟在 background-position 之后，并且他两之间使用斜线(/)分隔；其他属性的顺序可以是随意的

背景渐变

线性渐变

描述

使用 linear-gradient() 函数创建一个表示颜色线性渐变的 <image>

线性梯度由一个轴(梯度线)定义，其上的每个点具有不同的颜色

渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）

起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点

起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值

图片及描述来源于MDN

语法

linear-gradient([<angle> | to <side-or-corner>,]? <color-stop> [, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

描述渐变线的起始位置，默认从上向下

<color-stop> = <color> [<percentage> | <length>]?

由一个<color>值组成，并跟随着一个可选的终点位置

<angle>

角度值指定渐变的方向，如果设置了角度值，则渐变的起始点会变为原点(左下角)

例

div {<br>  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);<br>}

从左到右的一个线性渐变

div {<br>  background: linear-gradient(45deg, red, green 50%, blue);<br>}

green 50%，这里的 50% 是指距离元素左边框的距离

从下到上从红渐变到绿再渐变到蓝，同时再旋转45度

div {<br>  background: linear-gradient( to left top, blue, red);<br>}

从右下到左上、从蓝色渐变到红色

div { <br>  width: 500px; <br>  height: 30px; <br>  background-color: red; <br>  background-image: linear-gradient(45deg, green 25%, transparent 25%, transparent 50%, green 50%, green 75%, transparent 75%, transparent); <br>  background-size: 60px 60px; <br>}

径向渐变

描述

radial-gradient() 函数创建一个<img>，用来展示由原点（渐变中心）辐射开的颜色渐变

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定

色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧

色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

图片及描述来源于MDN

语法

radial-gradient([ circle || <length> ] [ at <position> ]?, | [ellipse || [<length> | <percentage> ]{2}] [ at <position> ]?, | [[ circle | ellipse ] || <extent-keyword> ] [ at <position> ]?, | at <position>, <color-stop> [, <color-stop>]+)

<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

用于描述边缘轮廓的具体位置

图片来自MDN

<color-stop> = <color> [ <percentage> | <length> ]?

表示某个确定位置的固定颜色值

<position>与background-position类似，如缺省，默认为中心点

<shape>渐变的形状圆形(circle)或椭圆形(ellipse)，默认椭圆

<size>渐变的尺寸大小

例

div {<br>  width: 100px;<br>  height: 100px;<br>  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);<br>}

径向渐变

这里的圆形是因为我们的宽跟高相等

div { <br>  width: 200px; <br>  height: 100px; <br>  background-image: radial-gradient(circle, red, green, blue); <br>}

圆形渐变

浮动

float

描述

设置元素沿其容器的左/右侧放置，允许文本和内联元素环绕它

浮动后的元素会从正常文档流中移除，不过它们还是对文档的其余部分有影响

浮动元素的外边距不会合并

非替换元素的浮动，应该设置一个 width 属性，否则，根据CSS规范，元素的宽度趋于0

浮动元素的包含块是其最近的块级祖先元素，浮动元素本身也会生成一个块级框，而不论元素本身是什么

浮动规则

1. 浮动元素的左/右外边界不能超出其包含块的左/右内边界

2. 浮动元素的左/右外边界必须是源文档中之前出现的左/右浮动元素的右/左外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的低端下面

3. 左浮动元素的右外边界不会在其右边右浮动元素的左边外边界的右边；一个右浮动的元素的左外边界不会在其左边任何左浮动元素的右外边界的左边

4. 一个浮动元素的顶端不能比其父元素的内顶端更高也不能比之前所有浮动元素或块级元素的顶端更高

5. 浮动元素必须尽可能高地放置，左/右浮动元素必须尽可能向左/右远放置

6. 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

7. 块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

值

left | right | none

clear

描述

元素浮动之后，通常都要进行清除浮动，这时候就需要用到 clear 属性

或者我们不想让一个元素跟在一个浮动元素的左/右，也可以使用 clear 属性

清除区域(clearance)

清除区域是在元素上外边距之上增加的额外间隔，这意味着元素设置 clear 属性时，它的外边距并不改变，但是元素会向下移，这个向下移的间隔就是清除区域造成的

值

left | right | both | none

定位

position

描述

CSS属性 position 用于指定一个元素在文档中的定位方式

值

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效

relative

相对定位，使元素偏移某个距离，元素原本所占的空间仍保留

absolute

绝对定位，元素会从正常文档流中删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样；绝对定位后会生成一个块级框，而不论原来它在正常流中是何种类型的框

fixed

固定定位，表现类似于 absolute，只是其包含块是视窗本身

定位元素的包含块

根元素的包含块由用户代理建立，在HTML中通常就是视窗

对于一个非根元素，如果其postion值是relative或static，其包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成

对于一个非根元素，如果其position值是absolute，其包含块是最近的position值不是static的祖先元素(会逐级往外找，直到初始包含块)

偏移属性

描述

元素设置了定位属性后，通常需要配合偏移属性来设置其位置(也可以使用margin)

top

值

<length> | <percentage> | auto

对于百分数，其 top 和 bottom 属性相对于包含块的高度，而 left 和 right 属性相对于包含块的宽度

可以取负值，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移，最终可能会超出包含块的范围

right

bottom

left

z-index

描述

设置元素的上下层级

值

<integer> | auto

值越大离用户越近，z-index值大的元素会覆盖值小的元素

取值为整数，可以是负数

只能应用到定位元素上

内容溢出

如果一个元素的内容对于元素大小来说过大，就有可能溢出元素本身

overflow-x

设置水平溢出时的处理方案

overflow-y

设置垂直溢出时的处理方案

overflow

描述

设置元素溢出的处理方案

只能应用于块元素和替换元素

值

visible

默认值，当元素的内容在元素框之外也可见，这就导致内容超出其自身的元素框，但不会改变框的大小

hidden

超出之后，隐藏

scroll

始终显示滚动条

auto

跟据内容自动适应，如果设置了固定宽、高，当内容超出后，显示滚动条

visibility

描述

控制元素的可见性

值

visible

默认值，可见

hidden

不可见，但是元素的布局还是保留的，换句话说，元素还是在原来的位置，并且还是要占位的，只是看不见

跟display: none的区别就是，display: none后元素不可见，并且不占位

collapse

主要用于表格中的行与列，如果应用于非表格元素与hidden含义类似

应用于表格中的表现跟 display: none 类似，不显示，并且不占位，但是其他行与列的宽和高不会重新计算，行与列的宽高计算依然会将被设为 collapse 行和列考虑进去

块级格式化上下文(BFC)

描述

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动

BFC就是页面上的一个隔离独立容器，容器里面的子元素不会影响到外面的元素，反之亦如此

创建规则

根元素

浮动元素 (元素的 float 不是 none)

绝对定位元素 (元素的 position 为 absolute 或 fixed)

display为inline-block, table-cell, table-caption, flex, inline-flex

具有overflow 属性且值不是 visible 的块元素

column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中

用处

清除内部浮动

防止margin重叠

表格

display

table | table-cell | table-row

border-collapse

描述

设置表格中边框是否合并

值

separate

默认值，不合并

collapse

相邻表格边框合并，共同使用一个边框

border-spacing

描述

当border-collapse值为 separate时，设置相邻单元格边框之间的距离

值

<length> <length>?

两个值时，分别代表水平和垂直间隔

例

table { border-spacing: 10px 20px; }

table-layout

描述

设置表格单元中，行和列的算法；使用固定宽度布局时，相对于自动宽度模型，用户代理可以更快地计算出表的布局

值

auto

大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容

fixed

表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽

列表

list-style-type

描述

设置列表项的标志类型，只能应用于 display: list-item 元素

值

disc

默认值，一个实心圆

circle

一个空心圆

square

一个方块

decimal

1, 2, 3, 4, 5 ......

decimal-leading-zero

01, 02, 03, 04, 05 ......

upper-alpha

A, B, C, D, E ......

lower-alpha

a, b, c, d, e ......

......