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

CSS对元素的分类

文章目录

  • 概述
  • 置换元素/非置换元素
    • 置换元素
    • 非置换元素
  • 行内元素/块级元素/行内块级元素
    • 行内元素
    • 块级元素
    • 行内块级元素

概述

CSS从两个维度上将HTML元素进行了分类:

  1. 元素内容的表现形式上,将元素分为:置换元素、非置换元素。
  2. 元素自身的显示方式上,将元素分为:行内元素、块级元素、行内块级元素。

要清楚理解元素内容元素自身的区别:

  1. 讨论元素内容的时候,元素就是个容器,里面装的东西就是要关注的内容
  2. 讨论元素自身的时候,内容不重要,它的位置、宽高、内外边距才是重点

置换元素/非置换元素

重点关注元素内容的渲染效果:内容来源、如何创建。

浏览器渲染HTML文档,创建元素内容的时候,分两种情况:

  1. 可以直接从元素标签中获得元素内容。比如<p>内容区</p>,直接渲染内容区就能创建好<p>元素的内容,这种元素就是非置换元素
  2. 需要引入额外对象,才能创建好元素内容。比如<img src="photo.png" />,需要额外加载图片,才能创建好<img>元素的内容,再比如<button>按钮</button>,浏览器要引入一个按钮组件,才能创建好<button>元素的内容,这种元素就是置换元素

HTML文档中,大部分是都非置换元素,只有少数几个置换元素<img><select><textarea><input><button><iframe><video><audio><embed><object>

置换元素

特点:

  1. HTML源码文档中看元素标签,只能看到元素自身,看不到具体的元素内容
  2. 修改元素某些属性值,就可以改变元素内容,比如<input>type属性,<img>src属性
  3. 元素自身一般拥有固定尺寸(宽、高、宽高比),部分元素有heightwidth属性
  4. CSS渲染模型美化不了元素内容,只能对元素自身进行美化

非置换元素

特点:

  1. HTML源码文档中看元素标签,可以同时看到元素自身和具体的元素内容
  2. 严格遵循CSS渲染模型机制,元素自身元素内容都可以被CSS美化

行内元素/块级元素/行内块级元素

重点关注元素自身的渲染效果:位置、宽高、内外边距。

这种分类方式跟CSS属性display有直接关系,该属性可选值有很多,这里只涉及其中三个:

  1. 行内元素:用display: inline渲染的元素
  2. 块级元素:用display: block渲染的元素
  3. 行内块级元素:用display: inline-block渲染的元素

浏览器会为每个HTML元素赋予一个默认的display属性值,主动改变这个值就可以改变默认的元素分类,比如:

  1. display: block修饰<a>元素,就把行内元素变成了块级元素
  2. display: inline修饰<div>元素,就把块级元素变成了行内元素

行内元素

特点:

  1. 在父元素文档流中不会独占一行,左右两边可以出现其它行内元素
  2. 不能控制高度height和宽度width,默认高度和宽度分别为元素内容的高度和宽度
  3. 仅能在左右两个方向上控制外边距margin和内边距padding,上下两个方向不能控制
  4. 行内元素中不能放置块级元素,否则会被CSS渲染出来一些很奇怪的样式效果

在特点1中,相邻行内元素之间会存在空白间隙的问题,可参考其它文章解决。
在特点2中,如果行内元素同时也是置换元素,就可以控制元素的宽高,这是特例。

常见行内元素:<img><a><label><span><strong><small><em><i><b><abbr><br><dfn><code><kbd><q><samp><sub><sup><var><city><iframe>

块级元素

特点:

  1. 在父元素文档流中独自占据一整行,左右两边不会出现其他元素
  2. 可以控制高度height和宽度width,默认高度为元素内容高度,默认宽度为父元素100%宽度
  3. 可以在上下左右四个方向上控制外边距margin和内边距padding

常见块级元素:<h1><h2><h3><h4><h5><h6><ol><ul><li><dl><dt><dd><div><form><fieldset><legend><article><header><main><footer><figure><blockquote><figcaption><hr><p><pre>

行内块级元素

