学习笔记：MDN的CSS

HTML用于定义内容的结构和语义，CSS用于设计风格和布局。

CSS规则由选择器和声明块组成；声明由属性（properties）和属性值组成。

CSS介绍：

盒=框=box，边界=border，内边距=填充=padding

 

 

DOM （文档对象模型）是一种树形结构. 标记语言中的每一个元素、属性（？）、文本片断都变为一个 DOM 节点。因为 DOM 是 CSS 与文档内容的相遇之处，理解 DOM 有助于设计、调试和维护你的 CSS 文件。

用外部样式表将 CSS 应用到 HTML 上能够说是最好的方法，由于你可使用一个样式表来设置多个文档的样式，而且须要更新 CSS 的时候只要在一个地方更新。除此以外还有内部样式表（某些状况下颇有用，好比你正在使用一个CMS（内容管理系统），不能直接修改 CSS 文件）和内联样式（除非有必要，不然不要这么作！您惟一可能须要使用内联样式是当您的工做环境真的很是受限，好比您的CMS只容许您编辑 HTML 的 body）。

保持不一样类型代码（好比HTML和CSS）的分离和纯净使处理该代码的人的工做更为容易。

CSS 是一种声明式语言，这令其语法至关简单直观且易于理解。此外，CSS还有着至关不错的错误修复系统，这一特性容许你犯一些错误（包含语法错误，或者浏览器不支持该特性）但并不会形成什么异常影响 —— 好比，有可能你的某些声明浏览器并不理解，这时浏览器会直接忽略掉这些内容并继续执行渲染。固然这一特性也可能致使一些问题，好比一些异常状况出现的时候，可能会对定位问题的缘由形成一些障碍。

CSS 的属性和属性值都是区分大小写的。

CSS 有超过300 个不一样的属性以及几乎无穷无尽的属性值。属性和属性值不能任意组合：每一个属性都有一个已经定义好的可用属性值范围。

重要: 若是使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会彻底忽略它。

声明块里的每个声明必须用半角分号（;）分隔，不然代码会不生效（至少不会按预期的生效）。声明块里的最后一个声明结束的地方，不须要加分号，可是最后加分号是个好习惯，由于能够防止在后续增长声明时忘记加分号。

一个元素能够被多个选择器所匹配，所以，一个给定的属性可能被多个规则设置屡次。 CSS 定义了哪一个规则比其它规则更具优先级：这被称为层叠算法（cascade algorithm）。

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最多见的块。除此以外还有@-规则 ，@-规则在CSS中被用来传递元数据、条件信息或其它描述性信息—— CSS 规则只是被称为 CSS 语句中的一种。

一些属性好比 font，background，padding，border，和 margin被称为简写属性。注：彷佛大多数简写属性的属性值的顺序都可有可无。

选择器分为简单选择器、属性选择器、伪类和伪元素选择器、组合器和多选选择器。

简单选择器（Simple selectors）：经过元素类型、class 或 id 匹配一个或多个元素。其中，类选择器由一个点“.”以及类后面的类名组成；类名是在HTML 中的class属性中没有空格的任何值；文档中的多个元素能够具备相同的类名，单个元素也能够有多个类名(以空格分开多个类名)。而ID选择器由#以及后面的ID组成；ID惟一，这是选择单个元素的最有效的方式。通用选择（*）是最终的王牌。它容许选择在一个页面中的全部元素。重要提示：使用通用选择时要当心。由于它适用于全部的元素，在大型网页利用它可能对性能有明显的影响：网页的显示可能比预期要慢。大多数状况下，你都不会使用这个选择器。

属性选择器（Attribute selectors）：经过元素的属性和（或）属性值匹配一个或多个元素。由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。好比[lang|="fr"]。

存在和值属性选择器：[attr]、[attr=val]和[attr~=val]。

子串值（Substring value）属性选择器：

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意有个-）。

[attr^=val] : 选择attr属性的值以val开头（包括 val）的元素（与上面那个不一样）。

[attr$=val] : 选择attr属性的值以val结尾（包括 val）的元素。

