CSS 基础

Contents

CSS 基础语法

CSS 如何影响 HTML

一个CSS规则由以下组成

一组属性，属性的值更新了 HTML 的内容的显示方式。
一个选择器，它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。

CSS 如何工作

浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
浏览器显示 DOM 的内容。

如何将 CSS 应用到 HTML

外部样式表 <link rel="stylesheet" href="style.css">
内部样式表 <style> p { color: red;} </style>
内嵌样式 <p style="color:red;">This is my first CSS example</p>

CSS声明

CSS 选择器和规则

哪些元素是它们需要应用的。通过在每个声明块前加上选择器（selector）来完成这一动作，选择器是一种模式，它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。选择器加上声明块被称为规则集（ruleset），通常简称规则（rule）

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

CSS 语句

CSS 规则是样式表的主要组成块，这是在 CSS 中最常见的块。但这有一些其它类型的块

@-规则(At-rules)：在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。
- @charset 和 @import （元数据）
- @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
- @font-face （描述性信息）

语法：
@import 'custom.css';

嵌套语句是 @-规则 中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件为：
- @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
- @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
- @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。

CSS 简写

些属性比如 font，background，padding，border，和 margin 被称为简写属性，这是由于它们允许你在一行设置多个属性，从而节省时间并使代码更整洁。

选择器

简单选择器

通过元素类型、class 或 id 匹配一个或多个元素。

