导图社区 CSS MDN学习大纲
- 268
- 16
- 4
- 举报
CSS MDN学习大纲
MDN学习整理的大纲，内容全面详实，并重新归类。学习的时候可以按照此大纲做增改。形成稳固的知识网络。
编辑于2019-09-04 10:05:03- 网页
- 相似推荐
- 大纲
CSS
概念
什么是 CSS? CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。 文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 也有一些其他的标记语言，比如 SVG 或者 XML。 呈现文档给用户意味着将其转换为用户可用的形式。浏览器，比如 Firefox, Chrome 或者 Internet Explorer，被设计用于可视化呈现文档，例如，在计算机屏幕，投影仪或打印机上。
工作过程
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档： 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。 浏览器显示 DOM 的内容。 
DOM
理解DOM
DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。 示例： <p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p> 在该 DOM 中，我们的 <p> 元素所对应的节点是父节点。它的子节点是一个文本节点和我们的一些 <span> 元素对应的节点。这些 SPAN 结点也是父节点，它们各自的文本节点就是它们的子节点： P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets" 这就是浏览器解释先前的HTML片段的过程 —它渲染上述的DOM树，之后在浏览器中像这样输出它。
树形结构
DOM节点
父子兄弟关系
应用原理
假设我们要添加一些 CSS 到我们的文档上，使其更具风格。再一次，HTML 如下所示： <p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p> 如果我们将下面 CSS 应用到它上： span { border: 1px solid black; background-color: lime; } 浏览器会解析 HTML 并通过它创建 DOM，之后解析 CSS。由于 CSS 只有一个可用的规则，该规则有一个span选择器，它会将这个规则应用到这三个<span>的每一个上。更新后的输出如下所示： Let's use: Cascading Style Sheets
应用到html方法
CSS如何影响HTML？ Web浏览器将CSS规则应用于文档以影响它们的显示方式。一个CSS规则由以下组成： 一组 属性 ，属性的值更新了 HTML 的内容的显示方式。比如，我想让元素的宽度是其父元素的50％，或者元素背景变为红色。 一个 选择器，它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。比如，我想将我的CSS规则应用到我HTML文档中的所有段落上。
外部样式表
.css独立文件
HTML中<link rel="stylesheet" href="xxx.css">引用
好处
更新方便、多次运用
内部样式表
HTML中<head><style>...</></>中直接使用

内联样式
标签元素中style元素直接使用
<p style="color:red;">This is my first CSS example</p>
不推荐使用
基础
CSS语句
CSS规则（规则集）

选择器
分类
简单选择器
元素选择器 元素
此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
示例

类选择器 .CLASS
类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。
示例
 注意：可以给多个元素赋值相同的class，也可以用 选择器.属性值 的方式选择例如： 这是不添加选择器，就是都添加  这是添加了选择器，就只添加选择器那一行： 
id选择器 # ID
ID选择器是由一个哈希/磅符号 (#)，后面跟着给定元素的ID名称组成的。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己决定选择一个ID名称是什么。 这是选择单个元素的最有效的方式。
示例

区别
ID具有唯一性，Class具有普遍性。 ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。 Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。 ID的样式优先级高于Class。
通用选择器 *
通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。 重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可能对性能有明显的影响：网页可能显示比预期要慢。大多数情况下，你都不会使用这个选择器。
示例

属性选择器 [ ]
属性选择器是一种特殊类型的选择器，它根据元素的 属性 和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。
存在和值属性选择器
[attr]
该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]
该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]
该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 的值包含的被空格分隔的取值列表里中的一个。
示例
html： 我的食谱配料: <i lang="fr-FR">Poulet basquaise</i> <ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li> </ul> css： /* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */ [data-vegetable] { color: green } /* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */ [data-vegetable="liquid"] { background-color: goldenrod; } /* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素， 即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */ [data-vegetable~="spicy"] { color: red; } 结果： 我的食谱配料: Poulet basquaise Tomatoes Onions Garlic Red pepper Chicken Bacon bits Olive oil White wine
子串值属性选择器
这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）
[attr|=val]
选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val]
选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val]
选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val]
选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
示例
html： 我的食谱配料: <i lang="fr-FR">Poulet basquaise</i> <ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li> </ul> css： /* 语言选择的经典用法 */ [lang|="fr"] { font-weight: bold; } /* 具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色 */ [data-vegetable*="not spicy"] { color: green; } /* 具有"data-quantity"属性其值以"kg"结尾的所有元素*/ [data-quantity$="kg"] { font-weight: bold; } /* 具有属性"data-quantity"其值以"optional"开头的所有元素 */ [data-quantity^="optional"] { opacity: 0.5; } 结果： Ingredients for my recipe: Poulet basquaise Tomatoes Onions Garlic Red pepper Chicken Bacon bits Olive oil White wine
伪类 :
一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。 
示例
 鼠标触碰前：  鼠标触碰后： 