[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。

伪类（Pseudo-classes）：匹配处于肯定状态的一个或多个元素，好比被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。以冒号(:)做为前缀，冒号前面是其它的选择器。

伪元素（Pseudo-elements）:匹配处于相关的肯定位置的一个或多个元素，例如每一个段落的第一个字，或者某个元素以前生成的内容。前缀是两个冒号 (::)，冒号前面是其它的选择器。

组合器（Combinators）：组合两个或更多的选择器用于很是特定的选择的方法。例如，你能够只选择divs的直接子节点的段落，或者直接跟在headings后面的段落：

A B（B是A的后代结点）；

A>B（B是A的（直接）子节点，注意（直接）子节点的意思，不能理解就看上面那一行）；

A+B（B是A的下一个兄弟节点）；

A~B（B是A以后的兄弟节点中的任意一个）。

多选选择器（Multiple selectors）：不是单独的选择器，是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的全部元素。

data-* 属性被称为数据属性。它们提供了一种在HTML属性中存储自定义数据的方法，由此，这些数据能够轻松地被提取和使用。

两个选择器紧挨着则表示选择的元素要同时知足这两个条件。

使用相对单位是很是有用的——你能够调整你的HTML元素大小相对于你的全局字体大小或视口大小，这意味着布局将保持看起来正确。

颜色系统：

关键词（如red）

16进制值（如#ff0000）、RGB（如rgb(255,0,0)）：RGB值能够说比十六进制值更直观，更容易理解；

HSL：hsl()函数接受色相、饱和度以及明度值，如hsl(0,100%,50%)；

RGBA和HSLA：比RGB和HSL多一个透明度的参数（0到1的值）；

不透明度：经过CSS——opacity 属性设置。能够同时改变背景和文本的透明度。

层叠和继承：

元素的最终样式能够在多个地方定义，它们以复杂的形式相互影响。这些复杂的相互做用使CSS变得很是强大，但也使其很是难于调试和理解。这是CSS 理论中最复杂的地方。

什么选择器在层叠中胜出取决于三个因素（如下是按重量级顺序排列的——前面的的一种会否决后一种）：重要性（Importance，彷佛就只有!improtant这一个东西能影响重要性）、专用性（Specificity）、源代码次序（Source order）。

在CSS中，有一个特别的语法可让一条规则老是优先于其余规则：!important。把它加在属性值的后面可使这条声明有无比强大的力量。重载这个 !important 声明的惟一方法是在后面的源码或者是一个拥有更高专用性的源码中包含相同的 !important 特性的声明。知道 !important存在是颇有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。可是！咱们建议你千万不要使用它，除非你绝对必须使用它。您可能不得不使用它的一种状况是，当您在CMS（内容管理系统）中工做时，您不能编辑核心的CSS模块，而且您确实想要重写一种不能以其余方式覆盖的样式。 可是，若是你能避免的话，不要使用它。因为 !important 改变了层叠正常工做的方式，所以调试CSS问题，尤为是在大型样式表中，会变得很是困难。

专用性（基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素（越少越专用））：ID选择器>class选择器>元素选择器。打败ID选择器的惟一方法是使用 !important（其实足够多的class选择器也能够打败）。

一个选择器具备的专用性的量是用四种不一样的值（或组件）来衡量的，它们能够被认为是千位，百位，十位和个位——在四个列中的四个简单数字（权重并不许确，由于11个class选择器不能打败1个id选择器）：

千位：若是声明是在style 属性中该列加1分（没有选择器, 规则在HTLM文件中的一个元素的style属性里，因此它们的专用性老是1000）；

百位：在整个选择器中每包含一个ID选择器就在该列中加1分；

十位：在整个选择器中每包含一个类选择器、属性选择器、伪类就在该列中加1分；

个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分；

注意: 通用选择器 (*), 复合选择器 (+, >, ~, ' ') 和否认伪类 (:not) 在专用性中无影响。

在考虑全部这些层叠理论和什么样式优先于其余样式被应用时，你应该记住的一件事是，全部这些都发生在属性级别上——属性覆盖其余属性，但你不会让整个规则凌驾于其余规则之上。

哪些属性默认被继承哪些不被继承大部分符合常识。

控制继承：

inherit：该值将应用到选定元素的属性值设置为与其父元素同样；

initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值同样。若是浏览器默认样式表中没有设置值，而且该属性是天然继承的，那么该属性值就被设置为 inherit；

unset ：该值将属性重置为其天然值，即若是属性是天然继承的，那么它就表现得像 inherit，不然就是表现得像 initial（与initial不一样之处在于判决顺序）。

从新设置全部的属性值：属性 all 可以被应用到每个继承属性。这里的值能够是继承属性里的任何一个 (inherit, initial, unset, or revert)。对于撤销对样式的修改，这是很是方便的一种方式。

若是您开始遇到样式应用不如你意的问题，它多是专用性问题。

CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每一个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距，分别对应width 和 height、padding、border、和margin。

 

 

注意: 外边距有一个特别的行为被称做外边距塌陷（margin collapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边距的最大值，而非二者的总和。

默认状况下，块级元素的content的width 被设置为可用空间的100%（在margin, border, padding占据了它们的空间后剩下的空间的宽度）；块级元素的content的height默认设置为内容的高度（没内容就为0）。

外边距能够接受负数，这能够用来引发元素框的重叠。

默认状况下background-color/background-image 延伸到了border的外边缘（对于<body>元素例外）。该行为可使用background-clip 属性来改变。好比background-clip: padding-box;能使任何背景色只填充内容和内边距的区域，而不填充到边界的区域。

通常状况下，height和border-width都忽略百分比（相对于父元素的height）设置。当元素的父元素有肯定的height时（父元素的肯定的height不必定非得是直接在自身设置的绝对高度，也能够是从它的父元素继承而来的，只要它的父元素有肯定的height就行）或元素是绝对定位元素时（父元素有肯定的height的特殊状况），元素的height设置百分比才有效。

盒的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和（注意没有margin）。在一些状况下比较恼人（例如，假使你想要一个盒占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了不这种问题，可使用属性box-sizing来调整框模型（或者用calc()）。使用值border-box，它将盒模型更改为这个新的模型：

 

 

若是选择器是无效的，则整个规则也不会再作任何事情，浏览器只会继续执行下一个规则。

开发者工具中的CSS编辑器：每一个CSS属性旁边还有一个复选框，能够选择checked/unchecked来启用/禁用您的CSS属性。这对于找出可能致使错误的缘由也很是有用。

咱们认为对于一个大型的样式表，首先要经过validator.w3.org来消除任何基本的语法错误，而后再依赖浏览器开发人员工具来肯定其余问题。

width和max-width的配合使用：举个栗子，一看就懂：

body {

  width: 80%;

  max-width: 800px;

}

注：百分比是相对于其父元素，在这里是<html>。

最佳实践：你应该在全部规则的选择器中都用，好比， .card 做为开头，这样的好处是：若是将名片放在带有其余内容的页面的状况下，这些规则不会干扰其余元素的样式。

.card header, footer不等于.card header, .card footer

line-height（行高，它的单位很是神奇）：该属性的值一般用无单位的数字，表示这个数字乘当前元素的字体大小（即便当前元素的字体大小是2em，也是乘2em）；该属性的值以em为单位的效果和没单位同样。

 

属性（properties，不一样于HTML的属性Attribute）：

background：包括background –color、background-image、background-position、background-repeat和background-scroll

border：包括border-top, border-right, border-bottom, border-left和border-width, border-style, border-color, 以及它们的两两组合，如border-top-width

text-shadow

padding（内边距）：包括padding-top、padding-right、padding-bottom和padding-left

font：包括font-style, font-variant（变体）, font-weight, font-size, line-height, and font-family。

margin（外边距）：举个栗子，margin:0 auto，第一个值表明上和下，第二个值表明右和左。若是是3个值，则分表表明上、右和左、下。

 

单位：

px：像素

em（相对单位）：好比，1em表示与当前元素的字体大小相同。Web开发中最经常使用的相对单位（我以为rem更好用）。默认值是16px，可是要当心——em单位受会继承父元素的字体大小。

rem（root em）：以和em一样的方式工做，但它老是等于默认基础字体大小的尺寸，即继承的字体大小将不起做用。

%：例如，其宽度为其父容器宽度的必定百分比，若是父元素是<body>，那么宽度会随着视口（viewport，即浏览器的窗口大小）的变化而变化。

注：0值不要须要单位。

 

其它：

nth：n表明数字，th表明第几个，好比4th、5th。

 

 

样式化文本：

你能够有一个单位所有都使用 em 的网站，这样维护起来会很简单。

当调整你的文本大小时，将文档(document)的基础font-size 设置为10px每每是个不错的主意，这样以后的计算会变得简单，所须要的 (r)em 值就是想获得的像素的值除以 10，而不是 16。

在样式表的指定区域列出全部font-size的规则集是一个好主意，这样它们就能够很容易被找到。

连接的每个状态均可以用对应的伪类来应用样式:

Link (没有访问过的): 这是连接的默认状态，可使用:link 伪类来应用样式。

Visited: 这个连接已经被访问过了(存在于浏览器的历史纪录), 可使用 :visited 伪类来应用样式。注：只能直接改变color和column-rule-color，不能直接改变background-color和boder等，要想经过:visited改变后二者等，要先在:visited之外的地方先设定后二者的值（好比白色）。若是用focus，则鼠标点到别的地方去，样式就没了。

Focus: 一个连接当它被选中的时候 (好比鼠标左键点它（由于点了就锁定了），或者经过键盘的 Tab  移动到这个连接的时候（用Tab时还会有个虚线框），或者使用编程的方法来选中这个连接（HTMLElement.focus()）它可使用 :focus 伪类来应用样式。

Hover: 当用户的鼠标光标恰好停留在这个连接，可使用 :hover 伪类来应用样式。

Active: 一个连接当它被激活的时候 (当你点击连接时，按住鼠标按钮，连接会变红色)，它可使用 :active 伪类来应用样式。

连接的规则集的顺序固定，为LoVe F Hate

使用 background-size 来指定要显示的背景图像的大小，这样对有一个大的图标，而后从新调整它的大小是颇有帮助的，也是响应式网站设计的须要。可是，这仅适用于IE 9及更高版本。因此你若是须要支持那些老的浏览器，你只能先调整图像大小，再插入它。

连接相关的伪类，好比，悬停 (hover) 的状态，能够为不一样的元素应用样式，不仅是连接。

例子：Now onto the sizing! We want to fill up the whole width of the <ul>, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the width to 19.5%, and the margin-right to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <ul> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <a> in the list, and removes the margin from it. Done!

您可使用字体栈来指定可选择的字体，可是为了确保您的设计在每种字体中均可以使用，这增长了测试的开销。

@font-face块：在CSS的开始处，容许您指定在访问随您的网站时随你的网站一块儿下载的字体文件，这意味着任何支持Web字体的浏览器均可以使用您指定的字体。这个块中须要包括的属性有font- family和src。举个栗子：

@font-face {

  font-family: "myFont";         /* 注意有引号，即便没有空格 */

  src: url("myFont.ttf");          /* 注意要用url函数 */

}

在这段代码以后代码，你可使用@font-face中指定的字体名字来将它应用到你喜欢的任何东西上。

注：font-family的名字随你喜欢设置；可在font-family后加个空格再加format函数以声明每种字体文件的格式，这不是必要的，可是声明它是颇有用的，由于它让浏览器能更快地找到它能用字的体。能够列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——所以，最好是把新的、更好的格式好比WOFF2放在前面，把偏老的，不是那么好的格式像TTF这样的放在后面。

在线字体服务（如Google Fonts）一般会为你存储和提供字体，这样你就不用写@font-face代码了，一般只须要在你的网站上插入一两行代码（用link）就可让一切都运行。

 

属性：

color： The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text).

font-famliy：字体。能不能生效看的是正在用来看网页的电脑上有没有相应的字体。字体栈：浏览器从字体栈列表的第一个字体开始，查看在当前机器中，这个字体是否可用。若是可用，就把这个字体应用到选中的元素中；若是不可用，它就移到列表中的下一个字体，而后再检查。注意: 有一些字体名称不止一个单词，好比Trebuchet MS ，那么就须要用引号包裹。

font-style: 用来打开和关闭文本 italic (斜体)。(你不多会用到这个属性，除非你由于一些理由想关闭斜体文字的斜体状态)，可能的值有normal、italic和oblique（斜的）。

font-size：在调整字体大小时，最经常使用的单位是px、em和rem。

font-weight：设置文本的粗体。经常使用的值有normal和bold。

text-transform：能实现的功能有将全部文本转为大写（uppercase）、将全部文本转为小写（lowercase）、让全部单词的首字母大写（capitalize）、将全部字形转换成固定宽度的正方形（full-width）

text-decoration：能实现的功能有取消已经存在的任何文本装饰（none）、下划线（underline）、穿过文本的线（line-through）。text-decoration是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。

text-shadow：至少有前2个值，最多4个值，空格隔开，依次是阴影水平偏移、阴影垂直偏移、模糊半径（默认为0）、颜色（默认为black）。注：偏移的数值可正可负。

text-align：align意思是排列。可用的值有left（左对齐）、right、center和justify（改变单词之间的距离，使全部文本行的宽度相同且达到最大。你须要仔细使用，它能够看起来很可怕若是你要使用这个，你也应该考虑一块儿使用别的东西，好比 hyphens（连字符）属性）。

line-height：推荐的行高是1.5到2。

letter-spacing 和 word-spacing：字母和字间距。你不会常用它们。

text-indent：首行缩进。

如下三个属性能够在CSS（由于是样式，因此不是在HTML里用）的<ul> 或  <ol> 元素上设置：

list-style-type：设置列表的项目符号的类型。值为none则不显示自带的项目符号，而后就能够用background 属性来代替项目符号。

list-style-position ：设置在每一个项目开始以前，项目符号是出如今列表项内，仍是出如今其外。简单的说，就是一个列表项内换行后是否和项目符号左对齐。

list-style-image ：为项目符号使用自定义图片，其语法至关简单。然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用background 系列属性。background-position设置为0 0则意味着项目符号将出如今每一个列表项的最左上侧。background-repeat：默认条件下，背景图片不断复制直到填满整个背景空间，设为no-repeat就不会复制了。

如下两个属性可在HTML（由于不是样式，因此不是在CSS里用）的<ol>上用：

start：从1 之外的数字开始计数。示例：<ol start="4">。

reverse：倒计数（辣鸡Edge不支持——2018年6月3日）。

value：可用于HTML的<li>，用于指定数值。即便你使用非阿拉伯数字的 list-style-type, 你仍须要使用与其同等意义的数值做为 value 的属性。

outline：轮廓。有点像边框，惟一的区别是边框占用了盒模型的空间，而轮廓没有。举个栗子，选中连接时连接周围的框框。

border-bottom：也能用做下划线，但比起text-decoration，有一些人喜欢前者，由于前者比后者有更好的样式选项， 而且绘制的位置会稍微低一点，因此不会穿过字母 (好比 字母 g 和 y 底部)——彷佛不关我事，由于，我主要是写中文网页——另外，若是border-bottom不设置颜色，就可使下划线采用和元素文本同样的颜色，这对连接是颇有用的，由于连接的每种状态下，文本的颜色是不一样的（text-decoration不也是这样吗- -？）。

 

 

样式化盒子（box）：

叫盒子更好听，但叫框更贴切。

对于块级元素：若是盒子的height被设置为百分比，那么盒子的height不会遵循这个设置了的百分比长度（除非盒子的父元素的height是肯定的），而是总会采用盒子内容的高度（除非给它设置了一个非百分比高度（例如，px或者em））。总结：除非绝对定位或者父元素有肯定的height，不然height设置百分比跟没设置同样。

对于内联元素：除非绝对定位，不然width、height、上下内边距、上下外边距无效，上下边界也不会推开别的元素或移动本身。

边界（border）的width也会忽略百分比设置。

当用绝对的值设置盒子的大小时（好比，固定px的 width 和 height），内容可能会超出设置的大小，此时内容就会溢出盒子。要控制这时候发生的事情，咱们可使用 overflow 属性。该属性有好几个可能的取值，不过最经常使用的是：

auto：超出盒子大小的内容被隐藏，而滚动条显示出来，从而可让用户滚动滚动条来看到全部内容；

hidden：超出盒子大小的内容被隐藏；

visible：超出盒子大小的内容显示在盒子以外（这一般是默认的行为）。

元素的背景由颜色和图像组成(即background-color和background-image)。背景并不在外边距的下层——外边距不是元素区域的一部分，而是元素外面的区域。

outline位于外边距的区域。若是您要使用 outline 属性，请确保不要让它看起来像是被focus的连接，由于这会让用户混淆。

有一些属性能够灵活地控制盒的内容的大小  —  是经过设置大小约束，而不是设置一个绝对大小。这是经过属性 min-width、max-width、min-height 和 max-height 实现的。

margin: 0 auto;能够将应用这段代码的容器在它的父容器内居中。auto（在这种状况下）让左右外边距共享父容器左右外边距之间的可用空间使它居中。

display 能够有不少种不一样的值, 其中三种常见的值为 block, inline, 和 inline-block（另外还有flex和grid）：

块盒(block box)：独自占一行；能够给它设置宽度和高度（设置百分比高度是有条件的）。

行内盒（inline box）：与块盒相反，它会与周围的文本和其它行内元素出如今同一行，除非位置不够了。width、height、上下内边距、上下外边距设置对行内盒无效；上下边界也不会推开别的元素或移动本身。

行内块盒（inline-block box）：介于前二者之间，它会像行内盒同样，跟随周围的文本流堆放，不会在其先后建立换行；不过，它能够像块盒同样，使用width和height设置大小，而且维护其块完整性。

background-attachment: 当内容滚动时，指定元素背景的行为，例如，它是固定仍是滚动。fixed（固定）和local（滚动：将背景设置为它所设置的元素的背景，所以当您滚动元素时，背景会随之滚动）这两个属性值比较好用。

大多数元素的默认背景颜色不是white (白色）而是transparent（透明）。

设置背景颜色做为后备是很重要的。背景颜色在各处都获得了支持，而背景梯度等奇异的特性只在较新的浏览器中获得支持，加上背景图像可能因为某种缘由没法加载，所以，设置基本的背景颜色是一个好主意，这样的话，不管如何，元素的内容都是可读的（没有背景也可读就无所谓设不设置背景颜色做为后备了）。

须要记住的一件重要的事情是，因为背景图像是使用CSS设置的，而且出如今内容的背景中，它们将会在屏幕阅读器之类的辅助技术中不可见。它们不是内容图片，只是为了装饰，若是你想在你的页面上包含一个图片，而这又是内容的一部分，那么你应该在HTML中用<img>元素来作。

background-repeat 容许您指定背景图像是如何重复的。默认值是repeat，其余常见的和普遍支持的值是：no-repeat，repeat-x和repeat-y。

属性值何时用空格分隔、何时用逗号分隔见下（函数的参数固然仍是用逗号分隔，和C++同样filter属性的函数好比drop-shadow的参数居然是用空格分隔的！）：

background:   url(image.png) no-repeat 99% center,

               url(background-tile.png),

                linear-gradient(to bottom, yellow, #dddd00 50%, orange);

background-position：最经常使用的单位有px、rem、百分比和关键词（left、center等）。我看百分比的值挺好用的。若是您只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center。

background-image还有另外一组可用的值——颜色渐变，其中，线性渐变是经过linear-gradient()函数传入的，它是一个background-image属性的值。函数至少须要用逗号分隔的三个参数——背景中渐变的方向，开始的颜色和结束的颜色。可选的参数是颜色站点。注意，您还可使用repeating-linear-gradient()函数来设置一个重复的线性渐变（栗子：repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);）。“去左上角”是to top left。

默认状况下，边界是不可见的。当只设置border-style属性（如设为solid）时，边界会默认使用文本的颜色，且宽度为3px。

border-radius：圆角。甚至能够建立椭圆形角，好比border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;。能够指定1到4个值来指定4个圆角的半径，还可使用普通写法属性，单独设置边界的一个角的边界半径，如border-top-left-radius。圆角以百分比为单位颇有意思。

border-image使实现复杂的图像边界变得容易得多，可是必须在现代浏览器中才能实现(Internet Explorer 11+支持它，以及其余现代浏览器)。注意：只要你用了border-image，您就应该也包括border定义——由于若是浏览器不支持border-image，则该操做能够做为一个回退。使用 border-image-source指定要使用的源图像做为边界图像，它的工做原理和background-image同样

样式化表格：

在你的表上，给table-layout属性设置一个为fixed的值一般是一个好主意，由于它使表的行为在默认状况下更可预测。一般状况下，表列的大小会根据所包含的内容大小而变化（即便设置了width），这会产生一些奇怪的结果。经过 table-layout: fixed，您能够经过控制<th>的宽度来控制列的宽度。Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

th:nth-child(2)：选择<th>的父元素的第2个子元素且该子元素必须是<th>，不然无效。而th:nth-of-type(2)：在<th>的父元素中的全部兄弟<th>里选第2个。()里不止能够填数字还能够填odd或2n+一、even或2n。另外，还有first-child这更简明的方式（但没有second-child之类的）。

border-collapse属性的collapse值对于任何表样式来讲都是一个标准的最佳实践，能把 变成。

有多个嵌套的元素是颇有用的，这样您就能够将样式层叠在一块儿。是的，咱们确实能够在同一个元素上，好比<thead>，同时使用背景图像和背景线性渐变，可是咱们仍是决定分开到两个有嵌套关系的元素中使用，由于考虑到不支持多个背景图像和线性梯度的老浏览器”。

表格样式小贴士：

l   使您的表格标记尽量简单，而且保持灵活性，例如使用百分比，这样设计就更有响应性。

l   使用 table-layout: fixed 建立更可预测的表布局，能够经过在<th>中设置width来轻松设置列的宽度。

l   使用 border-collapse: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。

l   使用<thead>, <tbody>和<tfoot> 将表格分割成逻辑块，并提供额外的应用CSS的地方，所以若是须要，能够更容易地将样式层叠在一块儿。

l   使用“斑马线”表格来提升可读性。

l   使用 text-align直线对齐您的<th>和<td>文本，使内容更整洁、更易于跟随。

 

在咱们的样式化文本模块，咱们学习了text-shadow属性，它容许您将一个或多个阴影应用到元素的文本上。对于盒子来讲，存在一个等价的属性——box-shadow容许您将一个或多个阴影应用到一个元素的盒子上。和文本阴影同样，盒子阴影在各类浏览器中也获得了很好的支持，但只有在IE9+（IE9及更新版本）中可用。你的旧IE版本的用户可能只须要应付没有阴影的状况，因此只要测试一下你的设计，确保你的内容在没有阴影的状况下是清晰可见的。box-shadow还可建立一个带有多个颜色图层的凸起的盒子，并且你能够用任何你想要的方式来使用它，例如，用基于多个光源的阴影来建立一个更加真实的外观。与text-shadow不一样的地方是，box-shadow有一个inset关键字可用——把它放在一个影子的属性值的开始，使它变成一个内部阴影，而不是一个外部阴影，好比，经过:active将盒阴影换成一个很是暗的inset盒阴影，给人一种按钮被按下的样子。

-webkit-：不建议使用。

多个背景：最近(自从Internet Explorer 9)，咱们已经具有了将多个背景链接到单个元素的能力。这是一件好事，由于多重背景很是有用。用逗号分隔不一样的背景定义，这些背景都是堆叠在一块儿的，第一个出如今顶部，第二个在第一个的下面，第三个……因此要注意堆叠顺序。

background:和background-color/img……:效果不同！前者会把以前的全部background覆盖掉，可是后者不会，后者是层叠。

基本上，filters能够应用在任何元素上，块元素（block）或者行内元素（inline）——你只须要使用filter属性，而且给它一个特定的过滤函数以及函数的参数。有些filter选项和其余CSS特性作的事情十分类似，例如drop-shadow()的工做方式以及产生的效果和 box-shadow 或text-shadow十分类似。然而filter:drop-shadow()真正出色的地方在于，它做用于盒（box）内内容（content）的确切形状，而不只仅将盒子自己做为一个大的块，这看起来会更棒，就像下面这图：

 

记住，你能够这样为较旧的浏览器建立一个后备方案：先写一个较旧的浏览器支持的后备声明，而后再接着写只有较新的浏览器才支持的声明。这样比较旧的浏览器会应用第一个声明而忽略掉第二个不支持的声明，与此同时比较新的浏览器会先应用第一个声明，而后用第二个声明把它覆盖掉。

被box-shadow用于生成阴影的东西是border（border的宽是0px都行）。

有些时候，CSS代码不生效是由于该用空格分隔的属性值或参数用了逗号分隔，或者反过来。

例子：多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角（不加inset的两个正值表示外部的往下和往右，加了inset的两个正值就表示内部的往下和往右，即左上角的内部阴影）附近的白色半透明阴影（inset 5px 5px 3px rgba(255, 255, 255, 0.5)）和另外一个是右下角附近的黑色半透明阴影（inset -5px -5px 3px rgba(0, 0, 0, 0.5)），让盒子有一个漂亮的3D外观。

 

 

CSS排版概述：

HTML元素彻底按照源码中出现的前后次序显示，但布局技术会覆盖默认的布局行为。

浮动——应用 float属性的值，诸如 left 可以让块级元素互相并排成一行，而不是一个“堆叠”在另外一个上面。

float 属性有四个可能的值：

left — 将元素浮动到左侧；

right — 将元素浮动到右侧；

none — 默认值, 不浮动；

inherit — 继承父元素的浮动属性。

有四种主要的定位类型须要咱们了解：

静态定位(Static positioning)是每一个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。

相对定位(Relative positioning)容许咱们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)很是有用。relative值——这属性自己不作任何事情，因此咱们还要添加top和left属性。这些能够将受影响的元素向下或向右移。

绝对定位(Absolute positioning)将元素彻底从页面的正常布局流中移出（因此绝对定位会使其它元素的位置发生变化），相似将它单独放在一个图层中. 咱们能够将元素相对于页面的 <html> 元素边缘固定，或者相对于离元素最近的被定位的父元素(ancestor element)（相对定位或绝对定位的父元素都行）。绝对定位在建立复杂布局效果时很是有用，例如经过标签（tabbed boxes）显示和隐藏的内容面板（选项卡消息框）或者经过按钮控制滑动到屏幕中的信息面板（经过按图标使面板滑动出现或者消失）。top和left属性对绝对位置元素的影响不一样于相对位置元素。在这种状况下，他们没有指定元素相对于原始位置的移动程度。相反，它们指定元素应该离页面边界的顶部和左边的距离(确切地说，是离 <html>元素的距离)。

固定定位(Fixed positioning)与绝对定位很是相似，除了它是将一个元素相对浏览器视口（viewport）固定，而不是相对另一个元素。 在建立相似页面滚动老是处于页面上方的导航菜单时很是有用。

 

HTML表格对于显示表格数据是很好的，可是不少年前——在浏览器中支持基本的CSS以前——web开发人员过去也经常使用HTML表格来完成整个网页布局——将它们的页眉、页脚、不一样的列等等放在不一样的表行和列中。这在当时是有效的，但它有不少问题——表布局是不灵活的，很是重的标记，难以调试和语义上的错误（好比，屏幕阅读器用户在导航表布局方面有问题）。CSS表格的存在是为了让您可以像表格同样布局元素，而没有上面描述的任何问题。

CSS是一种功能强大的语言，它能够作不少事情，但它却在布局上有所降低。传统的布局方法，如float和positioning，有时会但愿有更复杂、更灵活、更有弹性的方法。flexbox应运而生。

display: flex; 告诉，好比<section>元素，的子元素做为flexible boxes——默认状况下，它们都将展开以填充父类的可用高度，它们至少会留有足以包裹它们的内容的宽度（有余就平分剩余宽度使填充父类的可用宽度。

 

floats：

虽然有更新的更好的布局技术可用——但浮动仍然是人们的旧爱，由于它能够支持到 Internet Explorer 4。

最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。

让咱们考虑一下浮动是如何工做的——浮动元素 (这个例子中是<img> 元素)会脱离正常的文档布局流，并吸附到其父容器的，好比，左边 (这个例子中是<body>元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

浮动一般用于建立多个列布局，尽管事实上，它不是真的打算作这个工做，并有一些奇怪的反作用必须处理。

两列布局：须要注意的一件事是，当浏览器宽度变得很是窄时，列就会变得很糟糕。窄屏幕的状况下（如手机)，切换回单列布局一般是有意义的，使用媒体查询（media queries）能够实现这一功能。大家将在将来的响应式网页设计模块中学习这些知识。

全部在浮动下面的自身不浮动的内容都将围绕浮动元素进行wrap（与浮动不一样），若是没有处理这些元素，就会变得很糟糕。幸运的是，有一种简单的方法能够解决这个问题—— clear 属性。当你把这个属性应用到一个元素上时，它主要意味着"此处中止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另外一个元素。clear 能够取三个值：left：中止左浮动；right：中止右浮动；both：中止左右浮动。

浮动元素在父元素中所占的区域的有效高度为0 ——若是你在浏览器中加载 1_three-column-layout.html 并用开发工具查看 <body> 的高度，你将会看到咱们的意思是什么——所报告的<body>的高度只有 <h1> 的高度，而没有包括浮动元素的高度。这个能够经过不少方式解决，其中一种是clearing the float at the bottom of the parent container。

非浮动元素的外边距不能用于它们和浮动元素之间建立空间（好好理解），但浮动元素的外边距能够用于它们和非浮动元素之间建立控件；在正常布局中位于浮动元素之下的元素能够用外边距“穿过”浮动元素来建立空间，但若是清除了浮动，就不行了。若是您须要一个元素来间接清除您的浮动，在您想要清除的浮动以前添加一个看不见的“clearfix div”是很是有用的。

有一个问题是列高度是不一样的—— 若是列都是相同的高度，它看起来会更好。咱们能够经过给全部的列固定height 来解决这个问题，然而在许多状况下这并不理想——它使设计呆板。若是你能保证列中老是有相同数量的内容，这是能够的，但这并不老是如此——在不少类型的网站上，内容也会按期更改，并且浏览器窗口的变小也可能会使内容溢出。这正是像flexbox这样的新布局技术所解决的问题。Flexbox能够自动地延长列，这样他们就会像最长的一列同样。你也能够考虑：

l  将这些列的背景颜色设置为父元素的背景颜色，这样您就看不到高度是不一样的。这是目前最好的选择。

l  将它们设置为固定的高度，并用overflow使内容滚动。

l  使用一种叫作伪列（faux columns）的技术——这包括将背景(和边界)从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景同样。不幸的是，这将没法处理列边界。

 

positioning：

默认状况下，块级元素的内容的width+padding+border是其父元素的内容的width的100％，而且总高与本身的的内容的height同样。Inline elements are all tall as their content, and as wide as their content（their是指内联元素本身）.You can't set width or height on inline elements — they just sit inside the content of block level elements.

默认状况下，块级元素在视口中垂直布局——每一个都将显示在上一个元素下面的新行上，而且它们的外边距将分隔开它们。

相对定位与静态定位很是类似，占据在正常的文档流中，除了你仍然能够修改它的最终位置。

绝对定位的元素再也不存在于正常文档布局流中。相反，它坐在它本身的层独立于一切。这是很是有用的——这意味着咱们能够建立不干扰页面上其余元素的位置的隔离的UI功能 ——例如弹出信息框和控制菜单，翻转面板，能够在页面上的任何地方拖放的UI功能等。

哪一个元素是绝对定位元素的“包含元素”？ 默认状况下，它是<html>元素。“包含元素”准确的名字是定位上下文。

咱们能够改变定位上下文， 这是经过在元素的其余祖先之一上设置定位（即设置position: relative;或position: absolute;或position: fixed;）来实现的——它是嵌套在其中的元素之一。

默认状况下，被定位的元素都具备z-index，为auto，实际上为0。z-index只接受无单位索引值。静态定位的元素的z-index改不了，想改就先把该元素设置为别的定位。

可靠的居中老技巧 margin: 0 auto;。注：第一个值也能够不是0。

 

实际的定位例子：

咱们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个很是经常使用的特征。这包括含有大信息量的应用，好比策略战争游戏，好比移动版的网页（屏幕狭小、空间有限），好比你可能想要放置许多信息的紧凑消息框，不用就会充满整个UI。

在早先的课程中咱们建议尽量不固定内容容器的高度。这个状况下是能够的，由于咱们是在选项卡中固定的内容，若是每一个标签都有不一样的高度，看起来也有些不和谐。

We are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.

.info-box ul li a.active：意思是类名为info-box的元素中的<ul>元素中的<li>元素中的<a>元素，且<a>元素的类名为active。

在咱们的第二个例子中，咱们将会采用咱们的第一个例子——咱们的信息盒子——把它加到一个满的网页之中去。可是不只仅是这样——咱们将固定它的位置，以便于它能待在浏览器窗口的同一个位置。当主要内容滚动时，这个信息盒子将会待在屏幕的同一个位置。

最后一个咱们在这里介绍的例子是经过按图标使面板滑动出现或者消失——就像前面提到的，这种场景在移动端的布局中很流行，由于移动端的屏幕很小，因此你不但愿使用大部分屏幕显示信息面板或者菜单。

有名的checkbox hack 技术，能够经过切换按钮来提供一个无JS的方法来控制一个元素。记住，点击<label>标签也会选择相对应的checkbox！咱们已经告诉你这是一种hack了。

cursor: pointer;能把移到label上的鼠标光标变成“手”，可，做为一个额外的可视化线索告诉用户这个label能够作一些有趣的事情。

如下代码经过把复选框移到屏幕外来隐藏复选框。

input[type="checkbox"] {

position: absolute;

  top: -100px;

}

:checked伪类：表示被选中。

transition（过渡）属性，容许你在状态改变的时候平滑地过渡，而不是粗暴地“变”或“还原”。

这个例子是一个至关巧妙地避免使用JavaScript来建立一个切换按钮效果的方式。但这种效果确实有一些问题 ——有点滥用表单元素（它们不是为了这个目的），而且在可访问性方面效果不是很好 —— 标签在默认状况下不可被focus，而且表单元素的非语义使用可能会致使屏幕朗读器出现问题。 JavaScript和连接或按钮可能更合适，但这样的实验仍然颇有趣。

 

flexbox：

咱们须要把要设置为flexible boxes的元素（即（flex item））的父元素（即flex container）的display 设置为flex。注意：假如你想设置行内元素为 flexible box，也能够置 display 属性的值为 inline-flex。

 

section {

  display: flex;

}

单单上面这个规则就能够生成具备相同宽度和高度的列（这些列原本是成行布局的）。

弹性盒子提供了 flex-direction 这样一个属性，它能够指定主轴的方向（flex item放置的方向）— 它默认值是 row（即多个列）。还可使用 row-reverse 和 column-reverse 值反向排列 flex 项目。

当flex item超出了flex container， 解决此问题的一种方法是将如下声明添加到 flex container的规则中：flex-wrap: wrap;。

flex-direction 和 flex-wrap的缩写是flex-flow。

flex（决定如何分配剩余空间）: 1; 在每一个flex item的标签上设置，表示每一个flex item占用空间都是相等的。由于它是一个比例，这意味着将每一个 flex 项的设置为 400000 的效果和 1 的时候是彻底同样的。设置为0则意味着不参与分配剩余的可用空间。

flex: 1 200px; 表示这个flex item将首先给出200px的可用空间，而后，剩余的可用空间再根据分配的比例共享。

弹性盒子的真正价值能够体如今它的灵活性/响应性，若是你调整浏览器窗口的大小，或者增长一个flex item，这时的布局仍旧是好的。

flex 是一个能够指定最多三个不一样值的缩写属性。咱们建议不要使用flex的全写属性，除非你真的须要（好比要去覆盖以前写的缩写属性中的一个属性）。使用全写会多写不少的代码，它们也可能有点让人困惑。

justify-content（写在flex container里）控制 flex 项在主轴上的位置。默认值是 flex-start，这会使全部 flex 项都位于主轴的开始处。你也能够用 flex-end 来让 flex 项到结尾处。center也是可用的，可让 flex 项在主轴居中。而space-around 是颇有用的——它会使全部 flex 项沿着主轴均匀地分布，并且在两端都会留有一点空间。还有一个值是 space-between，它和 space-around 很是类似，只是它不会在两端留下任何空间。

align-items（写在flex container里）控制 flex 项在交叉轴上的位置。默认的值是 stretch，其会使全部 flex 项沿着交叉轴的方向拉伸以填充父容器。若是父容器在交叉轴方向上没有固定的高度，则全部 flex 项将变得与最长的 flex 项同样长（即高度保持一致）。使用center 值会使flex 项保持其原有的高度，并且会在交叉轴居中。你也能够设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐全部的值。

你能够用 align-self （flex item元素中用）覆盖 align-items（flex container元素中用）的行为。

弹性盒子有能够改变 flex 项的布局位置的功能，order，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难作到的一点。

全部 flex 项默认的 order 值是 0。order 值大的 flex 项比 order 值小的在显示顺序中更靠后。相同 order 值的 flex 项按源顺序显示（设置负值也是能够的）。

flex 嵌套：弹性盒子也能建立一些颇为复杂的布局。设置 flex 项为 flex 容器也是没有什么问题的，它的孩子也就表现为 flexible box 了。

 

Grids：

任何有设计背景的人彷佛都感到惊讶，CSS没有内置的网格系统，而咱们彷佛使用各类次优方法来建立网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，可是你可能须要知道在将来一段时间内建立网格的现有方法。

目前大多数网格类型布局是使用浮动建立的。使用浮动来建立一个多列布局——这是任何使用网格系统的本质方法。

12列网格 —— 一种很常见的选择，由于12能够被六、四、3和2整除，被认为很是适应不一样的状况。

你可使用calc()函数在你的CSS里面作数学 — 这容许你插入简单的数学方程到你的CSS值。

偏移容器（offset containers）：好比下面这个，有点巧妙（这样，想偏移的时候加个class名就行了）。

.offset-by-one {

  margin-left: 10.41666666%;

}

用浮动建立的网格的最大限制是它基本上是一维的。咱们处理的是列元素，只能跨越多个列，而不能跨越行。这些旧的布局方法很是难以控制元素的高度。而没有明确设置高度，这是一个很是不灵活的方法 - 它只有当你能保证你的内容将是必定的高度才有效。

Flexbox是一维设计。它处理单个维度，即行或列。不能为列和行建立严格的网格，这意味着若是咱们要为网格使用flexbox，咱们仍然须要为浮动布局计算百分比。

在您的项目中，您可能仍然选择使用flexbox'grid'，由于flexbox提供的额外对齐和空间分布能力超过浮动。可是，您应该知道，您这样使用flexbox的方式不是它的设计目的。

第三方网格系统：全部的Skeleton（或任何其余网格框架）在CSS中设置了预约义的类，您能够经过将它们添加到您的标记来使用。这和你本身计算这些百分比的工做彻底同样。当使用Skeleton时，咱们须要写不多的CSS。它为咱们处理全部的浮动，当咱们添加类到咱们的标记。正是这种将布局的责任转移给其余东西的能力使网格系统的框架成为一个引人注目的选择！Skeleton是比你可能遇到的一些比框架更简单的网格系统框架。大型框架（如Bootstrap和Foundation）中的网格为各类屏幕宽度提供了更多的功能和额外的断点。可是，它们都以相似的方式工做 - 经过向您的标记添加特定类，您可使用预约义的网格控制元素的布局。

Native CSS Grids with Grid Layout：即CSS内置的网格系统，正在逐渐被浏览器支持。使用CSS网格布局，您能够彻底在CSS中指定网格，而不须要像第三方网格和手工构建的网格同样，在HTML中添加<div>来造成行和肯定在这些行中的列数。

CSS网格属性：用display: grid;声明为网格，而后用grid-template-columns: repeat(12, 1fr);（也能够不用repeat而直接写12个1fr）建立12列的网格，每列的单位是1fr（它描述在网格容器的一小部分可用控件），而后grid-gap: 20px;（顾名思义）。要对跨越网格上的多个列轨道的容器进行样式化，咱们可使用该grid-column属性，如grid-column: auto / span 6;，正斜杠以前的值是开始列——在这种状况下，咱们没有明确设置，则让浏览器放在下一个可用的列；正斜杠以后的span 6意思是跨越6列，也能够只用数字，那么意思就是跨越到数字表明的那一列。另外，还有grid-row。grid-column:和grid-row:后均可只跟1个数字表示那一列或那一行。

CSS网格是二维的，所以随着布局的增加和缩小，元素保持水平和垂直排列。

 

 

另外：

CSS transform 属性容许你修改CSS视觉格式模型的坐标空间。使用它，元素能够被移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。

vertical-align（可用于垂直居中；用在子元素上，这点与text-align不一样）：specifies the vertical alignment of an inline or table-cell box.

垂直居中还能够用绝对定位和calc()实现（即便缩放窗口仍居中）。