1.块级元素和行内元素

• 块级(block-level)元素；行内(内联、inline-level)元素。
• 块元素的特点：
  a.总是在新行上开始；
  b.高度、行高以及外边距和内边距都可控制；
  c.宽度默认是它容器的100%，除非设定一个宽度；
  d.他可以容纳内联元素和其他块元素。
• 内联元素的特点：
  a.和其他元素都在同一行；
  b.高，行高及外边距和内边距不可改变；
  c.宽度就是它的文字和图片的宽度，不可改变；
  d.内联元素只能容纳文本或者其他内联元素。
• 行内元素智能设置左右内外边距，设置上下边距会把面积撑开，但是不会影响该元素的实际大小。
• 常见的块级元素：
  address - 地址
  blockquote - 块引用
  center - 举中对齐块
  dir - 目录列表
  div - 常用块级容易，也是css layout的主要标签
  dl - 定义列表
  fieldset - form控制组
  form - 交互表单
  h1 - 大标题
  h2 - 副标题
  h3 - 3级标题
  h4 - 4级标题
  h5 - 5级标题
  h6 - 6级标题
  hr - 水平分隔线
  isindex - input prompt
  menu - 菜单列表
  noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
  noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
  ol - 排序列表
  p - 段落
  pre - 格式化文本
  table - 表格
  ul - 非排序列表
• 常见的行内元素：
  a - 锚点
  abbr - 缩写
  acronym - 首字
  b - 粗体（不推荐）
  bdo - bidi override
  big - 大字体
  br - 换行
  cite - 引用
  code - 计算机代码（在引用源码的时候需要）
  dfn - 定义字段
  em - 强调
  font - 字体设定（不推荐）
  i - 斜体
  img - 图片
  input - 输入框
  kbd - 定义键盘文本
  label - 表格标签
  q - 短引用
  s - 中划线（不推荐）
  samp - 定义范例计算机代码
  select - 项目选择
  small - 小字体文本
  span - 常用内联容器，定义文本内区块
  strike - 中划线
  strong - 粗体强调
  sub - 下标
  sup - 上标
  textarea - 多行文本输入框
  tt - 电传文本
  u - 下划线
  var - 定义变量

2.属性：宽高

• 只对块级元素设置生效，对行内元素设置无效。
• 例子：

<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>

<div class="box"></div>

• width为元素的宽度，height为元素的高度。
• 这种方式设置的是元素的宽高，不包括内边距、外边距和边框。

3.属性：边框

1.边框与背景

• CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
• CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

2.边框的样式

• 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
• 定义多种样式
  您可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们看到了这里的值采用了 top-right-bottom-left 的顺序。

• 定义单边样式
  如果希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
  border-top-style
  border-right-style
  border-bottom-style
  border-left-style
  因此这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

• 没有边框
  在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。
  那么如果把 border-style 设置为 none 会出现什么情况：
  p {border-style: none; border-width: 50px;}
  尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？
  这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。
  记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：
  h1 {border-width: 20px;}
  由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
• 各种border-style：

3.边框的宽度

• 您可以通过 border-width 属性为边框指定宽度。
• 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
  注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
  所以，我们可以这样设置边框的宽度：

p {border-style: solid; border-width: 5px;}

或者：

p {border-style: solid; border-width: thick;}

• 定义单边宽度
  您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为（这样写法称为值复制）：

p {border-style: solid; border-width: 15px 5px;}

您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的规则与上面的例子是等价的：

p { 
border-style: solid; 
border-top-width: 15px; 
border-right-width: 5px; 
border-bottom-width: 15px; 
border-left-width: 5px; 
}

4.边框的颜色

• 设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性。
• 它一次可以接受最多 4 个颜色值。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
  p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
• 如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：
  p { border-style: solid; border-color: blue red; }
  注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
• 定义单边颜色
  还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
  border-top-color
  border-right-color
  border-bottom-color
  border-left-color
• 要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：
  h1 { border-style: solid; border-color: black; border-right-color: red; }
• 透明边框
  我们刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
  CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：
  <a href="#">AAA</a><a href="#">BBB</a><a href="#">CCC</a>
  我们为上面的链接定义了如下样式：
  a:link, a:visited { border-style: solid; border-width: 5px;border-color: transparent;}
a:hover {border-color: gray;}
• 从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
• 重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

3.属性：边距

盒模型

1.内边距

• 元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
• CSS padding 属性定义元素边框与元素内容之间的空白区域。
• CSS padding 属性
  CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
  例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
  h1 {padding: 10px;}
• 您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
  h1 {padding: 10px 0.25em 2ex 20%;}
• 单边内边距属性
• 也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
  padding-top
  padding-right
  padding-bottom
  padding-left
• 也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
  h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
