还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |

文章目录
- 一、块状元素的特点和行为
- 二、常见的块状元素
CSS块状元素是指在页面布局中自动换行显示,能够设置特定宽度和高度,围绕内容撑开,可包含内联元素和其他块状元素的HTML元素,如**<div>, <p>, <h1>**等,常用于构建网页结构和布局。
一、块状元素的特点和行为
-
独占一行:块状元素在页面布局中自动从新的一行开始,并且其后的元素也会被强制到下一行显示,即使它们之间没有明确的换行指令。
-
宽度与高度:块状元素可以设置明确的宽度(width)和高度(height),默认情况下,宽度会尽可能地占据其父元素的全部可用空间(通常是100%),而高度则根据内容来决定,但也可以通过CSS设定具体的值。
-
内外边距和边框:块状元素可以设置内边距(padding)、外边距(margin)和边框(border),这些属性不会影响其周围的布局方式,即元素周围的空间可以被调整。
-
内容流布局:块状元素可以包含内联元素(如
<span>、<a>)和其他块状元素作为其子元素,这使得它们成为构建复杂页面结构的理想选择。 -
默认样式:大多数浏览器对块状元素有一些默认的样式设置,比如段落
<p>标签会有一定的上下外边距和字体样式,这些可以通过CSS进行重置或修改。
二、常见的块状元素
<div>:最通用的容器元素,用于布局和分组。<p>:段落文本。<h1>至<h6>:不同级别的标题。<ul>、<ol>:无序列表和有序列表。<li>:列表项。<table>:表格。<tr>、<td>、<th>:表格行、单元格和表头单元格。<form>:表单容器。<header>、<footer>、<nav>、<main>、<article>、<section>等HTML5语义化元素。
通过CSS,开发者可以改变元素的默认布局行为,例如,使用display: inline;将块状元素转换为内联元素,或者使用display: inline-block;让元素保持块状特性的同时以内联方式显示,以便更精细地控制页面布局。