css元素显示模式
- [1. 元素的显示模式](#1. 元素的显示模式)
-
- [1.1 块元素](#1.1 块元素)
- [1.2 行内元素](#1.2 行内元素)
- [1.3 行内块元素](#1.3 行内块元素)
- [2. 元素根据显示模式分类](#2. 元素根据显示模式分类)
- [3. 修改元素的显示模式](#3. 修改元素的显示模式)
1. 元素的显示模式
1.1 块元素
块元素的特性:
- 在页面中独占一行,从上到下排列。
- 默认宽度,撑满父元素。
- 默认高度,由内容撑开。
- 可以通过 css 设置宽高。
html
<style>
.first {
width: 100px;
height: 100px;
background-color: blue;
}
.second {
height: 100px;
background-color: green;
}
.third {
background-color: red;
}
</style>
<div class="first">第一个块元素</div>
<div class="second">第二个块元素</div>
<div class="third">第三个块元素</div>
1.2 行内元素
行内元素的特性:
- 在页面中不独占一行,从左到右排列。
- 默认宽度,由内容撑开。
- 默认高度,由内容撑开。
- 无法通过 css 设置宽高。
html
<style>
.first {
background-color: blue;
}
.second {
background-color: green;
}
.third {
background-color: red;
}
</style>
<span class="first">第一个行内元素</span>
<span class="second">第二个行内元素</span>
<span class="third">第三个行内元素</span>
1.3 行内块元素
行内块元素的特性:
- 在页面中不独占一行,从左到右排列。
- 默认宽度,由内容撑开。
- 默认高度,由内容撑开。
- 可以通过 css 设置宽高。
html
<style>
.first {
background-color: blue;
}
.second {
height: 100px;
width: 100px;
background-color: green;
}
.third {
background-color: red;
}
</style>
<input class="first" placeholder="第一个行内块元素"/>
<input class="second" placeholder="第二个行内块元素"/>
<input class="third" placeholder="第三个行内块元素"/>
2. 元素根据显示模式分类
- 块元素
<html>
、<body>
、<h1>-<h6>
、<hr>
、<p>
、<pre>
、<div>
<ul>
、<ol>
、<li>
、<dl>
、<dt>
、<dd>
<table>
、<tbody>
、<thead>
、<tfoot>
、<tr>
、<caption>
<form>
、<option>
- 行内元素
<br>
、<em>
、<strong>
、<sup>
、<sub>
、<del>
、<ins>
、<a>
、<label>
- 行内块元素
<img>
、<td>
、<th>
、<input>
、<textarea>
、<select>
、<button>
、<iframe>
3. 修改元素的显示模式
css
/* block:设置为块元素 */
/* inline:设置为行内元素 */
/* inline-block:设置为行内块元素 */
/* none:隐藏元素 */
选择器 {
display: block;
}