类型选择器
一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
p { color: red; }
类选择器
类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)
.first { font-weight: bold; }
ID 选择器
ID选择器是由一个哈希/磅符号 (#)，后面跟着给定元素的ID名称组成的。任何元素都可以使用id属性设置唯一的ID名称。可以任意定义ID的名称。这是选择单个元素的最有效的方式。
#polite { font-family: cursive; }
通用选择器
通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。
* { padding: 5px; }

属性选择器

通过属性 / 属性值匹配一个或多个元素。属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号 ([ ]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。属性选择器可以根据其匹配属性值的方式分为两类。

存在和值属性选择器
- [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
- [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
子串值属性选择器。
这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）
- [attr|=val] : 选择attr属性的值是 val 或值以 val 开头的元素。
- [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
- [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
- [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串）。

伪类选择器

匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素。一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。

a:visited { color: blue; }

伪元素选择器

匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，伪元素前缀是两个冒号 (::) ，同样是添加到选择器后面去选择某个元素的某个部分。

::after
::before
::first-letter
::first-line
::selection
::backdrop

[href^=http]::after { content: '⤴'; }

组合器

匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。

多重选择器

不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的所有元素。

虽然一次使用一个选择器就很有用，但在某些情形中却可能导致效率低下。 CSS选择器在你开始组合他们时就进行细粒度选择的会更加有效。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。

名称	组合器	选择
选择器组	A,B	匹配满足A（和/或）B的任意元素
后代选择器	A B	匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器	A > B	匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器	A + B	匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器	A ~ B	匹配B元素，满足条件：B是A之后的任意一个兄弟节点（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

CSS　数值和单位

数值
长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
在屏幕上推荐使用相对单位（针对不同设备的不同分辨率。em,rem,px），而非绝对单位（cm, mm, in, pt and pc）。在设置字体时，推荐使用 em。使用相对单位是非常有用的-你可以相对于你的字体或视口大小来调整HTML元素的大小。
- px：在同一台设备上，是绝对单位（不同设备，分辨率不同，px表示大小也就不同）。
- em：1 em 等于我们设计的当前元素的父元素上设置的字体大小。相对长度单位。默认 1 em=16 px；当对父元素应用了字体大小，例如 font-size=10 px，那么此时对于其子元素而言，1 em=10 px。
- rem: 这个单位的效果和 em 差不多，除了 1 rem 等于 HTML 中的根元素的字体大小， (i.e. ) ，而不是父元素。

注：px 作为相对单位，这里的相对是指相对不同设备而言的，因为不同设备分辨率不同，px转换为绝对单位的数值也就不同。如果是同一台设备，px 则为绝对单位

百分比
可以用于指定尺寸或长度,例如取决于父容器的长度或高度，或默认的字体大小。大部分使用特定数值指定的内容同样可以使用百分比来指定。有两种不同的框布局方式：
- 动态（流体）布局（跟随浏览.视口大小的变化），如 %。
- 固定宽度布局（不管怎样都保持不变），如 px 、em。

这两种布局方式有着不同的应用场景。

颜色
用于指定背景颜色，字体颜色等。设置颜色有以下几种方式。
1. 关键字：CSS中最简单、最古老的颜色类型就是颜色关键词。这些都是代表特定颜色值的特定字符串。
2. 十六进制数值：每个颜色包括一个哈希/磅符号（#）和其后面紧跟的六个十六进制数，每对十六进制数代表一个通道（红色、绿色或者蓝色）
3. RGB：一个RGB值是由 rgb() 函数与其给定的三个参数构成。三个函数值分别表示红色，绿色和蓝色通道的颜色值，这与十六进制值的工作方式大致相同。区别在于，RGB中每个通道不是由两个十六进制数字表示的，而是由0到255之间的十进制数表示的。
4. HSL：支持度比RGB稍微差一点的是HSL（旧版本的IE浏览器不支持），hsl() 函数接受三个表示色调、饱和度以及亮度的参数。色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。饱和度：从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。亮度：从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。
5. RGBA 和 HSLA：RGB和HSL都有相应的模式——RGBA和HSLA——不仅允许您设置想要显示的颜色,还有此颜色的透明度（ transparency ）。由包含四个参数的函数实现（例如：rgba(255,0,0,0.5)）。
6. 不透明度：通过CSS——opacity 属性。与设置某个特定颜色的透明度相比，这会设置所有选定元素以及它们的孩子节点的不透明度。（opacity: 0.5;）
坐标位置
例如，以屏幕的左上角为坐标原点定位元素的位置。
函数
例如，用于指定背景图片或背景图片渐变。functions是代码中的可重复使用的部分，它可以多次运行，以便使开发人员和计算机以最小的代价完成重复的任务。（例如：例如 rgb()， hsl()）格式：名字后跟着括号,括号里包含用逗号分隔的一个或多个值。

层叠和继承

CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要。

层叠
什么选择器在层叠中胜出取决于三个因素（优先级）：
- 重要性
  在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。源顺序后面的规则通常会覆盖较早的规则。不建议使用，除非绝对必须使用。因为 !important 改变了层叠正常的工作方式，在调式 CSS 问题时会非常复杂。一个 CSS 声明的重要性取决与，它被指定在什么样的样式表内。用户可以自定义样式表覆盖开发者的样式。
- 专用性
  衡量选择器的具体程度的一种方法。优先级顺序（专用性）：ID选择器 > 类选择器 > 元素选择器（比起 class 选择器，Id选择器专用性更高）。战胜ID选择器的唯一方法是使用 !important。一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位，在四个列中的四个简单数字：
  1. 千位
    如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
  2. 百位
    在整个选择器中每包含一个ID选择器就在该列中加1分。
  3. 十位
    在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  4. 个位
    在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
- 源代码顺序
  如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则在后，后面的规则将战胜先前的规则。所有这些都发生在属性级别上——属性覆盖其他属性，但你不会让整个规则凌驾于其他规则之上。当多个CSS规则匹配相同的元素时，它们都被应用到该元素中。只有在这之后，任何相互冲突的属性才会被评估，以确定哪种风格会战胜其他类型。
继承
应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会。
- 可被继承
  font-family、color （自然继承）等
- 不被继承
  margin、padding、border、background-image 等
  CSS为处理继承提供了四种特殊的通用属性值：
- inherit
  该值将应用到选定元素的属性值设置为与其父元素一样。
- initial
  该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
- unset
  该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。
- revert
  如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置），否则属性值被设置成用户代理的默认样式。

框模型

框属性
文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。默认情况下，content的width 被设置为可用空间的100%（在margin, border, padding占据了它们的空间后剩下的空间的宽度）。
- 高度
  padding+ border + height = 盒子的高度。框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px 或者em），它会比在页面上默认是100%高度更实用。border也忽略百分比宽度设置。框的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和。
- 宽度
  盒子的宽度(在页面呈现出来的宽度)，需要加上一些其它的属性：padding + border + width= 盒子的宽度。
  如果将盒子的宽度设置为 200px ,而实际呈现的盒子的宽度可能会大于 200px,(除非没有 border 和 padding)，CSS设置的宽度仅仅是内容区的宽度，而非盒子的宽度。当我们希望页面呈现的盒子的宽度是200px的时候，我们需要减去它的左右边框和左右补白，然后设置为对应的CSS宽度。
使用 box-sizing 对盒子进行布局：
语法：box-sizing: content-box | border-box | inherit;
当使用 box-sizing:border-box时，设置 height 为200px，则设置的直接即为盒子的高度/宽度，而非内容的高度/宽度。当再设置它的左右边框和左右补白(padding)后，它的内容区会自动调整。
溢流（overflow）
当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用overflow属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：
- auto
  当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
- hidden
  当内容过多，溢流的内容被隐藏。
- visible
  当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）
背景剪裁（Background clip）
框的背景是由颜色和图片组成的，它们堆叠在一起（background-color, background-image）。它们被应用到一个盒子里，然后被画在盒子的下面。默认情况下，背景延伸到了边界外沿。
轮廓(Outline)
一个框的 outline 是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）
框的类型
框的应用都表示的是块级元素的。可以通过display属性来设定元素的框类型。
- 块框（ block box）
  是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框
- 行内框（ inline box）
  与块框是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
- 行内块状框（inline-block box）
  像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。

样式化文字

文本样式属性

用于样式文本的 CSS 属性通常可以分为两类；

字体样式
用于字体的属性，会直接应用到文本中。字体类型，字体大小，粗体/斜体。包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( span 元素或者 strong 元素), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line(选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)
- 字体种类
  ont-family （浏览器查找在当前机器上与浏览器中所设置的匹配的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default fon）由于你无法保证你想在你的网页上使用的字体的可用性, 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。
- 字体大小
  通过 font-size 属性设置。
  1. px
    在同一台设备上，是绝对单位（不同设备，分辨率不同，px表示大小也就不同）。
  2. em
    1em 等于我们设计的当前元素的父元素上设置的字体大小。相对长度单位。默认 1em=16px；当对父元素应用了字体大小，例如 font-size=10px，那么此时对于其子元素而言，1em=10px。
  3. rem
    这个单位的效果和 em 差不多，除了 1rem 等于 HTML 中的根元素的字体大小，而不是父元素。
- 文本形式
  - font-style
    用来打开和关闭文本 italic (斜体)。值：normal，italic，oblique
  - font-weight
    设置文字的粗体大小。值：normal，bold 等
  - text-transform
    允许你设置要转换的字体。值：none（防止任何转型） uppercase（将所有文本转为大写）， lowercase（将所有文本转为小写），capitalize（转换所有单词让其首字母大写）full-width（将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐）
  - text-decoration
    设置/取消字体上的文本装饰； text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成，所以可以接受多个值。值：none（取消已经存在的任何文本装饰）underline（文本下划线），overline:（文本上划线），line-through（穿过文本的线）
  - text-shadow
    字体阴影。值：最多需要 4 个值，阴影与原始文本的水平偏移阴影与原始文本的垂直偏移模糊半径阴影的基础颜色。text-shadow: 4px 4px 5px red;
- 颜色
  color （设置选中元素的前景内容的颜色）
文本布局风格
作用于文本的间距以及其他布局功能的属性。文本对齐方式、行间距。
- text-align：文本对齐。值：left，right，center，justify（使文本展开，改变单词之间的差距，使所有文本行的宽度相同）
- line-height：设置文本每行之间的高，可以接受大多数单位；推荐用法，使用无单位的值，此时将作为乘数；无单位的值乘以 font-size 来获得 line-height。line-height:1.5; 文本行高设置为字体高度的1.5倍。
- letter-spacing：字母与字母之间的间距。
- word-spacing：单词与单词之间的间距。
Font 简写
许多字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： 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;

样式化其他元素

样式化列表
- list-style-type
  设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
- list-style-position
  设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
- list-style-image
  允许您为项目符号使用自定义图片，而不是简单的方形或圆形
- 列表计数
  - ol 列表属性：
    start：允许你从1 以外的数字开始计数。
    reversed：将启动列表倒计数。
  - li 列表项属性：
    value：允许设置列表项指定数值。
文本样式化链接
以下设置样式都通过伪类来实现：
- Link
  这是链接的默认状态(没有访问过的)，当它没有处在其他状态的时候
- Visited
  这个链接已经被访问过了(存在于浏览器的历史纪录)
- Hover
  当用户的鼠标光标刚好停留在这个链接
- Focus
  一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus())
- Active
  一个链接当它被激活的时候 (比如被点击的时候)

链接中包含图片
一个常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。

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;/* 设置 padding-right，为背景图片留出空间，使其不会和文本重叠*/
}

样式化链接为按钮

a {
    outline: none;
    text-decoration: none;/*取消下划线*/
    display: inline-block;/*设置链接显示为块状*/
    width: 19.5%;/*设置链接按钮块的宽度*/
    margin-right: 0.625%;/*设置各个链接的外边距*/
    text-align: center;
    line-height: 3;/*设置按钮链接的高度*/
    color: black;
}

样式化区块

盒子的属性

盒子的属性：width、height、padding、border、margin。

overflow
溢出，当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢出盒子。值：auto（超出盒子大小的内容会被隐藏，通过滚动条显示内容。）、hidden（超出盒子部分被隐藏）、visible（超出盒子部分隐藏在盒子之外）
outline
看起来像边框，但是它不是盒模型的一部分。它表现得像边框，但是是画在盒子之上，不会修改盒子的大小（具体来说，outline 是画在边框之外，外边距区域之内）
min-width、max-width、min-height 和 max-height：设置宽和高的约束。
box-sizing: border-box：完全改变盒模式。padding 和 border的宽度在指定的 width内。

/*如果你想通过设置将一个布局的外层容器的宽度设置为百分比，从而让布局的宽度变得灵活，不过又不想让它变得太宽或者太窄。*/

width: 70%;
max-width: 1280px;
min-width: 480px;
margin: 0 auto;  /*将应用这段代码的容器在它的父容器内居中*/

/*当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。 当宽度低于480px时，视口将小于容器，您必须滚动才能看得到完全的内容。*/

盒子的类型

display：元素的显示类型。值：

block
（堆放在其它盒子之上的盒子；即盒子之前以及之后的内容出现在不同的行上；并且可以给它设置高度和宽度。）
inline
（它跟随文档的文本流堆放；即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行；宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置
inline-block
（会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行）

背景

background-color
背景颜色。值：transparent（透明等）
background-image
指定了在元素背景中显示的背景图像。值：该属性最简单的用法是使用 url() 函数——它以一个参数的路径作为参数——获取一个静态图像文件来插入。
背景渐变
线性渐变是通过linear-gradient()函数传入，它是 background-image的值。函数至少需要用逗号分隔的三个参数——背景中渐变的方向，开始的颜色和结尾的颜色。

div {
background-image: linear-gradient(to bottom, orange, yellow);
}

/*这个渐变从上往下，从顶部（高度为0%处）到橙色指定位置（高度为40%处），由黄色向橙色渐变，然后再由该位置到底部（高度为100%处），由橙色向黄色渐变。您可以指定任意多个颜色站点*/

div {
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);
}

background-repeat
指定背景图像是如何重复的。值：no-repeat（图像将不会重复，它只会显示一次）repeat-x（图像将在整个背景中水平地重复）repeat-y（图像会在背景下垂直地重复）repeat（图像将在整个背景中水平和竖直地重复）
background-position
在背景中任意位置放置背景图像。值：使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)；可接受的值类型：px 这样的绝对值，rem 这样的相对值，百分比，关键字（right、center等）。
background-attachment
指定当内容滚动时它们是如何滚动的。值：scroll（会使元素的背景在页面滚动时滚动。如果元素内容滚动了，背景并不会滚动。），fixed（会使元素的背景相对于视口固定；因此不管当页面还是元素内容滚动时，它都不会滚动，它会始终保持在屏幕上相同的位置。），local（将背景设置为它所设置的元素的背景，因此当您滚动元素时，背景会随之滚动。）
background-clip
背景剪裁。值：border-box（背景延伸至边框外沿）、padding-box（背景延伸至内边距外沿。不会绘制到边框处。）、content-box（背景被裁剪至内容区外沿。）、text（背景被裁剪成文字的前景色。）
背景简写
background：声明上面讨论的所有属性值。

div {
    background-color:yellow;
    background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
    background-repeat: no-repeat;
    background-position: 99% center;
}

/*替换为：*/

div {
    background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

多个背景

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-size
背景尺寸，许你动态地改变背景图像的大小，使它更适合你的设计。可以使用所有长度单位来指定你想要的值——px，百分比， rem等.

边界

普通写法
border-top, border-right, border-bottom, border-left: 设置边界一侧的宽度，样式和颜色。
border-width, border-style, border-color: 设置边界宽度、样式或颜色，但是会设置边界的四个边。
简写：border: 2px solid red; border-bottom: 6px solid red;
border-radius
设置盒子上的圆角。在不同的角落放置不同大小的边界半径, 您可以指定两个，三个或四个值。也可单独设置某个角的形状（border-top-left-radius）
border-image
边界图像。

格式化表格

border: 3px solid black：为表格设置边框。
table-layout:fixed：可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。通常情况下，表列的尺寸会根据所包含的内容大小而变化。
thead th:nth-child(n)：设置某一个具体表头标题的样式。
border-collapse:collapse：让边框合为一条，默认情况下，在表元素上设置边框时，它们之间将会有间隔。

高级区块效果

box-shoadow
设置盒子阴影。值：共四项：水平偏移量（horizontal offset ，即向右的距离）垂直偏移量（vertical offset，即阴影从原始盒子中向下偏移的距离）模糊半径（blur radius，在阴影中应用的模糊度）阴影的基本颜色（base color）
drop-shadow()
滤镜：滤镜可以应用在任何元素上，块元素（block）或者行内元素（inline）——你只需要使用filter属性。drop-shadow()的工作方式以及产生的效果和 box-shadow() 十分相似。

CSS 排版

float
浮动，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。由于float意味着使用块布局，它在某些情况下修改display 值的计算值。值：
- left
  表明元素必须浮动在其所在的块容器左侧的关键字
- right
  表明元素必须浮动在其所在的块容器右侧的关键字
- none
  表明元素不进行浮动的关键字
- inline-start
  关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧
- inline-end
  关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧


/*两列浮动*/

div:nth-of-type(1){  
    width: 48%;  
    float: left;
}

div:nth-of-type(2) {  
    width: 48%; 
    float: right;
}

/*三列浮动：*/

body {  
    width: 90%;
    max-width: 900px; 
    margin: 0 auto;
}
div:nth-of-type(1) {  
    width: 36%; 
    float: left;
}
div:nth-of-type(2) { 
    width: 30%; 
    float: left; 
    margin-left: 4%;
}
div:nth-of-type(3) { 
    width: 26%; 
    float: right;
}

弹性区块
display:flex

flex-direction: row;
flex-wrap: wrap;

/*可简写为：*/

flex-flow: row wrap;

position定位
示例：position: absolute;

Kyle

LOVE CODE & ENJOY LIFE

CSS 基础

CSS 基础语法

CSS 如何影响 HTML

CSS 如何工作

如何将 CSS 应用到 HTML

CSS声明

CSS 选择器和规则

CSS 语句

CSS 简写

选择器

简单选择器

属性选择器

伪类选择器

伪元素选择器

组合器

多重选择器

CSS　数值和单位

层叠和继承

框模型

样式化文字

文本样式属性

样式化其他元素

样式化区块

盒子的属性

盒子的类型

背景

边界

格式化表格

高级区块效果

CSS 排版

CSS 基础语法

CSS 如何影响 HTML

CSS 如何工作

如何将 CSS 应用到 HTML

CSS声明

CSS 选择器和规则

CSS 语句

CSS 简写

选择器

简单选择器

属性选择器

伪类选择器

伪元素选择器

组合器

多重选择器

CSS 数值和单位

层叠和继承

框模型

样式化文字

文本样式属性

样式化其他元素

样式化区块

盒子的属性

盒子的类型

背景

边界

格式化表格

高级区块效果

CSS 排版

CSS　数值和单位