页面布局相关元素的分类与转换

元素的分类与转换

元素分类大致三类：（与布局相关），大致不是全部

块类（display:block）

<div></div>,<p></p>,h1~h6,<ul></ul>, <li></li> ,ol li ,dl dd dt ...

特点：

1. 宽度是默认100% 高度由内容撑开 可以设置宽高
2. 独立成行 一行一个垂直放置 （霸道）
3. 行高撑开盒子高度

行内类display:inline

a

span,em,i,strong,b,ins,u,... a

特点：
1.宽度高度取决于内容的大小 设置宽高不起作
2. 并排放置 放不下会换行
3. 中间有默认间距 （一个空格）原因？ 行内元素具有文本特性
4. 设置行高撑不开盒子高度

行内块类display:inline-block

img
特点：

1. 可以设置宽高
2. 并排
3. 中间有间距（行内块元素具有文本特性 图片居中可以用text-align:center）
4. 不可以设置行高

元素转换

display:block 块
display:inline;行内类
display:inline-block;行内块类