CSS元素显示模式

元素显示模式分类

块元素

常见的块元素有h1~h6,p,div,ul,ol,li等.div是最典型的块元素
块元素的特点:
1.独占一行
2.可以控制高度,宽度,内外边距
3.宽度默认是父类容器的100%
4.是一个容器,其内可以存放行内或块元素

文字类元素如p,h1~h6内不能使用块级元素

行内元素

span是最典型的行内元素
行内元素特点:
1.一行可以显示多个行内元素
2.直接设置高和宽是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素

链接里不能再放链接

行内块元素

行内元素中有几个特殊的标签-----<img / >, <input / >, <td>它们兼具块元素和行内元素的特点
1.一行可存放多个,之间会有空白
2.默认宽度是其内容的宽度
3.高,宽,内外间距都可以自己设置

元素显示模式转换

将行内元素<a>转换为块元素:
在style标签内加入a {display: block;}

将块元素<div>转换为行内元素:
在style标签内加入div {display: inline;}

将<span>元素转换为行内块元素:
在style标签内加入span {display: inline-block;}