• 内边距的百分比数值
  前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
  下面这条规则把段落的内边距设置为父元素 width 的 10%：
  p {padding: 10%;}
  例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div> 

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

2.外边距

• 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
• CSS margin 属性
  设置外边距的最简单的方法就是使用 margin 属性
  margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
  margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：
  h1 {margin : 0.25in;}
  下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
  h1 {margin : 10px 0px 15px 5px;}
• 与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
  margin: top right bottom left
• 另外，还可以为 margin 设置一个百分比数值：
  p {margin : 10%;}
  百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
• margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
• 单边外边距属性
  您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：
  p {margin-left: 20px;}
  您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
  margin-top
  margin-right
  margin-bottom
  margin-left
  一个规则中可以使用多个这种单边属性，例如：
  h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
  当然，对于这种情况，使用 margin 可能更容易一些：
  p {margin: 20px 30px 30px 20px;}
  不论使用单边属性还是使用 margin，得到的结果都一样。一般来说，如果希望为多个边设置外边距，使用 margin 会更容易一些。不过，从文档显示的角度看，实际上使用哪种方法都不重要，所以应该选择对自己来说更容易的一种方法。
• 注意：对于块级元素设置属性：margin：0 auto；可以设置该块级元素格式为居中。
• *{margin: 0;padding: 0}:消除当前浏览器的默认边距样式，浏览器的默认样式为：user agent stylesheet。

4.属性：display

• display CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中，其默认值为 inline。
• 除了多种不同的生成的元素的盒类型，值 none 可以关闭一个元素的显示；当你使用 none 所有的后代元素他们的显示也会被关闭。文档渲染的过程中就好像在文档树中这个元素不存在一样。
• 初始值：inline
• 是否能继承：否
• 块级元素常用的display值：block, list-item, table。
• 行内元素常用的display值：inline, inline-table, inline-block。
• display值查询：display-CSS|MDN

5.属性：font

• CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
• 文字的各种属性都可以继承给后代元素。

1.文字的字体

• font-size 属性设置文本的大小。
• 有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
  请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
  font-size 值可以是绝对或相对值。
• 绝对值：
  将文本设置为指定的大小
  不允许用户在所有浏览器中改变文本大小（不利于可用性）
  绝对大小在确定了输出的物理尺寸时很有用
• 相对大小：
  相对于周围的元素来设置大小
  允许用户在浏览器改变文本大小
• 注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
  使用像素来设置字体大小
  通过像素设置文本大小，可以对文本大小进行完全控制：
  实例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

• chrome的最小字体：默认字体大小16px, 最小字体 12px，可以在chrome的设置-工具-首选项-高级-字体中对最小字体和默认字体进行设置。

2.文字的字体

• 使用 font-family 属性 定义文本的字体系列。
• 使用通用字体系列
  如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
  body {font-family: sans-serif;}
  这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。
• 指定字体系列
  除了使用通用的字体系列，您还可以通过 font-family 属性设置更具体的字体。
  下面的例子为所有 h1 元素设置了微软雅黑字体：
  h1 {font-family: '微软雅黑';}
• 中文字体为了避免乱码，应该尽量应用unicode来表示字体。如：
  宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

• 如何得到中文字体的unicode：利用谷歌浏览器的开发者选项中的console，输入escape('微软雅黑')，如下图所示：

  得到的就是该字体的unicode码将其中的%u换为\即可使用。

• 这样的规则同时会产生另外一个问题，如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。
  我们可以通过结合特定字体名和通用字体系列来解决这个问题：
  h1 {font-family: Georgia, serif;}
• 如果读者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。
  因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。
  如果您对字体非常熟悉，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：
  p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
  根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。
• 使用引号
  您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
  单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

3.文字的风格

• font-style 属性最常用于规定斜体文本。
• 该属性有三个值：
  normal - 文本正常显示
  italic - 文本斜体显示
  oblique - 文本倾斜显示
• 实例

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}

• italic 和 oblique 的区别
• font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
  斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
  通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

4.文字的变形

• 字体变形
  font-variant 属性可以设定小型大写字母。
  小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
• 实例p {font-variant:small-caps;}

5.文字的加粗

• font-weight 属性设置文本的粗细。
• 使用 bold 关键字可以将文本设置为粗体。
• 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
• 如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
  实例
  p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}

6.文字的缩写

• 字体缩写
  网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

• 注意：
  1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
  2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
  一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

6.属性：文本

1.水平对齐

• text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。
• 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
• 西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。
• 提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
  text-align:center 与 <CENTER>
• text-align:center 与 <CENTER> 的区别：
  <CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
• justify
  最后一个水平对齐属性是 justify。
  在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
  需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。如需了解详情，请参阅 CSS text-align 属性参考页。

2.缩进文本

• 把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
• CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
• 通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
• 这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
  p {text-indent: 5em;}
