首页 前端知识 CSS 块状元素

CSS 块状元素

2024-05-18 18:05:14 前端知识 前端哥 673 627 我要收藏

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

在这里插入图片描述

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

在这里插入图片描述

文章目录

    • 一、块状元素的特点和行为
    • 二、常见的块状元素

CSS块状元素是指在页面布局中自动换行显示,能够设置特定宽度和高度,围绕内容撑开,可包含内联元素和其他块状元素的HTML元素,如**<div>, <p>, <h1>**等,常用于构建网页结构和布局。

一、块状元素的特点和行为

  1. 独占一行:块状元素在页面布局中自动从新的一行开始,并且其后的元素也会被强制到下一行显示,即使它们之间没有明确的换行指令。

  2. 宽度与高度:块状元素可以设置明确的宽度(width)和高度(height),默认情况下,宽度会尽可能地占据其父元素的全部可用空间(通常是100%),而高度则根据内容来决定,但也可以通过CSS设定具体的值。

  3. 内外边距和边框:块状元素可以设置内边距(padding)、外边距(margin)和边框(border),这些属性不会影响其周围的布局方式,即元素周围的空间可以被调整。

  4. 内容流布局:块状元素可以包含内联元素(如<span><a>)和其他块状元素作为其子元素,这使得它们成为构建复杂页面结构的理想选择。

  5. 默认样式:大多数浏览器对块状元素有一些默认的样式设置,比如段落<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;让元素保持块状特性的同时以内联方式显示,以便更精细地控制页面布局。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8783.html
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!