***字（单词）间隔
word-spacing 属性可以改变字之间的标准间隔，默认值是normal 与0 一样的含义
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加，反之，则拉近

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

This is a paragraph. The spaces between words will be increased.

This is a paragraph. The spaces between words will be decreased.

letter-spacing 属性是字母间隔，是数字和字母之间的间隔
h2 {letter-spacing: -0.5em}
h5 {letter-spacing: 20px}

This is header 1

This is header 4

***字符转换：
text-transform 属性 处理文本的大小写
属性值：none ---无任何操作
uppercase ---全大写
lowercase --全小写
capitalize ---只对每个单词的首字母大写
h2 {text-transform: uppercase} ---对h2元素的内容全大写

***文本装饰：
text-decoration 属性 ------它的值会替换而不是累积
属性值： none --去掉本来的装饰，恢复默认
underline --对元素加下划线
overline ---在文本的顶端画一个上划线
line-through 在文本中间画个贯穿线
blink ----让文本闪烁

    可以结合多种装饰使用；例如：
     a:link a:visited {text-decoration: underline overline;}   --超链接既有下划线，又有上划线

***处理空白符：
white-space 属性 可以处理字之间和文本行之间的空白符的方式

This paragraph has many
spaces in it.

p {white-space: normal;}

***当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符

属性值：
pre ----浏览器不会合并空白符，也不会忽略换行符
nowrap -----防止元素中的文本换行，除非使用了一个 br 元素
pre-wrap ----浏览器不仅会保留空白符并保留换行符，还允许自动换行
pre-line ----浏览器会保留换行符，并允许自动换行，但是会合并空白符（和pre-wrap的区别）

***文本方向：
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充元素框的方向、以及两端对齐元素中最后一行的位置
对于行内元素，只有当unicode-bidi 属性设置为embed或bidi-override 时才会应用direction 属性
属性值：ltr和rtl ；；；默认值是ltr，显示从左到右文本。rtl是从右往左显示

css文本属性：

    color               设置文本颜色
        direction           设置文本方向。
        line-height         设置行高。
        letter-spacing      设置字符间距。
        text-align          对齐元素中的文本。
        text-decoration     向文本添加修饰。
        text-indent         缩进元素中文本的首行。
        text-shadow         设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
        text-transform      控制元素中的字母。
        unicode-bidi        设置文本方向。
        white-space         设置元素中空白的处理方式。
        word-spacing        设置字间距。

css字体
定义了文本中字体的大小、粗细、风格等
font-family 属性定义文本的字体

   body {font-family: sans-serif;}

font-style 属性 ---设置斜体文本
属性值：normal ---文本正常显示
italic --文本斜体显示
oblique --文本倾斜显示

字体变形：
font-variant 属性 设定小型大写字母 ---不同大小的大写字母

                             p {font-variant:small-caps;}

字体加粗：
font-weight 属性设置文本的粗细
属性值：bold 粗体

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字体大小：
font-size 设置文本的大小

***如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)

css字体属性：
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

css链接：
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

text-decoration 属性大多用于去掉链接中的下划线

background-color 属性规定链接的背景色

css列表：

css列表属性允许放置、改变列表项的标志，或者将图像作为列表项标志

列表类型：影响列表的样式，最简单的方法是改变其标志类型

修改列表项的标志类型：list-style-type属性
   ul {list-style-type : square}

列表项图像：
对各标志使用图像：list-style-image属性

ul li {list-style-image : url(xxx.gif)}

列表标志位置：list-style-position属性

简化列表样式：

list-style属性
li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值

css的列表属性（list）：
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

css表格
改善表格的外观

表格边框：
border属性
table, th, td
{
border: 1px solid blue;
}
如果需要把表格显示为单线条边框，请使用 border-collapse 属性

折叠边框：
border-collapse 属性将表格边框折叠为单一边框
table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
}
***如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误

表格的宽度和高度：

width和height ---宽度和高度

table
{
width:100%;
}

th
{
height:50px;
}

表格的文本对齐：
text-align 和 vertical-align 属性设置表格中文本的对齐方式

text-align 是水平对齐
vertical-align 是垂直对齐

表格的内边距：
控制表格中内容和边框的距离，为td和th设置padding属性：

td
{
padding:15px;
}

表格的颜色：

table, td, th
{
border:1px solid green;
}

th
{
background-color:green; --背景颜色
color:white;
}

css Table属性：

border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

css轮廓:
轮廓outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。css outline 属性规定元素轮廓
的样式、颜色、宽度

