一、块级元素
- 特点:块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如form只能包含块级元素。其他的块级元素则可以包含 行级元素如p.也有一些则既可以包含块级,也可以包含行级元素。如div、 li
- 常用块级元素:
- p-段落
- ol -排序列表
- ul - 无序列表
- li
- h1~h6 - 标题
- hr-水平线
- form - 交互表单
- address - 地址
- div-块
- table
- tr
- td
- pre
二、行级元素
- 特点:
- 可以和其他元素处于一行,不用必须另起一行。
- 元素的高度、宽度及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字、图片的宽度,不可改变
- 常用行级元素:
- a
- br
- code
- img
- input
- lable
- span
- textarea
三、可变元素
- 特点:可变元素为根据上下文语境决定该元素为块元素或者内联元素。
- 常见可变元素:
- button - 按钮
- map-图片区块
- iframe
四、转换
- 块→行:diaplay:inline
- 行→块:display:block
- 注意:
- display:inline-block将对象呈现为inline对象,但是对象的内容作为block对象呈现
- 之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。