常用
元素a:first-child 选中第一个子元素（既要是元素a类型，同时满足是第一个子元素） 元素b:last-child 选中最后一个子元素 :nth-child(an+b) 选中第an+b个元素 同时也可以加关键字：even odd 元素c:first-of-type 选中第一个子元素（既要是元素c类型，同时要满足是元素c类型的第一个） 元素d:last-of-type 选中最后一个子元素 元素e:not(选择器f) 选中所有的元素e（但是剔除选择器f中的元素）
伪元素 ::
伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。 
示例

常用
before和after一般结合content用，添加的文本或图形不能被鼠标选中
区别？
1.伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。 2.伪类的效果可以通过添加实际的类来实现 伪元素的效果可以通过添加实际的元素来实现 。它们的本质区别就是是否抽象创造了新元素。
组合器

注意
某元素下的属性选择方式是： a[href]{ } 注意a和[href]直接没有空格
层叠
1.重要性
!important

注意：
知道 !important存在是很有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。但是！我们建议你千万不要使用它，除非你绝对必须使用它。您可能不得不使用它的一种情况是，当您在CMS中工作时，您不能编辑核心的CSS模块，并且您确实想要重写一种不能以其他方式覆盖的样式。 但是，如果你能避免的话，不要使用它。由于 !important 改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。
2.专用性
衡量方法
一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字： 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。 0：通用选择器*的优先级为0 继承的样式没有优先级 示例： 
示例
html：  css：   结果： 
感悟理解
如示例所演示 方法： 1.找到竞争关系的组合器 2.分析计算专有值 3.专有值大的胜出 感悟理解： 如  和  方法都是用后代选择器，最终指向都是a元素，为什么要用不同的且繁琐的呢？ 就是为了提高专有值从而提高竞争力！！！！！
注意一个地方
并不是一味的看权重，要看到底有没有选到最底层！！！！例如： <div class="pp"> <p>选没选中我</p> </div> .pp{ font-size: 100px; } p{ font-size:10px; } 结果：字体大小是10px。 分析：虽然.pp层级高于p，但是.pp没有选中要操作的那一层！！！所以权重为0！！！！ 
3.源代码次序
1和2打平，就看次序，后面的战胜（覆盖）前面的
示例

继承
利用继承，可以给祖先元素设置样式，这样后代元素将会自动继承这些样式。但是并不是所有的样式都会被继承，例如背景相关类、边框相关类、定位类的不会被继承。
控制继承
CSS为处理继承提供了四种特殊的通用属性值： inherit： 设置为与其父元素一样。 initial ：设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。理解浏览器默认样式！！！！（每个属性都有自己的初始值，比如background-color的初始值为transparent就是透明，其他的文字大小、颜色等等都有初始值，并且可能因为浏览器的不同而不一样） unset ：重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。 即：可继承属性——inherit继承父值 不可继承属性——initial回到属性初始值 revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。 注意: initial 和 unset 不被IE支持。
eg
 
速写属性all
CSS速写属性 all 能够被应用到每一个继承属性，一次性应用所有的继承属性。这里的值可以是继承属性里的任何一个 (inherit, initial, unset, or revert)。对于撤销对样式的修改，这是非常方便的一种方式。然后你就可以在开始新的修改之前，返回到一个已知的开始点。
声明块
声明
 注意：1.属性和值都区分大小写 2.未知属性或无效值会被直接无视，浏览器的css引擎完全忽略
属性
值
数值
长度和尺寸
有单位
绝对单位
常用 px
不常用 mm cm in pt pc
相对单位
em 1em默认=16px
em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。
ex ch
ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。
rem
rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持
vw vh
vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。
无单位
0
乘法因子
line-height

动画数值
html： <p>Hello</p> css： @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } p { color: red; width: 100px; font-size: 40px; transform-origin: center; } p:hover { animation-name: rotate; animation-duration: 0.6s; animation-timing-function: linear; animation-iteration-count: 5; } 说明：animation-iteration-count: 5; ——此行控制着动画启动（这里是指光标浮动至段落上时）后会执行多少次，而且这是一个简单的，无单位，纯数字（整型）。 效果： 
百分比
作用：让子容器随父容器变化而变化，示例： html： <div> <div class="boxes">Fixed width layout with pixels</div> <div class="boxes">Liquid layout with percentages</div> </div> css： div .boxes { margin: 10px; font-size: 200%; color: white; height: 150px; border: 2px solid black; } .boxes:nth-child(1) { background-color: red; width: 650px; } .boxes:nth-child(2) { background-color: blue; width: 75%; } 结果：  结论：当视口大小变化时，第一个始终保持650px，第二个则保持和视口大小的75%。所以，当窗口很小了的时候，第一个可能看不到了，第二个依然如上所示。
固定宽度布局
一个固定宽度的布局可以用来保持在线地图的大小相同；浏览器视口可以在地图上滚动，只在一个时间内查看一定数量的地图。您可以立即看到的量取决于您的视口有多大。
动态（流体）布局
可以使用动态布局来确保标准文档始终适合于屏幕，并且可以在不同大小的移动设备屏幕上表现良好。
颜色
关键词
常用： black white red blue green yellow gray pink silver（银）
十六进制值
常用： black #000000 white #ffffff red #ff0000 blue #0000ff yellow #ffff00 green #008000 gray #808080 silver（银） #c0c0c0
注意
双重复的可以简写：#ff0000 可以简写成#f00 #aabbcc #abc
RGB
rgb(0,0,0)
数值
可以是0-255的数值，也可以是0%-100%的百分数
HSL
hsl()函数接受三个表示色调、饱和度以及亮度的参数，使用与上述三种不同的方式来区分大约1670万种颜色： 色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。 亮度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。
hsl(0,100%,50%)
alpha通道
0是完全透明的,1是完全不透明的. 示例： 
GRBA
rgba(255,0,0,0.5)
HSLA
hsla(240,100%,50%,0.5)
opacity属性
opacity: 0.5
坐标位置
函数
@规则
条件语句（嵌套语句）