css 边框属性：
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。

css框模型
css框模型规定了元素框 处理元素的内容、内边距、边框和外边距的方式

border     边框

margin 外边距
padding 内边距
element 元素

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景

内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，不会遮挡其后的任何元素。

背景是由内容和内边距以及边框组成的区域；内边距、边框和外边距是可选的，默认是零。可以通过设置内外边距为零来覆盖浏览器样式

* {
    margin: 0;
    padding: 0;
    }       

在css中，width和height是指元素内容的宽度和高度，增加内外边距和边框不会影响内容的尺寸，但是会增加元素框的总尺寸

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边

外边距可以是负值，而且在很多情况下都要使用负值的外边距

边框内的空白是内边距，边框外的空白是外边距

1.css 内边距

内边距是边框内的空白部分，即元素内容到边框之间的空白部分，使用padding属性，可以接受长度值和百分比值，但是不能是负值

h2 {padding: 10px;} ---为h2所有边设置10px的内边距

也可以按照上、右、下、左的顺序分别设置内边距

  h2 {padding: 10px 0.25em 2ex 20%;}   ----简写规则

单边内边距的属性：
padding-top
padding-right
padding-bottom
padding-left
padding 作用是在一个声明中设置元素的所内边距属性

h2 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

内边距可以设置百分比值，并且这个百分比值是根据其父元素的width计算的。同时改变

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

css边框
元素的边框是围绕元素内容和内边距的一条或多条线
可以设置元素边框的样式、宽度和颜色

border-style属性定义了10个不同的非inherit 样式；包括none

定义一个图片：
a:link img {border-style: outset;}

为一个边框定义多种样式：
p.aside {border-style: solid dotted dashed double;}

定义单边样式：

p {border-style: solid solid solid none;} 《=====》 p {border-style: solid; border-left-style: none;}

边框的宽度：
border-width 属性指定
指定宽度有两种方法：
1.指定长度值；2.使用关键字，thin、medium（默认）和thick

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

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

定义单边宽度：
按照上右下左的顺序设置元素各边边框：
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

边框宽度设置值：
none ---无边框
solid
outset
***当属性值border-style设置为none时，即没有边框，所以之前不管你定义的是什么，都会消失。包括任何样式
由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式

边框的颜色：
border-color属性设置
它一次可以最多接收4个颜色值，如果小于四个，则值赋值会起作用

边框颜色默认是元素本身的前景色，如果没有为边框声明颜色，将与元素的文本颜色相同。如果元素没有任何文本，
则它的边框颜色是其父元素的文本颜色，这个父元素可能是body、div等

定义单边颜色：--和定义宽度属性一样
border-top-color
border-right-color
border-bottom-color
border-left-color

透明边框：
border-color：transparent ---创建不可见边框

css外边距
围绕着元素边框的空白区域是外边距
设置外边距使用margin属性，该属性可以接受任何长度单位，百分数值甚至负值

margin 可以设置auto，更常见的是为外边距设置长度值

h2 {margin : 0.25in;}

内边距属性值设置百分比值也是相对应父元素的width计算的。

使用值赋值的规则：

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

单边外边距属性：
margin-top
margin-right
margin-bottom
margin-left
margin 在一个声明中设置所有外边距属性

css 外边距合并
外边距合并指当两个垂直外边距相遇时，他们将形成一个外边距。合并之后的外边距的高度等于两个发生合并的外边距的高度较大者

css定位：

css定位属性允许你对元素进行定位

使用display 属性改变生成框的类型。display=block 可以让行内元素表现的像块级元素一样。
display=none 让生成的元素根本没有框

当把一些文本添加到一个块级元素的开头，即使没有把文本定义为段落，也会当作段落来对待

ss 定位机制：普通流、浮动、绝对定位

所有框都在普通流中定位。

css position 属性：
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 ---相对定位

absolute 元素框从文档流完全删除，并相对于其包含块定位；包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，
就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框 --绝对定位

fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身 ---固定定位

css定位属性：

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

css 相对定位：

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

*****在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

css 绝对定位：
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

css绝对定位使元素与文档流无关，因此不占据空间

***相对定位是相对于元素在文档中的初始位置，而绝对定位是相对于最近的已定位祖先元素，如果不存在祖先元素，那么相对于最初的包含块

css 浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

float 属性

行框和清理

要想阻止行框围绕浮动框，需要对该框应用 clear 属性
属性值：left、right、both和none
表示框的哪些边不应该挨着浮动框