既有行内元素特点,又有块级元素特点:

  1. 在父元素文档流中不会独占一行,左右两边可以有其它元素(行内元素特点)
  2. 可以控制高度height和宽度width(块级元素特点),默认高度和宽度分别为元素内容的高度和宽度(行内元素特点)
  3. 可以在上下左右四个方向上控制外边距margin和内边距padding(块级元素特点)

常见行内块级元素:<button><input><textarea><select>

相关文章:

CSS对元素的分类

文章目录 概述置换元素/非置换元素置换元素非置换元素 行内元素/块级元素/行内块级元素行内元素块级元素行内块级元素 概述 CSS从两个维度上将HTML元素进行了分类&#xff1a; 从元素内容的表现形式上&#xff0c;将元素分为&#xff1a;置换元素、非置换元素。从元素自身的显…...

力扣第五十四题——螺旋矩阵

内容介绍 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;matrix …...

中创算力:以知识产权转化运用促进高质量发展

创新是引领发展的第一动力&#xff0c;保护知识产权就是保护创新。为深入实施知识产权公共服务普惠工程&#xff0c;促进知识产权公共服务更好服务高水平科技&#xff0c;国家知识产权局发布关于全面提升知识产权公共服务效能的指导意见。 在政策落地过程中&#xff0c;如何精…...

C语言9~10 DAY(合集)

数组的概念 什么是数组 数组是相同类型&#xff0c;有序数据的集合。 数组的特征 数组中的数据被称为数组的元素&#xff0c;是同构的 数组中的元素存放在内存空间里 (char player_name[6]&#xff1a;申请在内存中开辟6块连续的基于char类型的变量空间) 衍生概念&#x…...

【Kubernetes】应用的部署(一):金丝雀部署

应用的部署&#xff08;一&#xff09;&#xff1a;金丝雀部署 在项目迭代开发过程中&#xff0c;经常需要对应用进行上线部署。上线部署策略主要有 3 种&#xff1a;金丝雀部署、蓝绿部署 和 滚动部署。 金丝雀部署 也被叫作 灰度部署。金丝雀部署过程&#xff1a;先让一部分…...

1.面试准备篇

筛选简历 找实习用处不大 简历注意事项 注意职业技能和项目经历 职业技能 黄金位置 针对性 引导面试官提问 只写会的 不会的不能写 项目描述 主要设计… 展示指标 找练手项目 来源&#xff1a;Gitee 或者github 主要关注点:功能实现、常见问题、系统设计 面试过程 一面…...

Spring: try-catch 是否还会回滚

问题出现&#xff1a; try-catch 语句 依旧会抛出如下错误 org.springframework.transaction.TransactionSystemException: Could not commit JPA transaction; nested exception is javax.persistence.RollbackException: Transaction marked as rollbackOnlyat org.springf…...

spdlog日志库--基础介绍

文章目录 1. 简介1.1. spdlog代码特点1.2. 说明1.3. spdlog架构 2. spdlog的安装2.1. 使用包管理器安装2.2. 使用源码安装2.3. 仅使用头文件 3. 相关概念3.0 常用的头文件3.1. level_enum3.2. sink3.3. logger3.4 格式输出3.5 对齐方式3.6 截断3.7 字符串格式化fmt 4. 特性4.1.…...

【网络】网络编程套接字(二)

网络编程套接字&#xff08;二&#xff09; 文章目录 1.单执行流的TCP网络程序1.1服务端创建套接字1.2服务端绑定1.3服务端监听1.4服务端获取链接1.5服务端处理请求1.6客户端创建套接字1.7客户端连接服务器1.8客户端发起请求 2.多进程版的TCP网络程序2.1单执行流的弊端2.2多进…...

1.1、centos stream 9安装Kubernetes v1.30集群 环境说明

最近正在学习kubernetes&#xff0c;买了一套《Kubernetes权威指南 从Docker到Kubernetes实践全接触(第六版)》这本书讲得很好&#xff0c;上下两册&#xff0c;书中k8s的版本是V1.29&#xff0c;目前官网最新版本是v1.30。强烈建议大家买一套看看。 Kubernetes官网地址&#x…...

Redis3

