CSS笔记-2：元素的显示模式

元素的显示模式即为一个标签以什么方式进行显示，一般分为块元素和行内元素

块元素

常见的块元素包括

<h> <p> <div> <ul> <ol> <li>等

块元素的特点：
1.块元素中的内容独占一行
2.块元素中的高度、宽度以及页边距都可以设定
3.块元素的默认宽度是上一级元素的100%
4.块元素内部还可以放其他的块元素或行内元素
5.文字类元素内部不能放块元素，如p标签和h标签

行内元素

常见的行内元素包括

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

行内元素的特点：
1.相邻行内元素的内容都会显示在一行上
2.直接设置高、宽是无效的
3.默认宽度就是内容本身的宽度
4.行内元素只能容纳文本或其它行内元素，不能添加块元素
5.a标签内部可以放块元素，但是a里面不能再嵌套a标签，且a如果要放置块元素需要提前转化

行内块元素

行内块元素同时具有行内元素和块元素的特点，一般常见的包括

<img> <input> <td>

其特点是：
行内元素型：
1.和相邻行内块元素在同一行上
2.默认宽度是其本身内容的宽度
块元素特点：
高度、行高、外边距、内边距都可以被控制

元素显示模式的转化

将一类元素的显示模式转化为另一类

/*将行内元素转化为块级元素（以<a>标签为例）*/
<style>
	a{
		width:50px;
		height:50px;
		background-color:red;
		display:block;
</style>

其中的display:block可以将行内元素转化为块元素，使得链接可以在这个边长为50px的红色正方形内均生效。

/*将块元素转化为行内元素（以<div>为例）*/
<style>
	div{
		display:inline;
		}
</style>

同理，转化为行内块元素的代码为display:inline-block