CSS笔记：显示模块的转换

常用元素显示模式：

　　块级元素：p，h1~h6，ul，li，ol，div等。

　　行内元素：a，strong，b，i，em，span等。

　　行内块元素：image，input，td等。

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度和高度	容器的100%	容器可以包含任何标签，文本标签不能嵌套块级元素，例如：p标签里面不能放div
行内元素	一行可以放多个行内元素	不可以直接设置宽度和高度	它本身内容的宽度	容纳文本或者其他行内元素，不能直接放块级元素
行内块元素	一行可以放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

 

1、display：block（将元素转换为块级元素）

　　常用span转换成块级元素，因为行内元素不能设置宽和高，所以通过模式转换。

 

2、display：inline（将元素转换为行内元素）

　　块级元素转换为行内元素比如div转换成行内元素，div本身默认单独占一行，2个div就有二行，通过div可以换成行内元素2个div在一行中展示。

 

3、display：inline-block（将元素转换为行内块元素）

　　指可以设置宽度和高度也可以在一行中显示。