元素的种类
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(线穿过/中划线)