有勇气的牛排博客

☰

前端html 块级元素与行内元素

有勇气的牛排 368 前端 2024-10-21 22:45:38

块级元素与行内元素

1 块级元素

1.1 特点

独占一行：每个块级元素会占据一整行，其他内容会自动换到下一行。
宽度默认占满父容器：块级元素的宽度默认是其父容器的100%，即便没有设置 windth ，它也会扩展到父容器的便捷。
可以包含行内元素和其他块级元素：块级元素可以包含其他块级元素，也可以包含行内元素。
常用于布局：因为块级元素能独占一行且能包含其他元素，所以经常被用来创建页面结构和布局。

1.2 常见的块级元素

<div> ：用于布局的通用容器元素。
<h1>~<h6>：标题标签。
<p>：段落标签。
<ul>、<ol>：无序列表和有序列表。
<li>：列表项。
<section>、<article>：html5的结构化元素。
<form>：表单容器。

有勇气的牛排创作
https://www.couragesteak.com/article/488

2 行内元素

2.1 特点

不会独占一行：行内元素不会占据一整行，它们只占据其内容所需的空间，其他元素可以和它们显示在同一行上。
宽度由内容决定：行内元素的宽度取决于其内容的宽度。
不能包含块级元素：行内元素只能包含其他行内元素或文本内容，不能包含块级元素。
适合用于包裹短文本或小区域：行内元素常用于格式化部分文本或小区域内容，而不是用于布局。

2.2 常见的块行内元素

<span>：行内容器标签，常用于包裹文本或行内样式。
<a>：超链接。
<img>：图片。
<b>、<i>：加粗与斜体。
<input>：表单输入字典。

3 行内元素与块级元素转换

行内转块级

a {
    display: block;
}

块级转行内

div {
	display: inline;
}

留言

专栏

文章