学习笔记16:CSS的元素显示模式（块元素、行内元素、行内块元素、元素显示模式的转换）

1、块元素

常见的块元素有：<h1> ~ <h6> <p> <div> <ul> <ol> <li>等，其中<div>是经典的块元素

块元素的特点：

1、自己独占一行
2、宽度，高度，外边距，内边距都可以设置
3、宽度默认跟随父一级宽度的100%
4、是一个容器及盒子，里面可以放行内元素或者块元素

文字类元素内不能再放盒子！！！

2、行内元素

常见的行内元素：<a> <strong> <em> <i> <span>等，其中<span>是经典的行内元素

行内元素的特点：

1、一行上可以显示多个行内元素
2、不可以直接对其设置高度、宽度
3、默认的宽度就是其本身内容的宽度
4、行内元素只能容纳文本或其他的行内元素

特殊情况下链接<a>里面可以放块级元素，但是尽量给<a>转换一下模式，以确保正常显示

3、行内块元素

在行内元素中有几个特殊的标签<img><input><td>，他们同时具有行内元素和块元素的特点，有些资料称他们为行内块元素

行内块元素的特点：

1、和相邻行内元素在一行上，但是他们之间会有空白间隙，一行可以显示多个
2、默认宽度、高度就是它本身内容的宽度、高度
3、宽度，高度，外边距，内边距都可以设置

4、元素显示模式的转换

特殊情况下，我们需要元素显示模式的转换，比如我们想要增加链接<a>的触发范围

（1）转换为块元素

display: block;

a {
	weight: 200px;
	height: 200px;
	background-color: blue;
	display: block;
}

（2）转换为行内元素

display: inline;

div {
	dispaly: inline;
}

（3）转换为行内块元素

display: inline-block;

span {
	weight: 200px;
	height: 200px;
	background-color: blue;
	display: inline-block;
}