注释
/*xxxxxxxx*/
简写属性

归纳
padding: 10px 15px 15px 5px; 等于 padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; background: red url(bg-graphic.png) 10px 10px repeat-x fixed; 等于 background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-scroll: fixed;
文本样式
基本的文本及字体样式
字体分类：serif（衬线字体） sans-serif（非衬线字体） monospace（等宽字体） cursity（草书字体） fantasy（虚幻字体） 这些是字体大类，指定后浏览器会自动选择
字体样式
color：
font-family:
提供一系列的字体栈，从第一个开始判断，谁能用就用谁。（所以同一行文字可能会有多个字体格式） 注意：有些字体名字不止一个单词，用“”括起来 eg：font-family: "Trebuchet MS", Verdana, sans-serif;
font-size
单位
px (像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。 em: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。 rem: 这个单位的效果和 em 差不多，1rem 等于 HTML 中的根元素的字体大小 (i.e. <html>) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， rem 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用em 或 px, 或者是 polyfill 就像 REM-unit-polyfill. （这个单位在“CSS的值和单位”一节也有讲解）
继承
1.本身是从父元素继承，归根结底，是从<html>继承而来，而浏览器一般标准是16px，则1em=16px； 2.如果在一个父元素<article>中设置font-size为1.5em（24px），然后又在其子元素中想要设置字体为20px，则换算成em为20/24=0.833333···em； 3.所以注意em是相对于父元素而言！！！！！！！！！！ 4.技巧：在根元素<html>中设置font-size为10px，则规定了1rem=10px；其后的单位都用rem来表示，换算方便。
font-style
打开或关闭文字斜体
值
normal: 将文本设置为普通字体 (将存在的斜体关闭) italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。 oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
font-weight
设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到 normal 和 bold以外的值。
值
normal, bold: 普通或者加粗的字体粗细 lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。但是往往该字体没有那么多级别的字体，所以级数可能不会多。
text-transform
设置要转换的字体
值
none: 防止任何转型。 uppercase: 将所有文本转为大写。 lowercase: 将所有文本转为小写。 capitalize: 转换所有单词让其首字母大写。（空格识别） full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。
text-decoration
设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。)
值
none: 取消已经存在的任何文本装饰。 （用法：去除超链接固有的下划线） underline: 文本下划线. overline: 文本上划线 line-through: 穿过文本的线 strikethrough over the text.
注意
同时注意 text-decoration 是一个简写，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。 text-decoration-line: none underline overline line-through blink text-decoration-color: text-decoration-style: solid double(双实线) dotted(点划线) dashed(虚线) wavy(波浪线)
text-shadow
文本阴影
值
text-shadow: 4px,4px,5px,red; 1.水平偏移量（必须指定） 2.垂直偏移量（必须指定） 3.模糊半径（默认0） 4.基础颜色（默认黑色） 多重阴影：eg text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), 0px 0px 7px rgba(0,0,0,0.4);
其他
Font 样式: font-variant: 在小型大写字母和普通文本选项之间切换。 font-kerning: 开启或关闭字体间距选项。 font-feature-settings: 开启或关闭不同的 OpenType 字体特性。 font-variant-alternates: 控制给定的自定义字体的替代字形的使用。 font-variant-caps: 控制大写字母替代字形的使用。 font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。 font-variant-ligatures: 控制文本中使用的连写和上下文形式。 font-variant-numeric: 控制数字，分式和序标的替代字形的使用。 font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。 font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。 font-stretch: 在给定字体的可选拉伸版本中切换。 text-underline-position: 指定下划线的排版位置，通过使用 text-decoration-line 属性的underline 值。 text-rendering: 尝试执行一些文本渲染优化。
简写
按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. 如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。 font-size 和 line-height 属性之间必须放一个正斜杠。 一个完整的例子如下所示： font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif; 斜粗大高体
文本布局风格
text-align
控制文本如何和它所在的内容盒子对齐
值
left: 左对齐文本。 right: 右对齐文本。 center: 居中文字 justify: 两端对齐。要使用这个，应该考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。
line-height
设置文本每行之间的高 行间距 = 行高 - 字体高度 字体会落在行高的中间
值
分两类： 1.带单位：确切数值 2.不带单位（推荐）：乘法因子，和自身的font-size相乘得到行高 3.百分数：相对于字体高度计算行高。如100% 就是行高为字体高度，则行间距为0.
letter-spacing和word-spacing
分别设置字母与字母之间的间距、单词与单词之间的间距
text-indent
首行缩进
resize
常在<textarea>中使用，规定是否可以自由控制文本输入框的大小。 值： both 水平垂直都可以拉伸 vertical 垂直拉伸 horizontal 水平拉伸 none不可拉伸 
其他
文本布局样式： text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。 white-space: 定义如何处理元素内部的空白和换行。 word-break: 指定是否能在单词内部换行。 direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。) hyphens: 为支持的语言开启或关闭连字符。 line-break: 对东亚语言采用更强或更弱的换行规则。 text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。 text-orientation: 定义行内文本的方向。 word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。 writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。
注意易错点
注意简写时的默认值 { line-height: 20px; font-height: 50px; } 最终line-height为font-height中的默认值。因为font-height优先级高于前一行，所以覆盖掉了前面的值。所以行简写时，该用的东西要一起设置。
样式化列表
list-style-type

