HTML块级元素、行内元素

唐大饼pyr<1nm

已于 2023-12-16 09:52:57 修改

阅读量1k

点赞数 13

文章标签： html 前端

于 2023-12-11 09:21:41 首次发布

本文链接：https://blog.youkuaiyun.com/f126735786585288/article/details/134918832

版权

本文介绍了HTML中的行内元素（如span、a等）和块级元素（如div、p等）的特点，包括布局、高度/宽度控制以及元素组合。通过实例展示了两者如何影响页面结构和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、行内元素

1、行内元素特点

(1).和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；

运行结果：

(2).高度、宽度是不可控的，设置无效，由内容决定。

运行结果：

(3).行内元素最好只包含行内元素，不包含块级元素

运行结果：

总结：

1、和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；

2、高度、宽度是不可控的，设置无效，由内容决定。

3、行内元素最好只包含行内元素，不包含块级元素

2、常见行内元素

a、b、strong、i、em、input、textarea、select、br等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>*{
            border: 1px black solid;
        }
    </style>
</head>
<body>
<span>uuuuuuuuuu</span>
<a>uuuuuuuuuu</a>
<b>uuuuuuuuuu</b>
<strong>uuuuuuuuuu</strong>
<i>uuuuuuuuuu</i>
<em>uuuuuuuuuu</em>
<input type="text">
<textarea></textarea>
<select></select>
</body>
</html>

效果：

可见它们都处在同一行

二、块级元素

1、块级元素特点

(1).总是从新的一行开始，即各个块级元素独占一行,默认垂直向下排列。

效果图如下：

(2).如图所示：块级元素的高度、宽度都是可控的；

内边距和外边距也是可控的。效果图如下：

(3).块级元素中可以包含块级元素和行内元素

总结：

1、总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；

2、高度、宽度、margin及padding都是可控的，设置有效，有边距效果；

3、宽度没有设置时，默认为100%；

4、块级元素中可以包含块级元素和行内元素。

2、常见块级元素

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，header、section、aside、footer等


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div~*{
            width: 1000px;
            height: 80px;
        }
    </style>
</head>
<body>

<div style="border: 1px red solid; background-color: #acacac"></div>

<p style="border: 1px red solid; background-color: #acacac"></p>

<h1 style="border: 1px red solid; background-color: #acacac"></h1>

<ul style="border: 1px red solid; background-color: #acacac">
    <li style="border: 1px red solid; background-color: #acacac"></li>
</ul>

<ol style="border: 1px red solid; background-color: #acacac">
    <li style="border: 1px red solid; background-color: #acacac"></li>
</ol>

<dl style="border: 1px red solid">
    <dd style="border: 1px red solid; background-color: #acacac"></dd>
</dl>

<table style="border: 1px red solid; background-color: #acacac"></table>

<blockquote style="border: 1px red solid; background-color: #acacac"></blockquote>

<address style="border: 1px red solid; background-color: #acacac"></address>

<menu style="border: 1px red solid; background-color: #acacac"></menu>

<pre style="border: 1px red solid; background-color: #acacac"></pre>

<header style="border: 1px red solid; background-color: #acacac"></header>

<section style="border: 1px red solid; background-color: #acacac"></section>

<aside style="border: 1px red solid; background-color: #acacac"></aside>

<footer style="border: 1px red solid; background-color: #acacac"></footer>
</body>
</html>

效果：