目录 什么是缓存穿透&#xff1f;怎么解决&#xff1f; 什么是缓存雪崩&#xff1f;怎么解决&#xff1f; 如何保证数据库和缓存的数据一致性&#xff1f; 如何保证Redis服务高可用&#xff1f; 哨兵的作用 Redis虚拟槽分区有什么优点&#xff1f; 为什么Redis集群最大槽…...

Oracle数据巡检 - 设计巡检模板

设计巡检模板 明确巡检数据库等信息 包括数据库种类、版本、架构、数量等&#xff0c;例如 Oracle DG和Oracle RAC数据库巡检项肯定会有差异&#xff0c;Oracle 11g和12c版本巡检内容也会有所不同。 明确巡检项 这一块需要结合自身的运维经验&#xff0c;列出详尽的巡检项&…...

优盘未格式化数据恢复实战指南

在数字时代&#xff0c;优盘&#xff08;USB闪存驱动器&#xff09;作为便携存储媒介&#xff0c;承载着无数重要的文件与数据。然而&#xff0c;当您插入优盘准备访问资料时&#xff0c;却遭遇了“驱动器未被格式化”的提示&#xff0c;这无疑是一场突如其来的数据危机。本文将…...

【python基础】python基础习题练习(一)

文章目录 一. python语言简介二. python基本语法与常用函数三. python基本数据类型一.选择题二.编程题四. python组合数据类型一.选择题二.简答题三.编程题一. python语言简介 查看python是否安装成功的命令是:python -vPython IDE有:pyCharm、Spyder、Jupter NotebookPython…...

GESP 4级样题 ---> 绝对素数

这题需要判断一个数和它的反转后的数是否都为素数。 可以转成 string 后 reverse 一下。 AC CODE&#xff1a; #include <bits/stdc.h> using namespace std; typedef long long LL; bool isPrime(int x){if(x<2) return false;for(int i2;i*i<x;i){if(x%i0) re…...

大语言模型系列 - Transformer

1. 简介 1.1. 概述 大语言模型Transformer是一种由谷歌公司提出的基于注意力机制的神经网络模型,它在自然语言处理(NLP)领域取得了显著成就,并逐渐被应用于其他领域如语音识别、计算机视觉和强化学习等。 1.2. 学习资源 以下是一些学习大语言模型Transformer的资源地址…...

Java面试之操作系统

1、冯诺依曼模型 运算器、控制器、存储器、输入设备、输出设备 32位和64位CPU最主要区别是一次性能计算多少字节数据&#xff0c;如果计算的数额不超过 32 位数字的情况下&#xff0c;32 位和 64 位 CPU 之间没什么区别的&#xff0c;只有当计算超过 32 位数字的情况下&#…...

springboot船舶维保管理系统--论文源码调试讲解

第二章 相关技术 本次开发船舶维保管理系统使用的是Vue进行程序开发&#xff0c;船舶维保管理系统的数据信息选择MySQL数据库进行存放。 2.1 VUE介绍 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue…...

【机器学习西瓜书学习笔记——神经网络】

机器学习西瓜书学习笔记【第五章】 第五章 神经网络5.1神经元模型5.2 感知机与多层网络学习感知机学习率成本/损失函数梯度下降 5.3 BP神经网络&#xff08;误差逆传播&#xff09;5.4 全局最小与局部极小5.5 其他常见神经网络RBF网络RBF 与 BP 最重要的区别 ART网络 第五章 神…...

安装 electron 报错解决

1. 报错 大概率由镜像问题导致 2. 解决 2.1 打开 npm 配置 npm config edit 2.2 添加配置 registryhttps://registry.npmmirror.comelectron_mirrorhttps://cdn.npmmirror.com/binaries/electron/electron_builder_binaries_mirrorhttps://npmmirror.com/mirrors/electron…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

Axure Rp 11 安装、汉化、授权

Axure Rp 11 安装、汉化、授权 1、前言2、汉化2.1、汉化文件下载2.2、windows汉化流程2.3、 macOs汉化流程 3、授权 1、前言 Axure Rp 11官方下载链接&#xff1a;https://www.axure.com/downloadthanks 2、汉化 2.1、汉化文件下载 链接: https://pan.baidu.com/s/18Clf…...

21-Oracle 23 ai-Automatic SQL Plan Management(SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...