CSS元素显示模式

九、CSS的元素显示模式

9.1什么是元素的显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局页面

元素显示模式就是元素以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>

HTML元素一般分为块元素和行内元素

9.2块元素

特点：

1.比较霸道，自己独占一行

2.高度、宽度、外边距以及内边距都可以设置

3.宽度默认是容器（父级宽度）的100%

4.是一个容器盒子，里面可以放行内或者块级元素

注意：

• 文字类的元素不能使用块级元素
• <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，尤其是不能放 <div>
• 同理，<h1>~<h6> 等都是文字类块级标签，里面也不能放其他块级元素

9.3行内元素（内联元素）

特点：

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

2.高、宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

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

注意：

• 链接里面不能再放链接
• 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

9.4行内块元素

在行内元素中有几个特殊的标签  <img/>  <input/>  <td>  他们同时具有块元素和行内元素的特点

特点：

1.和相邻行内元素在一行上，他们之间会有空白间隙，一行可以显示多个

2.默认宽度就是它本身内容的宽度

3.高度、行高、外边距以及内边距都可以控制

9.5元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不能直接设置	它本身内容的宽度	容纳文本或者其他行内元素
行内款元素	一行可以放多个行内块元素	可以设置宽度高度	它本身内容的宽度

9.6元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单来说：一个模式的元素需要另一种模式的特性

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block:

9.7单行文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度