list-style-position

list-style-image

用background代替
 将 <ul> 的 padding-left 从默认的 40px设置为 20px，然后在列表项上设置相同的数值。 这就是说，整个列表项仍然排列在列表中，但是列表项产生了一些用于背景图像的填充。 如果我们没有设置填充，背景图像将与列表项文本重叠，这看起来会很乱。 将 list-style-type 设置为none，以便默认情况下不会显示项目符号。 我们将使用 background 属性来代替项目符号。 为每个无序列表项插入项目符号，其相应的属性如下： background-image: 充当项目符号的图片文件的参考路径 background-position: 这定义了所选元素背景中的图像将出现在哪里 - 在我们的示例中设置 0 0，这意味着项目符号将出现在每个列表项的最左上侧。 background-size: 设置背景图片的大小。 理想条件下，我们想要项目符号与列表项的大小相同（比列表项稍大或稍小亦可）。 我们使用的尺寸为1.6rem（16px），它非常吻合我们为项目符号设置的 20px 的填充， 16px 加上 4px 的空格间距，可以使项目符号和列表项文本效果更好。 background-repeat：默认条件下，背景图片不断复制直到填满整个背景空间，在我们的例子中，背景图片只需复制一次，所以我们设置值为 no-repeat。 
简写 list-style

样式化链接
链接状态
典型的链接样式设置： LoVe Fears HAte
:link(没有访问过的)
Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
:visited
Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
:focus
Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
:hover
Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。 对非链接也适用
理解
hover相当于是鼠标选中但没激活，focus相当于键盘或者程序选中但没激活
:active
Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。 对非链接也适用
示例
body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437A16; } a:focus { border-bottom: 1px solid; background: #BAE498; } a:hover { border-bottom: 1px solid; background: #CDFEAA; } a:active { background: #265301; color: #CDFEAA; }
加入图标
方法
a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; }
样式化为按钮
html： <ul> <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li> </ul> css：  结果： 
网络字体
1.下载字体 .tff .otf
2.上传到Font squarrel打包下载到同目录
3.重命名fonts
4.将文件夹中的stylesheet中的代码复制到style最上面
5.修改地址（加上fonts/就行）
框(盒)模型
文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。这样能精确控制每个距离。
基本模型

