元素的种类，文本标签和样式

元素的种类

1.区块元素

• 每个元素单独占据一行
• 不设置宽高时，宽是父元素的宽，高是0，有内容时高由内容撑开
• 不解析换行符
• 支持所有样式
• 常见的区块元素：div（盒子）、ul（无序列表）、ol（有序列表）、dl（定义列表）、li（列表的项）、p（段落）、h1~h6（网页中的标题，从大到小）、table（表格）、form（表单）、pre（源代码）、hr（分割线）

2.内联元素

在

• 一行有空间时可以和非区块元素在同一行显示
• 宽高完全由内容撑开
• 解析换行符
  不支持宽高样式，使用部分样式会出现问题（上下margin和padding）
• 常见的内联元素：span（行间元素）、a（超链接）、b（加粗）、strong（加重）、i（斜体）、em（着重）、sub（下标）、sup（上标）、ins（插入）、del（删除）、img（图片）、label（表单标记）、br（换行）

3.内联块元素

• 在一行有空间时可以和非区块元素在一行显示
• 宽高由内容撑开
• 解析换行符
• 支持所有样式
• 虽然img是内联元素，但是表现的是内联块元素的效果，即可以设置宽高等样式
• 常见的内联块元素：input（表单项），button

二、文本标签和样式

文本标签

段落标签<p></p>
标题标签<h1>~<h6>
粗体/加重标签<b></b>/<strong></strong>
斜体/着重标签 <i></i>/<em></em>
上标/下标标签<sup></sup>/<sub></sub>
插入/删除标签<ins></ins>/<del></del>

文字常用样式

• 颜色 color:red；
• 字体大小 font-size:16px;
• 行高 line-height:16px;
• 文本对齐方式 text-align：left/right/center
• 文字字体：font-family:“微软雅黑”
  最常用的是“微软雅黑”；Heiti SC,Heiti SC Light,“Open Sans”, Arial, “Hiragino
  Sans GB” //其他字体（在第一个字体在本机没有时，使用后续的字体）
• 文字加粗 font-weight:200/bold；
• 文字斜体 font-style：italic; normal默认值不斜体
• 文本缩进 text-indent：2em;（em是使用当前元素的字体大小的倍数计算的单位，如2em就是2倍元素字体大小）
• 字间距 letter-spacing:0.5rem/2px;
• 文本装饰 text-decoration:underline（下划线）,
  overline（上划线）, line-through（线穿过/中划线）