ccs元素分类 gcelaor

ccs元素的分类与特点

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置行内元素：在html中，<span>,<a>,<label>,<input>,<img>,<strong>,<em>就是典型的行内元素
     display:inline

—. 块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

1.块级元素（即使内容不满一行时，也会强制独占一行；不会和其他元素公用一行），以下这些都是在网页中经常看到和用到的块级元素：​

div -最常用的块级元素

dl - 和dt dd搭配使用的块级元素

form - 交互表单

h1 - 大标题

hr - 水平分隔线

ol - 排序表单

p - 段落

ul - 非排序列表​

2.行内元素​（在内容不满一行时，会和邻近的其他行内元素公用一行）：​​  

a - 锚点

b - 粗体(不推荐)

br - 换行

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

label - 表格标签

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线​​​

*之所以能不同地显示，是由默认的display属性造成的，通过修改标签的dispaly属性可以将块级元素变成行内元素，将行内元素变成块级元素，所以元素的显示方式是可以修改的，不是固定的。​

区别：块级元素各据一行，行内元素水平排列；​块级元素可以包含行内元素和块级元素，但行内元素不能包含块级元素。     

二 替换元素和非替换元素（根据元素内容是否直接显示在页面上进行分类）

从元素本身的特点来讲，可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；