CSS06 - 标签的显示模式与转换

css 的元素大体可以分为三类：行内元素、块元素、行内块元素

显示模式

行内元素

1）相邻行内元素在一行上，一行可以显示多个元素；

2）宽高的直接设置是无效的；

3）默认宽度是它本身内容的宽度；

4）行内元素只能容纳文本或其他行内元素。

注意

1）链接里面不能再放链接；

2）<a>里面可以放块级元素，但是要把<a>转换成块或行内块，这样会更安全。

常见的行内元素有

<span></span>、<b></b>、<strong></strong>、<i></i>、<em></em><s></s>、<del></del>、<u></u>、<ins></ins>、<small></small>

块元素

1）独占一行；

2）宽高和内外边距都可以控制；

3）默认宽度是父元素的 100%；

4）多个块元素在一起默认排列方式为从上至下；

5）是一个容器级盒子，里面可以放行内元素或块级元素。

注意：

1）文字类的元素内不能使用块级元素；

2）<p>标签主要用于存放文字，因此<p>里面不能放块元素，特别是不能放<div>；

3）<h1> ~ <h6>全都是文字类块级标签，里面也不能放其他块级元素。

常见的块元素有

<h1></h1> ~ <h6></h6>、<p></p>、<hr>、<div></div>、<ul>、<ol>、<li>

行内块元素

1）和相邻行内元素、行内块元素在一行上，但是它们之间会有空白缝隙，一行可以显示多个行内块元素；

2）默认宽度就是它们本身内容的宽度；

3）高度、行高、内外边距都可以控制。

常见的行内块元素有

<img>、<input>、<td>

模式转换

隐藏元素

display ：none 将指定元素隐藏，常用于伪类：hover 中。

div {		display: none;}

行内元素转换成块元素

在 css 中添加 display：block 代码即可，如：

span {    display: block;}

块元素转换成行内元素

在 css 中添加 display：inline 代码即可，如：

div {	background-color: red;	display: inline;  width: 500px;  height: 400px;}

div 是典型的块元素，默认占一行，可以设置宽高，但是行内元素无法设置宽高，

效果如下图

块元素转为行内元素

块、行内元素转换为行内块

在 css 中添加 display：inline - block 代码即可，如：

div {		display: inline-block;    /*宽高皆可设置*/		width: 120px;		height: 50px;	}

将 div 转换为行内块元素后，有利于布局操作，所以行内块是布局中最长用到的。

效果如下图：

块元素转换为行内块元素

以上，便是 css 中最常用到的标签之间的转换。