• 注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
• 提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
• 使用负值
  text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。
  p {text-indent: -5em;}
  不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
  p {text-indent: -5em; padding-left: 5em;}
• 使用百分比值
  text-indent 可以使用所有长度单位，包括百分比值。
  百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
  在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;}p {text-indent: 20%;}<div><p>this is a paragragh</p></div>

• 继承
  text-indent 属性可以继承，请考虑如下标记：

div#outer {width: 500px;}div#inner {text-indent: 10%;}p {width: 200px;}<div id="outer"><div id="inner">some text. some text. some text.<p>this is a paragragh.</p></div></div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

3.文本装饰

• 接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
  text-decoration 有 5 个值：
  none
  underline
  overline
  line-through
  blink
• 不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
• none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：
  a {text-decoration: none;}
• 注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：a:link a:visited {text-decoration: underline overline;}不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

4.字符转换

• text-transform 属性处理文本的大小写。这个属性有 4 个值：
  none
  uppercase
  lowercase
  capitalize
• 默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
  作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：
  h1 {text-transform: uppercase}
• 使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

5.字间隔

• word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
• word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {
word-spacing: 30px;
}
p.tight {
word-spacing: -0.5em;
}
<p class="spread">
This is a paragraph. The spaces between words will be increased.</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.</p>

6.字母间隔

• letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
• 与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

7.处理空白符

• white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
• 通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
  <p>This paragraph has many spaces in it.</p>
  可以用以下声明显式地设置这种默认行为：
  p {white-space: normal;}
• 上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
• 值 pre
  不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。
  如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。
  注意：经测试，IE 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例。
• 值 nowrap
  与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。
• 值 pre-wrap 和 pre-line
  CSS2.1 引入了值 pre-wrap 和 pre-line，这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
  如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。
  注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。
• 总结：

8.文本方向

• 如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
• direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
  注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
• direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

9.文本溢出设置

• 设置 overflow 属性：

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

• 可能的值

10.颜色

• 单词:
  red
  blue
  pink
  yellow
  white
  black
• 十六进制:

#000000
#fff
#eee
#ccc
#666
#333
#f00
#0f0
#00f

• rgb:
  rgb(255, 255, 255)
  , rgb(0, 255, 0)
• rgba:
  rgba(0,0,0,0.5)，a为透明度。
• 更多

11.单位

px： 固定单位
百分比(宽高？文字大小？line-height? position?)
em: 相对单位，相对于父元素字体大小
rem: 相对单位，相对于根元素(html)字体大小
vw vh: 相对单位，1vw 为屏幕宽度的1% 兼容性

7.属性：背景

• 属性 描述
  background:简写属性，作用是将背景属性设置在一个声明中
  background-attachment :背景图像是否固定或者随着页面的其余部分滚动
  background-color :设置元素的背景颜色
  background-image: 把图像设置为背景
  background-position :设置背景图像的起始位置
  background-repeat :设置背景图像是否及如何重复
  background-size :设置背景的大小(兼容性)
• background-position：默认左上角
  x y
  x% y%
  [top | center | bottom] [left | center | right]
• background-repeat
  no-repeat：背景图片在规定位置
  repeat-x：图片横向重复
  repeat-y：图片纵向重复
  repeat：全部重复
• background-size
  100px 100px
  contain：调整图片宽度刚好充满框。
  cover：调整图片高度刚好充满框。
• background-color: #F00;
  background-image: url(background.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
  可以缩写为一句：
  background: #f00 url(background.gif) no-repeat fixed 0 0;
• CSS Sprite
  指将不同的图片/图标合并在一张图上。
  使用CSS Sprite 可以减少网络请求，提高网页加载性能。

8.隐藏or透明

opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似，看不见元素的存在，但是占用位置。
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明，0.2位透明度。

9.inline-block

• 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
  又呈现 block 特性 (可设置宽高，内外边距)
  inline-block时，两个元素如果高度不一样，对齐的位置是文字底部的基线，修改方法是使用：vertical-align=top／bottom来设置对齐的位置。
• 缝隙问题
  两个元素之间有空白字符，很多个空白字符和换行被识别为一个空格。
  可以将父元素的字体设置为0 ，然后再将本元素的字体大小变回去。
  或者通过设置空白字符的属性来消去空格。
  10.line-height
• 用于设置单行文本的行
• line-height:2意思是它本身字体高度的两倍。
• line-height：200%是它父容器的两倍。
• 用line-height可以使文本垂直居中。

10.盒模型

-使用css3新样式box-sizing
box-sizing: content-box：w3c标准盒模型
box-sizing: border-box：“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>

• text-overflow
  1、text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），也就是说 overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用，只有这样才能实现溢出文本显示省略号的效果。

2、一定要给容器定义宽度.

3、如果少了overflow: hidden;文字会横向撑到容器的外面

4、如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

5、如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.