CSS元素类型详解

根据CSS显示分类，XHTML元素分为

　　三种类型：

　　　　　　块状元素、内联元素、可变元素

块状元素：

• 块状元素在网页中就是以块的形式显示，而块状就是元素显示为矩形区域
• 默认情况下，块状元素都会占据一行，会按顺序自上而下排列
• 块状元素都可以定义自己的宽度和高度
• 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素，我们可以把这种容器比喻为一盒子

常见的块状元素：

 

div	最常用的块级元素
dl - 和dt-dd	搭配使用的块级元素
form	交互表单
h1-h6	标题元素
hr	水平分隔线
ol	有序列表
ul	无序列表
p	段落
table-tr-td	表格-行-单元格

 

内联元素：

• 内联元素没有自己的形状，它的最小内容单元也会呈现矩形
• 内联元素的表现形式是在一行内逐个显示
• 内联元素不可以直接添加宽和高，它的大小是由内容撑开的
• 内联元素也符合盒模型规则，但是个别属性会出现问题（padding-top/bottom   magin-top/bottom）
• 内联元素在一行内排列时，之间会有间距（消除间距：a：添加浮动；b：把所有的内联元素都放在一行，不用回车键【不推荐使用】）

常见的内联元素：

a	超链接（锚点）
b	粗体
br	换行
i	斜体
img	图片
lable	表单标签
span	常用内联容器，定义文本内区块
strong	粗体强调
sub	下标
sup	上标
textarea	多行文本输入框
u	下划线
select	项目选择
input	输入框（内联块元素）

 

可变元素：

• 根据上下文的显示，来确定这个元素是块状元素还是内联元素

常见的块状元素：

　　　　按钮：<button></button>