当前位置: 首页 > article >正文

CSS 元素的显示模式(块元素,行内元素,行内块元素)

一. 块元素(block)

又称:块级元素
特点:
1. 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
2. 默认宽度:撑满父元素
3. 默认高度:由内容撑开。
4. 可以通过 CSS 设置宽高。

例如:

1. 主体结构标签: <html> 、 <body>
2. 排版标签: <h1> ~  <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
3. 列表标签: <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
4. 表格相关标签: <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>
5.  <form> <option>

二. 行内元素(inline)

又称:内联元素
特点:
1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。
2. 默认宽度:由内容撑开。

例如:

1. 文本标签: <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
2.  <a> <label>

三 行内块元素(inline-block)

又称:内联块元素
特点:
1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。
2. 默认宽度:由内容撑开。
3. 默认高度:由内容撑开。
4. 可以通过 CSS 设置宽高。

例如:

1. 图片: <img>
2. 单元格: <td> 、 <th>
3. 表单控件: <input> 、 <textarea> 、 <select> 、 <button>
4. 框架标签: <iframe>

注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种分类方式,行内块元素应该算作行内元素。


http://www.kler.cn/a/504592.html

相关文章:

  • Nacos: 一个动态服务发现与配置管理平台
  • 【论文阅读】MAMBA+diffusion系列学习
  • 多线程锁
  • 00_专栏《Redis 7.x企业级开发实战教程》介绍
  • PostgreSQL 超级管理员详解
  • 青少年编程与数学 02-006 前端开发框架VUE 26课题、数据交互
  • 541. 反转字符串 II【力扣】
  • 怎样利用海外云手机进行引流?
  • 常用 Excel 快捷键
  • 微信小程序:中途退出原页面,再次进入无法回到退出时的位置
  • HTML基础与实践
  • OPT: Open Pre-trained Transformer语言模型
  • JavaScript系列(26)--安全编程实践详解
  • 《零基础Go语言算法实战》【题目 4-8】用 Go 语言设计一个遵循最近最少使用(LRU)缓存约束的数据结构
  • rtthread学习笔记系列--28 I2C驱动
  • 【C语言】【C++】Curl库的安装
  • 基于Python机器学习、深度学习技术提升气象、海洋、水文领域实践应用-以ENSO预测为例讲解
  • 机组存储系统
  • HarmonyOS NEXT开发进阶(六):HarmonyOS NEXT实现嵌套 H5 及双向通信
  • 【跟着官网学技术系列之MySQL】第6天之输入查询