width和height
width 和 height width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。 注意: 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height。
padding
padding padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。
默认值
<body> 0 https://shirley5li.me/2017/10/18/%E9%BB%98%E8%AE%A4margin%E5%80%BC%E5%85%83%E7%B4%A0/
border
border CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖： border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。 border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。 你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。
宽度 线型 颜色四个方向
线型：solid double(双实线) dotted(点划线) dashed(虚线) 设置方式 四边三项 border: 2px solid red; 四边单项 border-type: solid; 单边三项 border-top: 2px solid red; 单边单项 border-top-type: solid;
margin
margin 外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。 注意: 外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个块元素框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。 负值是反方向移动
理解
两个盒子 box1 和 box2 ，给box1设置外边距，会去挤压box2，让box2的位置发生变化
值的设定
值(宽度、颜色、线型等)：四个值 上 右 下 左 三个值 上 左右 下 两个值 上下 左右 一个值 四边一致
浏览器默认值
浏览器设置了默认值，所以元素有默认的margin或padding。 清除方式：1.通用选择器 *{ margin: 0; padding: 0; }
内联元素的特点
width和height： 1.内联元素不能设置width和height 内边距： 2.内联元素可以设置水平方向的内边距，并挤退旁边的元素（无论是block还是inline-block） 3.内联元素可以设置垂直方向的内边距，但是不会影响页面的布局（不会去挤压其他元素，而是覆盖） 边框： 4.内联元素可以设置水平边框，并挤退旁边的元素 5.内联元素可以设置垂直边框，但是不会影响到页面布局 外边距： 6.内联元素可以设置水平外边距，并挤退旁边的元素 7.内联元素不可以设置垂直外边距
排版布局
文档流
块元素
1.块元素在文档流中会独占一行，块元素从下往上排列 2.块元素在文档流中默认宽度是父元素的100% 3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左往右排列，如果一行不能容纳所有的内联元素，则换至下一行，继续自左往右 2.在文档流中，内联元素的宽度和高度默认都被内容撑开
父子元素
在文档流中，父元素的高度是被子元素撑开的，也就是子元素多高，父元素多高，但是当子元素设置为浮动后，子元素就完全脱离了文档流，此时子元素无法撑起父元素，导致父元素的高度塌陷。由于父元素高度塌陷，则其下面所有的元素多会向上移动，这样就导致页面布局混乱。 解决办法：见高度塌陷的解决办法
溢流
在父子元素中，子元素内容超过父元素，这时候可以设定溢出时的操作
overflow:
auto
当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。 
scroll
会为父元素添加滚动条 但是不智能的是，不管溢不溢出会添加滚动条
hidden
当内容过多，溢流的内容被隐藏。 
visible
当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为） 
操作布局
display
所有元素布局都有display属性及其默认值，比如常见段落<p>就是默认block值，而<a>则是默认的inline值，所以前者自动换行，后者排列在行内。
空格
在html代码中，一般来说留空格的影响不大，但是在inline和inline-block中，留一个或多个空格就意味着会有一个小间隙。示例： 
block
块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
inline
行内框（ inline box）与块框是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
inline-block
行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。） 注意：inline-block元素间默认有空格
示例
html： <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="block">Mauris tempus turpis id ante mollis dignissim.</span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc. </p> css： p { padding : 1em; border : 1px solid black; } span { padding : 0.5em; border : 1px solid green; /* That makes the box visible, regardless of its type */ background-color: yellow; } .inline { display: inline; } .block { display: block; } .inline-block { display: inline-block; } 结果： 
none
不显示元素，并且不占空间
visibility的区别
visibility 值：visible 默认值，显示 hidden 元素隐藏，但是会占用空间，只是元素不显示
flex（弹性盒子）
Flexible Box Layout
弹性模型
 示例一种嵌套方式：  css代码规定： section{ display：flex； } 则三个article就成为了flex items
属性
flex-flow 简写

