目录
块级元素和内联元素的区别
1. 盒模型：
块级元素会在页面上生成一个独立的矩形区域，它会独占一行或多行，宽度默认为父元素的100%。
而内联元素则不会独占一行，它通常只占据它所包含内容的宽度和高度。
2. 布局：
块级元素可以设置宽度、高度、外边距和内边距等属性，它们可以通过设置这些属性来进行布局和定位。
内联元素只能设置水平方向的外边距、内边距和部分定位相关的属性，不能设置宽度和高度。
3. 默认显示方式：
块级元素的默认显示方式是`display: block;`，它会以块级盒子的形式在页面上显示。
内联元素的默认显示方式是`display: inline;`，它会以行内盒子的形式在页面上显示。
4. 容纳内容：
块级元素可以包含其他块级元素和内联元素，可以嵌套其他元素。
内联元素通常只能包含文字、图片、其他内联元素等内容，不能嵌套块级元素。
5. 默认宽度和高度：
块级元素的宽度默认为父元素的100%，高度会根据内容的多少自动撑开。
内联元素的宽度和高度由其内容决定，不会自动换行。
块级元素和内联元素常用标签
常见的块级元素标签包括：
- `<div>`：定义文档中的一个块级容器。
- `<form>`：定义表单。
- `<p>`：定义段落。
- `<h1>`-`<h6>`：定义标题。
- `<table>`：定义表格。
- `<ul>`：定义无序列表。
- `<ol>`：定义有序列表。
- `<li>`：定义列表项。
常见的内联元素标签包括：
- `<span>`：定义文本的容器。
- `<a>`：定义超链接。
- `<strong>`：定义强调文本。
- `<em>`：定义斜体文本。
在块级元素和内联元素中通用的标签
- `<span>`：用于包裹文本或内联元素，用于设置文本的样式或添加其他属性。
- `<a>`：用于创建超链接。
- `<strong>`：用于强调文本。
- `<em>`：用于斜体强调文本。
- `<code>`：用于表示计算机代码。
- `<cite>`：用于引用作品的标题。
- `<abbr>`：用于表示缩写词。
- `<q>`：用于引用短的文本或作品。
- `<del>`：用于表示被删除的文本。
- `<ins>`：用于表示插入的文本。
- `<sub>`：用于表示下标文本。
- `<sup>`：用于表示上标文本。
- `<small>`：用于表示较小的文本。
- `<big>`：用于表示较大的文本。
- `<var>`：用于表示变量。
“特殊”的行内块级元素
行内块级元素是一种特殊的元素类型，它具有同时拥有行内元素和块级元素特性的特点。
行内块级元素特点：
1. 占据内容所需的宽度和高度：与行内元素不同，行内块级元素可以设置宽度和高度属性。它会根据内容的大小自动调整宽度和高度，不会独占一行。
2. 支持设置内外边距和定位：行内块级元素可以像块级元素一样设置内外边距和定位属性，允许进行布局和定位操作。例如，可以使用`margin`、`padding`和`position`等属性对其进行调整。
3. 元素边框和背景可见：与行内元素不同，行内块级元素的边框和背景可以完全显示。这使得可以为行内块级元素设置边框样式、背景颜色等。
4. 元素之间的空白会有间距：由于行内块级元素被视为文本内容的一部分，因此中间的空白字符会有间距。这点与块级元素类似，不同于行内元素会忽略多个连续空白字符。
常见的行内块级元素包括：
- `<img>`：用于在页面中插入图像。
- `<input>`：用于创建表单中的各种输入字段，如文本框、单选框等。
- `<button>`：用于创建按钮。
- `<label>`：用于定义表单元素的关联标签。
- `<select>`：用于创建下拉列表。
- `<textarea>`：用于创建多行文本输入框。
- `<span>`：用于包裹文本或其他内联元素，常用于设置样式、添加类名等。
需要注意的是，通过CSS的`display`属性，我们可以将块级元素设为行内块级元素，例如设置`display: inline-block;`，这样可以将其他块级元素也表现为行内块级元素。
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
