在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

块元素在页面中以区域块的形式出现，每个块元素都会独自占据一整行或多整行，其中<div>标记为最典型的块元素。内联元素特点是不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常回合他前后的其他行内元素显示在同一行中，他们不占有独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置高度宽度等属性，常用语控制页面中文本的样式，<span>标记是最典型的行内元素。内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>

设置居左：

h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>

设置居右：

h1{
    text-align:right;
}
<h1>了不起的盖茨比</h1>

<h1>hello world</h1>

letter-spacing属性用来设置文字间距或者字母间隔；

word-spacing属性用来设置英文单词之间的间距；

1. src：标记图标位置

2. alt：指定图像的描述性文本，当头像不可见，可看到该属性指定的文本

3. title：鼠标滑过图片显示的文字
   

水平居中设置-定宽块状元素

margin:20px auto;

或者

margin-left:auto;

margin-right:auto;

15-1 水平居中设置-行内元素

text-align:center

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}

注意：2em的意思就是文字的2倍大小。

<form></form> -- 创建表单

表单可以把浏览者输入的数据传回服务器，服务器就可以处理表单传过来的数据

语法：

<form   method="传送方式"   action="服务器文件">

method 数据传输方式 get/post

技术点的解释：

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline为定义文本下的一条线。

4、text-decoration的值为overline为定义文本上的一条线。

5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

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

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

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

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

技术点的解释：

1、color属性可以设置字体颜色。

2、color的值有3种设置方式：

• 英文命令颜色

p{color:red;}

• RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

• 十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

4-1章节，使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。语法如下：