flex-direction
值： 行排列：row row-reverse 列排列：column column-reverse
flex-wrap
使弹性盒子变为多行，并可以为flex item设置宽度值。
比例 flex：1
情况一：表示同一行中所占的比例。示例： 三个flex item，简称fi fi1{ flex: 1; } fi2{ flex: 2; } fi3{ flex: 1; } 这表示在同一行中第一个和第三个占的比例都分别是 1/4；而第二个则是1/2. 情况二：当设置了 flex-wrap：wrap;就表明flex items可以在到达视口最右边后跳到第二行，所以每一行都遵守比例要求，但是每一行的比例不遵守。示例： 在一行时是1:1，当变成两行是就遵守每一行的1:1  
纵(交叉)轴 align-items:
默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。 值： normal The effect of this keyword is dependent of the layout mode we are in: In absolutely-positioned layouts, the keyword behaves like start on replacedabsolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. In static position of absolutely-positioned layouts, the keyword behaves as stretch. For flex items, the keyword behaves as stretch. For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. The property doesn't apply to block-level boxes, and to table cells. flex-start 元素向侧轴起点对齐。 flex-end 元素向侧轴终点对齐。 start The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis. end The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis. center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。 left The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start. right The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start. self-start The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis. self-end The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis. baseline first baseline last baseline 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。 stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。 safe If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
横（主）轴 justify-content
值： start 从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。 flex-start 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。 flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。 center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 left 伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则left的行为类似于start right 元素以容器右边缘为基准, 一个挨着一个对齐,如果属性轴与内联轴不平行,则right的行为类似于start. baseline first baseline last baseline Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end. space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 space-evenly flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。 stretch If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis. safe If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
align-self:
align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。 值： auto 设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch。 flex-start flex 元素会对齐到 cross-axis 的首端。 flex-end flex 元素会对齐到 cross-axis 的尾端。 center flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出。 baseline 所有的 flex 元素会沿着基线对齐，The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line。 stretch flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。
排列顺序 order：
不影响源顺序（即dom树里元素的顺序）的前提下改变flex项的布局位置的功能。 用法： 1.设定 order值，所有默认的值是0 2.大的值flex项比小的值的项显示顺序更靠后 3.相同的值按源顺序显示，例如有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。 示例： 更靠后 或 更靠前
grid
属性
grid-template-columns
grid-template-rows
grid-gap
table
让非table元素像table元素一样排列
float
浮动
当为一个元素设置浮动后（float属性是一个非none值） 元素会脱离文档流，下边的元素会向上移动 元素浮动以后，会尽量向页面的左上和右上漂浮，直到遇到父元素的内容区边界或其他浮动元素；但注意：若浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素 浮动的元素不会超过他上边的兄弟元素，最多平齐 若不指定元素的宽度（针对块元素），浮动元素的宽度由内容长度决定了，而不是父元素宽度的100% 内联元素变成浮动后，width和height设置生效
float
基本浮动
多列浮动
重点
清除浮动
不是清除某个元素的浮动，而是让该元素不受其他元素的浮动影响。回到受影响前的位置。
clear
clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear属性适用于浮动和非浮动元素。 值： left：清除left对他的影响 right：清除right对他的影响 both：清除对其最大的影响   
position
定位
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个值来设置元素的偏移量。 每个属性都是相对于其定位位置偏移，根据定位位置的不同而区分为后面三个属性来定
静态定位 static
静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
绝对定位 absolute
绝对定位(Absolute positioning)将元素完全从页面的正常布局流中移出，类似将它单独放在一个图层中. 我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于离元素最近的被定位的祖先元素(ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板. 开启绝对定位会脱离文档流，改变元素的性质——内联元素变快元素、块元素的宽度和高度默认都被内容推开 开启绝对定位后，若不设置偏移量，则元素位置不会发生变化 定位位置是相对于开启了定位的离他最近的祖先元素的位置定位，若都没有开启定位，则相对于浏览器的视口位置定位 绝对定位会提升层级
相对定位 relative
相对定位(Relative positioning)允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。 相对定位位置：原来在文档流中的位置 相对定位元素不会脱离文档流（相当于理解为灵魂出窍） 相对定位会提升文档的层级（覆盖非相对元素） 相对定位不会改变元素的性质（内联或块）
固定定位 fixed
固定定位(Fixed positioning)与绝对定位非常类似，除了它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。 固定定位就是特殊的绝对定位，只是其定位位置永远相对于浏览器视口！ ie6不支持固定定位
混合型 sticky
position: sticky，是一个比其他属性要新一些的属性。这基本上是相对位置和固定位置之间的混合，其允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点（例如，从视口顶部10像素），之后它变得固定。阅读我们的position:sticky 引用入口 查看详情和例子。
层级
默认时：当多个元素层级都是相对（relative）时，谁在下面谁就在顶层
z-index
值：从0开始的整数，越大层级越高 没有开启定位的元素（position为stati的）没有该值
改变堆叠顺序
 说明：为使绿色在黄色上，黄色默认z-index是0，将绿色的设置为1，则就覆盖在之上了
总结
同辈元素中比较

非同辈元素中比较
 
多列布局
网络布局
概念
网格仅仅是由水平和垂直线集合创建的一个模式，我们可以根据这个模式排列我们的设计元素。它们帮助我们创建设计——在页面之间移动时元素不会跳动或更改宽度，从而在我们的网站上提供高一致性。 网格通常具有列（column），行（row），以及在每行和列之间的间隙——通常称为沟槽（gutter）。 
定宽网络
float方法
流体网络
同法用百分比
calc()函数计算
flexbox网格
第三方网格系统
grid法
轮廓
一个框的 outline 是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内） Note: 使用 outline 属性的时候要注意，它一般只在需要可用性的一些情况才被使用，例如在一些用户点击它的时候使用 outline 来表示高亮、可用，如果你要使用 outline，请确保不要因为它看起来像链接的高亮让用户迷惑。
样式框(盒子)
高级属性
设置宽和高的约束
可以用更灵活的方式控制内容盒的大小 — 是通过设置大小约束，而不是设置一个绝对大小。 一个明显的用处是，如果你想通过设置将一个布局的外层容器的宽度设置为百分比，从而让布局的宽度变得灵活，不过又不想让它变得太宽或者太窄，因为这样布局就开始看起来很糟糕。一个选择是用响应式网页设计技术（之后我们会讲到），但是更简单的方法是给布局的宽度设置一个最大值和最小值限制。
min-width
max-width
max-width 的另一个很好的用法是将媒体（例如图像和视频）限制在容器内部。回到上面的例子，图像会引起一个问题——起初它的显示正常，但当容器变得比图像更窄时，图像开始溢流容器（因为它是一个固定的宽度）。 要应对这类图像的问题，我们可以在其上设置以下声明: img{ display: block; margin: 0 auto; max-width: 100%; } 前两条样式规则可以使它的展示行为像一个块元素并且在父容器内居中。真正神奇的是第三条——这个限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。
min-height
max-height
另（居中）：margin: 0 auto;
0会使顶部和底部边距为0，而 auto（在这种情况下）共享父容器左右边距之间的可用空间使它居中。
说明
当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。 当宽度低于480px时，视口将小于容器，您必须滚动才能看得到完全的内容。
完全改变盒模型
box-sizing
一个盒子的总宽度是它的width， padding-right，padding-left，border-right和border-left. 问题是在某些情况下，想要一个总宽度为50％的盒子，包括以像素表示的边框和内边距怎么办？为了避免这种问题，可以使用属性box-sizing调整盒模型。 用值 border-box，它将盒模型更改为这样新的模型： 
背景
概念
元素的背景是指，在元素内容、内边距和边界下层的区域。 注意：背景并不在外边距下层——外边距不是元素区域的一部分，而是元素外面的区域。
属性
background 简写
background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll; background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center; background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
background-color: COLOR
大多数的默认值是： 透明。
background-image: url('')
默认是填充的，要用repeat属性来关掉。 若背景图片大于元素大小，则会默认显示图片的左上角 若背景图片和元素大小一样大，则会将背景图片全部显示 若背景图片小于元素大小，则会默认重复平铺填充满元素 另注意：需要记住的一件重要的事情是，由于背景图像是使用CSS设置的，并且出现在内容的背景中，它们将会在屏幕阅读器之类的辅助技术中不可见。它们不是内容图片，只是为了装饰，如果你想在你的页面上包含一个图片，这是内容的一部分，那么你应该用<img>元素来做。
background-position
两个值：x坐标和y坐标。将图片抽象成一个点，而框中坐标单位1就是图片这个点。并不是严格说图片的左上角为0 0. 该属性可以接受许多不同的值类型，最常用的是： 像px这样的绝对值——比如 background-position: 200px 25px. 像rems 这样的相对值——比如 background-position: 20rem 2.5rem. 百分比 ——比如 background-position: 90% 25%. 关键字——比如 background-position: right center. 这两个值是直观的，可以分别取值比如 left，center， right和 top，center， bottom。 您应该注意，您可以混合并匹配这些值，比如 background-position: 99% center。还要注意，如果您只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center。 示例：  
background-repeat
默认值是repeat。 no-repeat: 图像将不会重复:它只会显示一次。 repeat-x: 图像将在整个背景中水平地重复。 repeat-y: 图像会在背景下垂直地重复。 repeat: 图像将在整个背景中水平和竖直地重复。
background-attachment
指定当内容滚动时它们是如何滚动的。 scroll: 会使元素的背景在页面滚动时滚动。如果元素内容滚动了，背景并不会滚动。实际上，背景固定在了页面上相同的位置，所以当页面滚动时它才滚动。 fixed: 会使元素的背景相对于视口固定。因此不管当页面还是元素内容滚动时，它都不会滚动，它会始终保持在屏幕上相同的位置。 local:这个值后来被添加了(它只在Internet Explorer 9+中得到支持，而其他的则在IE4+中得到支持)，因为scroll值相当混乱，并且在许多情况下并没有真正做您想要的事情。 local 值将背景设置为它所设置的元素的背景，因此当您滚动元素时，背景会随之滚动。 
background-size
宽度值和高度值
background-clip
背景裁剪
将图片用background-image声明堆叠到框中，默认是填满，用background-clip能进行裁剪。
示例

渐变
background-image：linear-gradient(方向，开始颜色，（颜色站点），结尾颜色);
方向：关键字—— （to bottom，to right， to bottom right等）， 或角度值 (0deg相当于 to top，90deg 相当于 to right，直到 360deg，它再次相当于 to top ）。 颜色站点：可选参数，示例—— div { background-image: linear-gradient(to bottom, yellow, orange 40%, yellow); } 这个渐变从上往下，从顶部（高度为0%处）到橙色指定位置（高度为40%处），由黄色向橙色渐变，然后再由该位置到底部（高度为100%处），由橙色向黄色渐变。您可以指定任意多个颜色站点，您也可以使用其他的单位来指定这些颜色站点的位置，例如rem，px等。
repeating-linear-gradient()
它的工作方式完全相同，只不过你设置的模式会不断重复，直到背景的边沿。例如： background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px); 这将会产生一个渐变，从黄色到橙色，再沿着渐变的每50个像素再回来。
多个背景
示例： div { background: url(image.png) no-repeat 99% center, url(background-tile.png), linear-gradient(to bottom, yellow, #dddd00 50%, orange); background-color: yellow; } 注意：这些背景都是堆叠在一起的，第一个出现在顶部，第二个在下面，第三个，等等。 这样写也可以： background-image: url(image.png), url(background-tile.png); background-repeat: no-repeat, repeat;
边框
属性
border 简写
border-top/right/bottom/left
border-top/bottom/left/right 简写属性把下边框的所有属性： border-bottom-color，border-bottom-style 与 border-bottom-width设置到了一个声明中。这些属性描述了元素的下边框样式。 border-bottom-style(默认none): （同border-style）   border-bottom-color: COLOR border-bottom-width: 数值 thin medium thick 
border-width
border-style
border-color
border-top-width ···
只设置某一边： border-top-width, border-top-style, border-top-color； border-bottom-width,border-bottom-style,border-bottom-color; -right- -left-
border-radius
值单位：可以是单位值 也可以是百分数 一个值：10px 是圆角 两个值：10px/20px 是椭圆角
border-top-left-radius
border-top-left-radius， border-top-right-radius， border-bottom-left-radius, border-bottom-right-radius。
border-image 简写
border-image-source:url('')
border-image-slice
通过border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。  区域 1-4 为角区域（corner region）。 每一个都用一次来形成最终边界图像的角点。 区域 5-8 边区域（edge region）。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。 区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。 注意：数值不带单位，默认就是px
border-image-repeat
指定我们希望图像如何填充边界: stretch：默认;侧面的图像被拉伸来填满边界。这通常看起来很糟糕和像素化，所以不推荐。  repeat：边图像被重复，直到边界被填满。根据具体情况，这可能看起来不错，但您可能会看到一些难看的图像片段。  round： 边的图像被重复，直到边界被填满，它们都被稍微拉伸，这样就不会出现碎片。  space：边图像被重复，直到边界被填满，每个拷贝之间添加了少量的间隔，这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持。 
border-image-width
border-image-outset
样式化表格
间距和布局
方法
table-layout
值： auto 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。 使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。
:nth-child
选择行或列用
border-collapse
简单排版
字体、文字间距、居中等
背景图片和颜色
样式化标题
高级盒子效果
盒子阴影
box-shadow
五个值： 1.inset内部阴影（默认是outset）。 2.第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。 3.第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。 4.第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。 5.颜色值是阴影的基本颜色（base color）。 注意：内阴影的正负和外阴影相反，即内阴影默认的是左上角为正值。
多个阴影
box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black;
Filters（滤镜）
优势：作用于盒子内容的确切形状，而不是整个盒子。示例： 用box-shadow来绘制阴影  用滤镜： -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); 
盒子内容阴影
-webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
混合模式
当两个元素重叠时，指定一个混合的效果——最终每个像素所展示的颜色将会是原来像素中颜色和其下面一层相组合之后的结果，类似ps里面的混合模式
属性
background-blend-mode, 用来将单个元素的多重背景图片和背景颜色设置混合在一起。 mix-blend-mode, 用来将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容(content)混合在一起。
-webkit-
-webkit-background-clip: text
-webkit-作用：前缀，为了浏览器的兼容性
-webkit-text-fill-color: transparent
效果：  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS filters examples</title> <style> html { font-family: impact, sans-serif; } h2 { width: 250px; height: 250px; text-align: center; line-height: 250px; font-size: 75px; display: inline-block; background: url(colorful-heart.png) no-repeat center; } .text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <h2>WOW</h2> <h2 class="text-clip">WOW</h2> </body> </html>
综合练习：精美信纸和漂亮盒子
兼容性
hack
条件hack只对ie10以下浏览器有效，其他浏览器视为注释
特点
1.声明式语言
2.宽松性
CSS还有着相当不错的错误修复系统，这一特性允许你犯一些错误但并不会造成什么异常影响 —— 比如，有可能你的某些声明浏览器并不理解，这时浏览器会直接忽略掉这些内容并继续执行渲染。当然这一特性也可能导致一些问题，比如一些异常情况出现的时候，可能在定位问题原因上造成一些障碍。
高度塌陷的解决办法
BFC
原理：根据w3c的标准，页面元素都有一个隐含的属性Block Formatting Context 简称BFC。该属性可以设置打开或者关闭，默认是关闭的。当开启元素的BFC后，元素具有如下的特性： ①父元素的垂直外边距不会和子元素重叠 ②开启BFC的元素不会被浮动元素所覆盖 ③开启BFC的元素可以包含浮动的子元素
父子元素
在文档流中，父元素的高度是被子元素撑开的，也就是子元素多高，父元素多高，但是当子元素设置为浮动后，子元素就完全脱离了文档流，此时子元素无法撑起父元素，导致父元素的高度塌陷。由于父元素高度塌陷，则其下面所有的元素多会向上移动，这样就导致页面布局混乱。如：  所以开发中一定要避免出现高度塌陷的问题： 1.我们可以设置父元素的高度，以避免出现塌陷，但是父元素高度一旦被设置，那么父元素的高度将不能自动适应子元素的高度，这种方案不推荐使用。 2.打开BFC 方法：（间接打开） ①设置父元素浮动 使用这种方法开启，虽然可以撑开父元素，但会导致父元素的宽度丢失， 而且使用这种方法会导致下边的元素上移动，不能解决问题  ②设置元素绝对定位 绝对定位内联元素变成块元素 ③设置元素为inline-block 可以解决问题，但是会导致宽度丢失，不推荐  ④将元素的overflow设置为一个非visible的值（最好为hidden）  注意：ie6及其以下的浏览器不支持BFC，而是用一种隐藏属性haslayout:room等，具体待学习
方法1
将元素的overflow设置为一个非visible的值（最好为hidden） 
方法2
方案二： 可以直接在高度塌陷的父元素的最后，添加一个空白div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的。然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度。 坏处：会添加多余的结构 
方法3
方案三：最好的方法，以后父子元素类清除格式都可以用这个 不用添加多余的结构，用伪元素去替代这个结构。 
另
对ie6及其以下的支持方式： 在方法三中加上 .clear{ zoom: 1; }
盒子垂直外间距
兄弟盒子之间
垂直方向margin塌陷
嵌套父子盒子
子元素设置margin-top会影响父元素 解决办法：方法1 隔开外边距——给子元素设置padding-top或者border-top 给父元素设置padding-top将子元素挤下去 方法2 使用空的<table>可以隔开父子元素 <div class="box1"> <div class="box2"></d> </div> .box1:before{ content: "" ; display: table; } 即可 另：将其与解决高度塌陷的.clear做整合： .clearfix:before, .clearfix:after{ content: ""; display: table; clear: both; } .clearfix{ zoom:1; } 两个的区别：高度塌陷是没有给父元素指定高度，而父子元素外边距重合是给父子都指定了高度