第五讲_css元素显示模式

文大奇Quiin

已于 2024-01-15 18:30:51 修改

阅读量661

点赞数 6

分类专栏： CSS样式文章标签： css 前端 css3

于 2024-01-08 12:17:22 首次发布

本文链接：https://blog.csdn.net/wenqi1992/article/details/135452951

版权

CSS样式专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css元素显示模式

1. 元素的显示模式
2. 元素根据显示模式分类
3. 修改元素的显示模式

1. 元素的显示模式

1.1 块元素

块元素的特性：

在页面中独占一行，从上到下排列。
默认宽度，撑满父元素。
默认高度，由内容撑开。
可以通过 css 设置宽高。

<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 设置宽高。

<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 设置宽高。

<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. 修改元素的显示模式

/* block：设置为块元素 */
/* inline：设置为行内元素 */
/* inline-block：设置为行内块元素 */
/* none：隐藏元素 */
选择器 {
  display: block;
}

文大奇Quiin

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
第五讲_css元素显示模式

css元素显示模式
复制链接

扫一扫

专栏目录