CSS元素显示模式
本文内容:
CSS元素显示模式:
1. 什么是元素显示模式
2. 块元素
3. 行内元素
4. 行内块元素
5. 元素显示模式总结
6. 元素显示模式转换
7. 小技巧—单行文字垂直居中
1、什么是元素显示模式
元素显示模式就是元素(标签)以什么方式显示,比如<div>
独占一行,一行中可以放多个<span>
网页的标签非常多,不同的地方会用到不同的标签,了解他们的特点可以更方便地进行页面布局。
HTML元素一般分为块元素
和行内元素
2、块元素
常见的块元素有 <h1>~<h6>
<div>
<ul>
<ol>
<li>
,其中 <div>
是最典型的块元素。
块元素的特点:
- 霸道,独占一行。
- 高度、宽度、内边距及外边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内或块元素。
注意:
-
文字类的元素内不要放块元素,例如,
<p>
元素主要用于存放文字,所以里面不能放块级元素,特别是<div>
同理,
<h1>~<h6>
里面也不能放其他块级元素。
3、行内元素
常见的行内元素有<a>
<strong>
<b>
<em>
<i>
<del>
<s>
<ins>
<u>
<span>
等,其中最典型的就是<span>
,有有的地方也称为内联元素。
行内元素的特点:
- 相邻行内元素在一行上,并且可以显示多个。
- 高度、宽度设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或行内元素。
注意:
- 链接里面不能再放链接。
- 特殊情况下
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式更安全。
4、行内块元素
在行内元素中有几个特殊的标签,<image />
<input />
<td>
,它们同时具有行内元素和块元素的特点
- 和相邻行内元素(行内块)在同一行上,但是它们之间会有空白间隙,一行可以显示多个(行内元素特点)
- 默认宽度就是他们本身内容的宽度(行内元素特点)
- 宽度、行高、内边距和外边距都可以设置(块元素特点)
5、元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 |
---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% |
行内元素 | 一行可以放多个行内元素 | 不可以设置宽度高度 | 其本身内容的宽度 |
行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 其本身内容的宽度 |
6、元素显示模式转换
特殊情况下,需要元素模式的转换,简单理解为:一个模式需要另一个模式的特性。
例如:想要增加链接<a>
的触发范围
- 转换为块元素:
display: block
( 使用较多 )
<style>
a {
width: 150px;
height: 50px;
background-color: blue;
display: block; /*将a标签转换为块级元素,可设置高度宽度*/
}
</style>
-
转换为行内元素:
display: inline
<style> div { display: inline; /*将div转换为行内元素*/ } </style>
-
行内元素转换为行内块元素:
display: inline-block
<style> span { width: 150px; height: 50px; background-color: blue; display: inline-block; /*将span标签转换为行内块元素,可设置高度宽度*/ } </style>
7、小技巧 — 单行文字垂直居中
CSS没有提供单行文字垂直居中的代码
巧妙的解决方案: 让文字的行高等于盒子的高度 ,就可以实现文字在当前盒子内垂直居中。