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