还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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;让元素保持块状特性的同时以内联方式显示，以便更精细地控制页面布局。
