CSS大纲
2019-02-20 13:53:05 1 举报AI智能生成
登录查看完整内容
CSS学习导图
作者其他创作
大纲/内容
CSS大纲
基础知识
发展历程
什么是CSS？
层叠样式表(Cascading Style Sheets)
作用
用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现；描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题；
优势
集中管理易于使用
可在多个页面上使用同一个样式
可针对所有同类型的元素应用一组样式
缩减文档大小
为将来做准备
CSS之前
HTML只是一种简洁的标记语言，并不关心外观
HTML不能设置文本样式
<center>
<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 />标签
链接外部样式文件
可共享，方便维护
不同媒体，加载不同文件
media
all
用于所有媒体
screen
在屏幕媒体中使用(Web浏览器都属于屏幕媒体)
print
打印设备、打印预览
...
核心特性
向文档中的一组元素应用某些规则；每个样式表都是由一系列规则组成的
规则结构
选择器(selector)
选择器必须以字母或下划线开头，其后可以是数字、字母、下划线、中横线等，区分大小写；
建议使用小写字母开头，用中横线进行分隔多个单词，用有意义的单词命名
声明块(declaration block)
{
标记声明块的开始
声明1
语法
属性: 属性值;
属性
一些W3C规则的一些标识符，指示要修改的样式特征，如width-修改宽度，font-设置字体相关
属性值
每个属性都必须有一个或多个值，用来指示这个属性的样式，你想让他变成什么样子
大部分情况下值是一个关键字，或该属性可取关键字的一个列表(包含一个或多个关键字，用空格分隔)
Tips
属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围；如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它
CSS 的属性和属性值都是区分大小写的
属性和属性值之间，用英文半角冒号 (:) 隔离，属性值后用英文半角分号(;)隔离另一个声明
声明2
声明N
}
标记声明块的结束
注释
/* 注释内容 */
选择器
基本选择器
元素选择器
必须是合法的 HTML 标签名
标签名 { 声明 }
例
div { font-size: 14px; }
<div>这是一个字号为14像素的div</div>
设置文档中所有的div标签的字体大小为 14像素
类选择器
通过 HTML 的全局属性 class 来关联 CSS 中的类选择器
.自定义的类名 { 声明 }
必须以一个英文点号(.)开头；通过这个点号，可以帮助类选择器与其他选择器相组合时分隔开来；
.header { font-size: 18px; }
<div class=\"header\">字体大小为18像素</div>
设置页面中 class 属性值包含 header 的标签字体大小为 18像素；class=\"header\"或class=\"header search\"都可以匹配到
例2
li.name { color: red; }
<ul> <li>十木</li> <li class=\"name\">Jay</li></ul>
设置页面中 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 标签文本颜色为红色；多个类的顺序无关；
ID选择器
通过 HTML 的全局属性 id 来关联 CSS 中的ID选择器
#自定义的id名 { 声明 }
必须以一个井号(#)开头；通过这个井号，可以帮助ID选择器与其他选择器相组合时分隔开来；
一个文档中ID的值是唯一的，并且ID属性不允许有以空格分隔的词列表
#tel { color: green; }
<a id=\"tel\" href=\"tel:186****4589\">拨打电话(绿色的文本)</a>
设置页面中 id 属性的值为 tel 的元素的文本颜色为绿色；
通配选择器
通配选择器，显示为一个星号(*)，匹配任意的HTML标签
* { 声明 }
设置所有的 HTML 标签的样式
* { color: green; }
<p>绿色的文本</p><div>绿色的文本</p><span>绿色的文本</span>
例子中的<p>、<div>、<span>标签的文本都将显示为绿色
群组选择器
选择器可以是其他基本选择器，也可以是后面的属性选择器或伪类选择器
<div>红色</div><span>默认颜色</span><p>红色</p><span class=\"warning\">红色</span>
设置<div>、p及class=\"warning\"的元素的文本为红色
属性选择器
属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；属性选择器，必须是放到一对英文的中括号内；
[attribute]
匹配带有指定属性的元素
[属性名] { 声明 }[属性名=\"属性值\"] { 声明 }
[class] { color: red; }
<a class=\"author\">十木</a><span class=\"\">Jay</span>
设置文档中包含 class 属性的元素文本颜色为 红色
[attribute=value]
匹配带有指定的属性和属性值的元素，属性的值必须是等于的，不能是包含
[属性名=属性值] { 声明 }
[title=name] { color: green; }
<span title=\"name\">Jay</span><span title=\"name hello\">十木</span>
设置存在 title 属性且 title属性值 等于 name 的元素，文本颜色为绿色；上例中，只会匹配第一个 span；因为第二个 span 的title属性值还包含\" hello\"；
[attribute^=value]
匹配带有指定属性且属性的值以指定的开头的所有元素
[属性名^=属性值] { 声明 }
[title^=h] { color: green; }
<span title=\"this\">默认颜色</span><span title=\"hi\">绿色</span>
设置存在 title 属性且 title属性值以字母 h 开头的元素，文本为绿色
[attribute$=value]
匹配带有指定属性且属性的值以指定的结束的所有元素
[属性名$=属性值] { 声明 }
[title$=o] { color: green; }
<span title=\"hello\">绿色</span><span title=\"ha\">默认</span>
设置存在 title 属性且 title属性值以字母 o 结尾的元素，文本为绿色
[attribute*=value]
匹配带有指定属性且属性值中包含指定值的每个元素，可以在属性值的任意位置
[属性名*=属性值] { 声明 }
[title*=e] { color: green; }
<span title=\"hello\">绿色</span><span title=\"world\">默认颜色</span>
设置存在 title 属性且 title属性值存在字母 e 的元素，文本为绿色
[attribute~=value]
匹配带有指定属性且属性值包含指定词汇的所有元素，匹配的属性值必须是一个词汇
[属性名~=属性值] { 声明 }
[title~=hel] { color: green; }
<span title=\"hello\">默认</span><span title=\"hel world\">绿色</span>
设置存在 title 属性且 title属性值列表中包含词汇 hel 的元素，文本为绿色
[attribute|=value]
匹配带有指定属性且属性值是指定的单词或以指定的 单词- 开头的元素
[属性名|=属性值] { 声明 }
p[title|=hello] { color: green; }
<span title=\"hello\">默认颜色</span><p title=\"hello world\">默认颜色</p><p title=\"hello\">绿色</p><p title=\"hello-world\">绿色</p>
设置存在 title 属性且 title 属性值等于 hello 或以 hello- 开头的 p 标签，文本为绿色
派生选择器
派生选择器允许我们根据文档的上下文关系来确定元素的样式
HTML DOM Tree(图片来源于w3school)
HTML DOM
节点之间的关系
子选择器
该元素是另一个元素的直接子元素，元素之间必须是父子关系，子选择器使用大于号（>）
父元素 > 子元素 { 声明 }
父/子元素可以是HTML标签，也可以是其他选择器
.main > span { color: red; }
<div class=\"main\"> <span>红色</span> <p><span>默认颜色</span></p></div>
设置父元素的class包含main的子元素是 <span> 标签的文本颜色为红色，满足两条件：1. 父元素的 class 必须包含有 main；2. 元素本身必须是 <span> 标签；
后代选择器
匹配嵌套在某一个元素中的某个元素(可以是子元素，也可以是孙子元素)，后代选择器使用英文半角空格( )
祖先元素 后代元素 { 声明 }
.main span { color: green; }
<div class=\"main\"> <span>绿色</span> <p>默认颜色<span>绿色</span></p></div>
设置祖先元素的class包含main的所有后代元素是 <span> 标签的文本颜色为绿色，满足两条件：1. 祖先元素的 class 必须包含有 main；2. 元素本身必须是 <span> 标签；
相邻兄弟选择器
匹配紧挨着当前元素的后一个兄弟元素，使用加号( + )：1. 他们有共同的父元素；2. 是紧挨着的后边的第一个兄弟元素；3. 如果中间隔着另一个元素，则样式不会生效；
当前元素 + 挨着的后边的第一个兄弟元素 { 声明 }
.bro + span { color: green; }
设置class包含 bro 的元素紧挨着的兄弟元素，并且这个兄弟元素必须是 <span> 标签，文本颜色为绿色
通用兄弟选择器
匹配当前元素的后边所有兄弟元素，使用波浪线( ~ )：1. 他们有共同的父元素；2. 后边所有的兄弟元素；3. 中间可以隔着其他元素；
当前元素 ~ 后边的所有兄弟元素 { 声明 }
伪类选择器
CSS 伪类（pseudo-class） 是一个以冒号( : )作为前缀的关键字；当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）
:伪类关键字 { 声明 }
:active
伪类匹配被用户激活的元素。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间；通常用于但并不限于 <a> 和 <button> HTML元素。这个样式可能会被后声明的其他链接相关的伪类覆盖：这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active的样式放在所有链接相关的样式后；这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active
:checked
:default
:disabled
表示任何被禁用的元素；如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态
:empty
没有子元素的元素，子元素只可以是元素节点或文本（包括空格和换行），注释节点不受影响
:enabled
匹配任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的
:first-child
匹配一个元素的第一个子元素，必须是第一个子元素，跟位置有关的
:first-of-type
匹配任意类型当中第一次出现的元素，不用管他的位置
:focus
匹配获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择时会被触发
:hover
通常匹配在PC上鼠标移上去的元素
:last-child
匹配一个元素的最后一个子元素，必须是最后一个子元素，跟位置有关的
:last-of-type
匹配任意类型当中最后一次出现的元素，不用管他的位置
:link
匹配尚未访问的链接
:not(X)
否定伪类; 是一个简单的X选择器为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器
:nth-child(an+b)
odd
匹配奇数，等价于 2n + 1
even
匹配偶数，等价于 2n
int
expression
span:nth-child(-n+3)
匹配前三个子元素中的span元素
:nth-last-child(an+b)
基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处
li:nth-last-child(-n+4)
匹配HTML列表中的最后四行
:nth-of-type(an+b)
匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值
:nth-last-of-type(an+b)
它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处
:only-child
:only-of-type
匹配任意一个元素，这个元素没有其他相同类型的兄弟元素；
:required
匹配拥有required属性的 <input> 或 <textarea> 元素
:root
匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 元素选择器相同
:target
匹配id是URI的片段标识符的元素
:visited
匹配已访问的链接元素
伪元素选择器
伪元素选择器，是以两个冒号(::)开始，后根关键字，伪元素不是描述特殊状态，它们允许您为元素的某些部分设置样式
::伪元素关键字 { 声明 }
::before
为匹配的元素创建一个伪元素，该伪元素将作为这个元素的第一个子元素，通常需要配合 content 属性一起使用；默认该伪元素是一个行内元素
::after
为匹配的元素创建一个伪元素，该伪元素将作为这个元素的最后一个子元素，通常需要配合 content 属性一起使用；默认该伪元素是一个行内元素
::first-letter
匹配首行的首字母，只有一小部分CSS属性能够使用
::first-line
匹配首行，只有一小部分CSS属性能够使用
::selection
匹配选中的元素，只有一小部分CSS属性能够使用
结构和层叠
特殊性(优先级)
一个元素可以使用多个规则，但是最终相同的声明，只会显示一个；浏览器通过特殊性(优先级)来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值；特殊性是基于不同种类选择器组成的匹配规则。
选择器的特殊性由 四 部分构成，由 四 位数字表示；左边每一位都比后面一位大(不管后面一位的数值是多大)
行内样式(style=\"\")
类、属性及伪类选择器
元素及伪元素选择器
通配符
:not()
对特殊性没有影响；但是，在 :not() 内部声明的选择器会影响优先级
重要性
当某条声明特别重要，但是选择器的特殊性又比较低，这时候就可以就可以使用 !important 来标志其重要性
重要性优先级始终比非重要性的声明高
一旦确定了一个选择器的特殊性，那么其值将授予里面所有的声明
继承
后代元素获取祖先元素的属性值
某些属性不能继承，如border，大多数盒模型属性(margin、padding、background、border)都不能继承；当元素的一个 继承属性 （inherited property ）没有指定值时，则取父元素的同属性的 计算值 (computed value)；当元素的一个 非继承属性 (non-inherited property ) 没有指定值时，则取属性的 初始值(initial value)；
inherit，显示设置继承父元素；继承的值没有特殊性
层叠
按特殊性排序
按出现顺序排序
属性、属性值和单位
用来描述元素的外观，同一个属性可以取多种类型的值，同一个属性在一个声明块中应该只出现一次，如果出现多次，后出现的会覆盖先出现的(在特殊性相同的情况下)
前缀
-moz
Firefox
-webkit
Chrome/Safari
-o
Opera
-ms
IE
CSS属性值定义语法（CSS value definition syntax）
基本组成元素
关键字
一般关键字
特殊关键字
所有CSS属性值都可以使用inherit或者initial这两个特殊关键字；这两个关键字不会出现在CSS合法值定义中，但都是隐含可用的
符号
斜杠('/')
斜杠用来分隔一个值的多个部分，通常用在CSS缩写中
逗号用来分隔数个并列值，或者分隔函数的参数
带类型的参数
<string>
代表参数必须是一个字符串，应用放到单(' ')或双(\" \")引号中
<angle>
代表着一个表示度数（degrees）、 百分度（gradians）、弧度（radians）或者转数（turns）的角度值；例如在rotate和skew transform中它会被用到
{ transform: rotate(20deg) }
<number>
代表着一个数字，可为整数或小数，注意没有任何单位的哟，并不是一个CSS尺寸
{ line-height: 1.5 }
<integer>
一种特殊类型的<number>，代表一个整数，可为负数或正数
{z-index: 1}
<length>
{ margin: 10px }
<percentage>
一个百分比值
组合符号
方括号([])
方括号将多个属性值组成一个整体，用来强调组合的优先级
并置
指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都必须出现并且按所规定的顺序出现
“与”组合符(&&)
\"与\" 组合符连接的各个部分都必须出现，但是顺序任意
“或”组合符(||)
\"或\" 组合符表示其连接的所有组成元素是可选的，次序任意，但是至少其中一个要出现。“或”组合符通常用来描述属性缩写中的各部分
“互斥”组合符(|)
\"互斥\" 组合符表示各组成部分中只能恰好出现一个，通常用来分隔一个属性的所有可选值
数量符号
星号 (*)
星号表示可以出现 0 到 多次(（即不出现，出现一次，或出现任意多次)
加号 (+)
加号表示可以出现一次或多次
问号 (?)
问号表示可选，即出现零次或一次
大括号 ({ })
大括号包含两个以逗号分隔的整数A与B，表示最少出现A次，且最多出现B次
井号 (#)
井号表示可以出现一次或多次，与加号相似。但是其多次出现必须以逗号分隔
总结
组合符号与数量符号(图片来源于MDN)
种类
初始值
可以看成是属性的默认值
指定值(specified value)
CSS属性的指定值会通过3种途径取得
首先，在当前文档的样式表中查找给这个属性赋的值
如果在当前文档的样式表中没有匹配到，则会尝试从父元素继承一个值
如果上面两种途径都不可行，则会使用其初始值作为指定值
计算值(computed value)
应用值(used value)
是完成所有计算后最终使用的值
计算出CSS属性的最终分为三个步骤
然后，按规范算出 计算值computed value (例如， span 指定 position: absolute 后display 变为 block)
最后，计算布局(尺寸比如 auto 或 百分数 换算为像素值 )， 结果即 应用值used value这些步骤是在内部完成的
与计算值的区别
实际值(actual value)
是应用值（used value）被应用后的近似值
解析值(resolved value)
getComputedStyle()返回的值
属性的简写
简写属性是可以让我们同时设置其他几个 CSS 属性值，其目的在于将那些关于同一主题的常见属性的定义集中在一起
边界情况
没有指定值的属性会被设置为其初值
div { background-color: red; background: url(images/bg.gif) no-repeat top right;}
这里的红色背景将不会显示，因为会被下边 background 属性的值覆盖掉；第二条声明中background使用的属性的简写，而在简写中并没有定义背景颜色，因此会使用background-color的默认值 transparent
关键词 inherit 只可以应用于单独属性，如果应用于一个简写属性则必须整体都应用
注意简写值的顺序
非简写
div { margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px;}
简写
div { margin: 10px 15px;}
单位
绝对长度单位
px
与显示设备相关。对于屏幕显示，通常是一个设备像素（点）的显示。对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右
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上面时 ，它代表了它的初始值；常用作自适应布局
百分比
%
百分比单位依赖于某个属性的计算值，通常跟据应用在不同的属性上，其参考值不一样
视口比例的长度单位
相对于视口的长度大小，视口即文档可视的部分；如果html或body设置了overflow:auto，则滚动条所占的空间是算在视口内的；当设置为overflow:scroll时，滚动条所占的空间不算在视口内；
vh
视口高度的 1/100
vw
视口宽度的 1/100
角度单位
deg
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
例(图片来源于 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包含 147 个
未知的颜色关键字，会让CSS属性无效
某些关键字表示相同的颜色
darkgray / darkgreydarkslategray / darkslategreydimgray / dimgreylightgray / lightgreylightslategray / lightslategreygray / greyslategray / slategrey
RGB立体坐标系统(红-绿-蓝(red-green-blue ))
以 '#' 开头的十六制
\"#\
三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的
rgb() 函数表达式
\"rgb\" 后跟3个 <integer> 或3个 <percentage> 值整数范围在 0~ 255 间，百分比在 0% ~ 100%
整数 255 相当于 100%，和十六进制符号里的FF
rgba() 函数表达式
rgba 扩展了 rgb 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度；a 表示透明度：0=透明；1=不透明，取值只能是 0~1之间
HSL圆柱坐标系统(色相-饱和度-明度（Hue-saturation-lightness）)
hsl() 函数表达式
hsla() 函数表达式
类似rgba
HSL与十六进制对比图
transparent 关键字
transparent 关键字在 CSS Level 2 (Revision 1) 中不是一个真实的颜色；它是一个特殊的关键字；只能用在 background 和 border 属性中，本质上使用它可以覆盖一个继承的单色；
随着阿尔法通道（alpha channels）透明度的支持，transparent 在 CSS Colors Level 3 中被重新定义为一个真实的颜色，允许在任何一个需要 <color> 类型的值的地方使用，像 color 属性
currentColor 关键字
代表原始的 color 属性的计算值
字体相关属性
font-family
描述
为浏览器指定一个字体或一个字体的列表(用逗号分隔)，如果设置的字体都不可用，则会使用默认的字体代替
多个字体的优先级是从左往右的，浏览器优先使用最左边定义的字体，如果没找到才会依次往右找
网页中使用的字体，必须是用户电脑上已安装的字体，CSS3支持字体下载
网页安全字体
字体对不同系统的可用性不一样，只有几个字体通常可以应用到所有系统，这些字体都是所谓的网页安全字体
常用网页安全字体(图片来源于MDN)
引号
当一个字体中有空格或包含# 或 $以及中文字体的时候，需要用引号包裹字体名称
初始值依赖与用户的操作系统，可继承
值
font-weight
设置字体的粗细程度
font-weight 数值采取离散式定义（使用 100 的整倍数）；数值为实数，非 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
初始值是 medium，可继承
xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inhert
取值为 <percentage> 时或单位是em、ex时，跟据父元素的 font-size 值来计算；取值为 <length> 时，长用单位为 px、em、rem
div { font-size: 14px }
font-style
选择 font-family 字体下的 italic 或 oblique 样式；不是所有的字体都有确切的 oblique 和 italic 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形；
初始值是 normal，可继承
normal | italic | oblique
normal
选择 font-family 的常规字体
italic
选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代
oblique
选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（ italic ）替代
font-variant
设置字体的变形
small-caps | normal | none
small-caps
使用小型大写字母
font-stretch
字体拉伸，让字体变胖或变瘦
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font
[[<font-style> || <font-variant> || <font-weight>] ? <font-size>[/<line-height>]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar
关键字用于表示某个特定的系统字体，以代替每个单独的普通属性
@font-face规则
设置网页的在线字体，当用户电脑上不存在此种字体时，会执行下载并使用
不能在一个 CSS 选择器中定义 @font-face
@font-face { [ font-family: <family-name>; ] || [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] || [ unicode-range: <urange>#; ] || [ font-variant: <font-variant>; ] || [ font-feature-settings: normal | <feature-tag-value>#; ] || [ font-variation-settings: normal | [ <string> <number>] # || [ font-stretch: <font-stretch>; ] || [ font-weight: <weight>; ] || [ font-style: <style>; ]}
src
远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它
设置字体的名称，为后边的属性调用使用
@font-face { font-family: MyHelvetica; src: local(\"Helvetica Neue Bold\
应用
字体图标(icofont)
在线图标转字体
文字相关属性
text-indent
设置块元素的首行文本缩进
只能应用于块级元素
<length> | <percentage>
初始值为 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
设置垂直对齐文本
应用于行内元素、表格单元格和替换元素
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
word-spacing
设置字间距
这里的“字”可以是任何非空白符组成的串，并由某种空白符包围；
<length> | normal
正长度值，会增加字之间的间隔，负长度值，会把字拉近
letter-spacing
设置字母间隔
在汉语体系中，一个汉字可以看成是一个字母
用法跟word-spacing类似
text-transform
文本转换
uppercase | lowercase | capitalize | none
text-decoration
文本装饰
none | [ underline || overline || line-through || blink ]
text-shadow
文本阴影
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)；
框中的每层大小都可以使用一些特定的CSS属性来调整
外边距
margin
top+right+bottom+left
边框
border
内边距
padding
内容
width
height
#text
框的类型可以由 display 属性来决定
块
block
行内
inline
行内块
inline-block
表格
table
单元格
table-cell
元素框
包含块(Containing blocks)
简介
元素框的定位和尺寸的计算，都取决于一个矩形边界，这个矩形就被称为是一个包含块(containing blocks)。一般来说，元素生成的框会扮演它子孙元素包含块的角色；我们称之为：一个元素的框为它的子孙节点创建了包含块。(包含块不一定是它的父元素，但一定是它的祖先元素)
对于正常的文本流中的一个元素，其包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界(content edge)构成
<div> <table> <tr> <td>Hello CaiTai</td> </tr> </table></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之类的元素，这些元素不会在框之前和之后生成“行分隔符”，通常是块级元素的后代元素
正常文档流中行内元素会从左往右，依次摆放，直接到达右边界才会折行
文档树顶端的元素，在HTML文档中，就是 html 标签
完整的框模型(图片源自网络)
水平格式化
水平属性
margin-left
左外边距
border-left
左边框
padding-left
左内边距
元素自身的宽度
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><p>一个段落</p></div>
div { width: 300px; }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; }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 参与计算；只是针对从左向右读的语言
结果将 margin-right 重置为 auto 参与计算，即 50 - 0 - 100 - 0 - 0 - auto，最终 margin-right 的应用值就是 150；
div { width: 300px; }p { width: 100px; margin-left: auto; margin-left: auto; }
块元素的水平居中，与 text-align: center 是不同的哟，一个是设置的块元素的内联内容，一个是设置的块元素本身
div { width: 300px; }p { width: auto; margin-left: 50px; margin-right: 50px; }
等价于没有设置 width，此时 width 会占满剩余的空间
div { width: 300px; }p { width: auto; margin-left: auto; margin-right: 50px; }
当三个属性中设置了 width: auto；然后只设置了 margin-left 或 margin-right 其中一个为 auto，而另一个为具体值时，那么在参于计算的时候值为 auto 的 margin会计算成 0
div { width: 300px; }p { width: auto; margin-left: auto; margin-right: auto; }
margin-left 和 margin-right 计算成 0
负外边距
在水平位置的 7 大属性中，只有外边距可以设置为 负值
div { width: 300px; }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
上内边距
高度
元素的默认高度是由其内容决定的并且高度值还会受内容的高度影响
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属性对垂直外边距的合并和负外边距都有影响
列表元素
列表元素除具有块元素的一些特性外，它还有自身的一些特性，一般会在元素前面生成一个圆点或一个数字
基本术语
匿名文本
没有直接包含在其他元素内的字符串(注意，空格也是匿名文本的一部分)
<p>这是一个<em>段落</em>哟！</p>
匿名框
匿名文本与其兄弟元素之间会产生一个匿名框，会影响行内元素的布局
em框
也称为字符框(一个字母或汉字)，在字体中定义；实际的字形可能比其 em 框更高或更低；在CSS中，font-size的值确定了各个 em 框的高度
内容区
在非替换元素中，内容区一般是元素中各字符的 em框 串在一起构成的框；在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框和内边距；
行间距
font-size值和line-height值之差，实际上要分为两半，分别应用到内容区的顶部和底部
行内框
对于非替换元素，元素行内框的高度刚好等于 line-height 的值；对于替换元素，元素行内框的高度恰好等于内容区的高度；
行框
包含该行中出现的行内框的最高点和最低点的最小框，换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界；
行为与概念
内容区类似于一个块级元素的内容框
行内元素的背景应用于内容区及所有内边距
行内元素的边框要包围内容区及所有内边距和边框
非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果；也就是说，它们不影响元素行内框的高度(也不会影响包含该元素的行框的高度)
替换元素的外边距和边框会影响该元素行内框的高度，相应地，也可能影响包含该元素的行框的高度
行内框在行中根据其 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;line-height: 21px;
行内框(图片来源于<CSS3权威指南>)
垂直对齐
默认元素是基线对齐的，可以通过 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 值计算得出
改变元素类型
常用类型
行内块元素
作为替换元素放在行中，这说明，行内块元素的底端默认地位于文本行的基线上；
表格元素
表格单元素格元素
list-item
flex
弹性盒子
inline-flex
内联弹性盒子
display
将元素的默认类型改变成指定类型
盒子模型
一个元素的宽度(width)被定义为从左内边界到右内边界之间的距离
应用于块级元素和替换元素
可通过 box-sizing 属性来改变其包含的范围
width 的值包含宽度、边框以及内边距，即左外边框边界到右外边框边界
width 仅指内容的宽度，即左内边界到右内边界
<length> | <percentage> | auto
<percentage> 相对于包含块的 width
同 width
取值为 <percentage> 时，其包含块必须有一个显示的 height 值，否则会转换成 auto
设置元素与元素之间的间隔，在这个间隔中可以看到父元素的背景，在正常文档流中这个间隔中不能放置其他的元素
<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
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
单外边距属性
垂直外边距的合并
父子元素
兄弟元素
行内非替换元素的外边距
上下外边距
规范中是允许的，不过行内非替换元素的外边距对行高没有任何影响；而且外边距实际上是透明的，所以它不会有任何视觉效果
左右外边距
左外边距会 应用到元素的开始处，而右外边距会应用到元素的末尾，如果跨多行，只会应用到最后一行的最后一个字符
替换元素的外边距会影响行高，所以也会产生视觉效果
元素的外边距内就是元素的边框；边框是围绕元素内容和内边距的一条或多条线；元素的背景会在外边框边界处停止，也就是说如果边框是透明的，会显示元素的背景色
边框有三个方面
样式或外观
border-style
设置边框的样式，如果边框没有样式，则该边框不会显示，因为颜色和宽度都有默认取值
border-width: 3px
单边属性
border-top-style
初始值 none
border-right-style
border-bottom-style
border-left-style
注
如果有简写和单边属性，记得把单边属性放在最后
div { border-style: solid; border-top-style: dotted;}
宽度或粗线
border-width
设置边框的宽度
简写属性没有初始值
border-top-width
thin | medium | thick | <length>
初始值 medium
三个关键字的粗细值跟据用户代理不同而不同，不过始终都是 thick > medium > thin
border-right-width
border-bottom-width
border-left-width
border-color
设置边框的颜色
如果没有声明颜色，则默认颜色是元素的前景色，及color属性的值
transparent是设置颜色透明
border-top-color
border-right-color
border-bottom-color
border-left-color
单边简写
<border-width> || <border-style> || <border-color>
3个属性的出现顺序是任意的且每个属性只能出现一次，width 和 color 可以省略
全局边框的属性
圆角边框
设置边框圆角，当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果
即使元素没有边框，圆角也可以应用到背景上
(图片来源于MDN)
取值为 <percentage> 时，水平圆角相对于当前元素的 width，垂直圆角相对于当前元素的 height
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius: 1em / 5em;
border-top-left-radius: 1em 5em;border-top-right-radius: 1em 5em;border-bottom-right-radius: 1em 5em;border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
border-top-left-radius: 4px 2px;border-top-right-radius: 3px 4px;border-bottom-right-radius: 6px 2px;border-bottom-left-radius: 3px 4px;
border-radius: 1em 5em;
border-top-left-radius: 1em; border-top-right-radius: 5em; border-bottom-right-radius: 1em; border-bottom-left-radius: 5em;
图片边框
CSS3允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单；使用 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
行内非替换元素的边框
行内元素的边框宽度不会影响行框高度，但是由于边框是可见的，如果设置了上下边框，这就可能会在视觉上影响页面的显示；如果设置了左右边框，那边框所占的空间会把行中的某些部分向后移一点点；
内边距在边框和内容区之间
内边距的大部分使用规则都跟外边距类似，主要说一下不同的地方
内边距不会发生合并
背景颜色会应用到内边距内
取值为百分比时也是基于父元素的 width 计算
内边距不能取负值
对于行内非替换元素的内边距使用跟 border 类似，上下内边距不会改会行框的高度，只是会延伸背景的显示区域，左右内边距会在行内内容的开始和结尾产生间距
颜色与背景
color
设置元素的前景色，通常就是文本的颜色
color 值还可以影响元素边框的颜色，如果一个元素没有显示设置边框颜色，则默认为 color 属性的值
<color>
可继承的
背景
元素的背景区包括内容区及内边距和边框，也就是说直到边框外边界的所有区域；
background-color
设置背景颜色
初始值为 transparent
不可继承
background-image
设置背景图像，同一个元素可以设置一个或多个背景图，图像在绘制时，以Z轴方向堆叠，先指定的图像在最上面绘制
如果指定的图像无法被绘制，浏览器会将此情况等同于其值设定为none，同时会显示背景颜色，如果有设置的话
none | <image>
多个背景图使用英文半角分号分隔，如果没有显示设置 background-position，默认多张图是重叠在一起的
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%；关键词 left 和 right 只能被设置成水平方向的位置(第一个值)同时 top 和 bottom 只能被指定为垂直方向的值(第二个值)
可以取负值
<percentage> <percentage>
<length> <length>
top left == left top == 0% 0%
right top == top right == 100% 0%
center == center center == 50% 50%
bottom left == left bottom == 0% 100%
bottom right == right bottom == 100% 100%
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动
fixed
背景相对于视口固定，即使元素有滚动条，背景也不会随着元素的内容滚动
local
背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域
scroll
默认值，跟随元素一起滚动
background-origin
设置背景图像的起始点
当使用 background-attachment 为fixed时，该属性将被忽略不起作用
padding-box
默认值，背景图已padding区域为参考
背景图已border区域为参考
背景图以content区域为参考
background-clip
设置元素的背景（背景图片或颜色）是否延伸到边框下面
背景延伸到边框外沿（但是在边框之下）
背景延伸到内边距外沿
背景裁剪到内容区 (content-box) 外沿
text
背景被裁剪为文字的前景色
background-size
设置背景图像的大小
指定背景图片大小，不能为负数
指定背景图片相对背景区的百分比(背景区由 background-origin 设置)；如果background-attachment的值为fixed，则背景区为浏览器可视区域
auto
默认值，以背景图片的比例缩放背景图片
cover
用背景图把整个元素的背景区域填满，背景图可能会被拉伸变形或者被裁切
contain
将背景图完全放入到背景区域，背景图不会拉伸，可能会出现背景区域部分空白
一个属性值时表示设置背景图的宽度，高度隐式的为 auto；两个值的时候，第一个指宽，第二个指高；逗号分隔的多个值，是用来设置多重背景的；
background
整个背景的简写
默认值
background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparent
有一点需要注意的就是在使用简写属性的时候 background-size 必须紧跟在 background-position 之后，并且他两之间使用斜线(/)分隔；其他属性的顺序可以是随意的
背景渐变
线性渐变
使用 linear-gradient() 函数创建一个表示颜色线性渐变的 <image>
线性梯度由一个轴(梯度线)定义，其上的每个点具有不同的颜色
渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）
起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）
终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点
起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值
图片及描述来源于MDN
<side-or-corner> = [left | right] || [top | bottom]
描述渐变线的起始位置，默认从上向下
<color-stop> = <color> [<percentage> | <length>]?
由一个<color>值组成，并跟随着一个可选的终点位置
角度值指定渐变的方向，如果设置了角度值，则渐变的起始点会变为原点(左下角)
从左到右的一个线性渐变
green 50%，这里的 50% 是指距离元素左边框的距离
从下到上从红渐变到绿再渐变到蓝，同时再旋转45度
从右下到左上、从蓝色渐变到红色
径向渐变
radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变
径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。 径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定
色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧
色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
用于描述边缘轮廓的具体位置
<color-stop> = <color> [ <percentage> | <length> ]?
表示某个确定位置的固定颜色值
<position>与background-position类似，如缺省，默认为中心点
<shape>渐变的形状圆形(circle)或椭圆形(ellipse)，默认椭圆
<size>渐变的尺寸大小
这里的圆形是因为我们的宽跟高相等
圆形渐变
浮动
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
relative
相对定位，使元素偏移某个距离，元素原本所占的空间仍保留
absolute
绝对定位，元素会从正常文档流中删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样；绝对定位后会生成一个块级框，而不论原来它在正常流中是何种类型的框
固定定位，表现类似于 absolute，只是其包含块是视窗本身
定位元素的包含块
根元素的包含块由用户代理建立，在HTML中通常就是视窗
对于一个非根元素，如果其postion值是relative或static，其包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成
对于一个非根元素，如果其position值是absolute，其包含块是最近的position值不是static的祖先元素(会逐级往外找，直到初始包含块)
偏移属性
元素设置了定位属性后，通常需要配合偏移属性来设置其位置(也可以使用margin)
对于百分数，其 top 和 bottom 属性相对于包含块的高度，而 left 和 right 属性相对于包含块的宽度
可以取负值，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移，最终可能会超出包含块的范围
right
left
z-index
设置元素的上下层级
<integer> | auto
值越大离用户越近，z-index值大的元素会覆盖值小的元素
取值为整数，可以是负数
只能应用到定位元素上
内容溢出
如果一个元素的内容对于元素大小来说过大，就有可能溢出元素本身
overflow-x
设置水平溢出时的处理方案
overflow-y
设置垂直溢出时的处理方案
overflow
设置元素溢出的处理方案
只能应用于块元素和替换元素
visible
默认值，当元素的内容在元素框之外也可见，这就导致内容超出其自身的元素框，但不会改变框的大小
hidden
超出之后，隐藏
始终显示滚动条
跟据内容自动适应，如果设置了固定宽、高，当内容超出后，显示滚动条
visibility
控制元素的可见性
默认值，可见
不可见，但是元素的布局还是保留的，换句话说，元素还是在原来的位置，并且还是要占位的，只是看不见
跟display: none的区别就是，display: none后元素不可见，并且不占位
collapse
主要用于表格中的行与列，如果应用于非表格元素与hidden含义类似
应用于表格中的表现跟 display: none 类似，不显示，并且不占位，但是其他行与列的宽和高不会重新计算，行与列的宽高计算依然会将被设为 collapse 行和列考虑进去
块级格式化上下文(BFC)
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素
块格式化上下文对于定位与清除浮动 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动
BFC就是页面上的一个隔离独立容器，容器里面的子元素不会影响到外面的元素，反之亦如此
创建规则
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
具有overflow 属性且值不是 visible 的块元素
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中
用处
清除内部浮动
防止margin重叠
table | table-cell | table-row
border-collapse
设置表格中边框是否合并
separate
默认值，不合并
相邻表格边框合并，共同使用一个边框
border-spacing
当border-collapse值为 separate时，设置相邻单元格边框之间的距离
<length> <length>?
两个值时，分别代表水平和垂直间隔
table { border-spacing: 10px 20px; }
table-layout
设置表格单元中，行和列的算法；使用固定宽度布局时，相对于自动宽度模型，用户代理可以更快地计算出表的布局
大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容
表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽
列表
list-style-type
设置列表项的标志类型，只能应用于 display: list-item 元素
disc
默认值，一个实心圆
circle
一个空心圆
square
一个方块
decimal
decimal-leading-zero
upper-alpha
lower-alpha
......
0 条评论
回复 删除
下一页
