CSS的元素显示模式

一,什么是元素显示模式

元素显示模式是指元素以什么方式显示,

作用:了解不同类型的标签可以更好的布局网页

HTML元素一般分为块元素行内元素

1.1块元素

常见的块元素有:<p><ul><ol><li>,<div>标签是最典型的块元素

块元素的特点:

1°独占一行

2°高度、宽度、外边距以及内边距都可以控制

3°宽度默认是容器的100%

4°是一个容器及盒子,里面可以放行内或者块级元素。

1.2行内元素

常见的行内元素有<a><strong><i>,<span>为最典型的行内元素

行内元素的特点:

1°相邻行内元素在同一行,一行可以显示多个。

2°高、宽直接设置是无效的。

3°默认宽度就是它本身内容的宽度。

4°行内元素只能容纳文本或其他行内元素。

1.3行内块元素

在行内元素中有几个特殊的标签:<img/><input/><td>,他们同时具有块元素和行内元素的特点。

行内块元素的特点:

1°和相邻行内元素在一行上,但是之间会有空白缝隙。一行可以显示多个(同行内元素)

2°默认宽度就是他本身内容的宽度(同行内元素)

3°高度、行高、外边距以及内边距都可以控制(同块级元素)

二,元素显示模式分类

三,元素显示模式的转换

转化为块元素:display: block;

转化为行内元素: display: inline;

转化为行内块元素: display: inline-block;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/666039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【计算机网络】HTTPS协议原理

文章目录 一、相关基础概念1.HTTPS 是什么2.什么是"加密"3.为什么要加密4.常见的加密方式5.数据摘要 && 数据指纹 二、HTTPS 的工作过程 -- 加密方式1.只使用对称加密2.只使用非对称加密3.双方都使用非对称加密4.非对称加密 对称加密5.中间人攻击6.证书7.非…

力扣144 二叉树的前序遍历 Java版本

文章目录 题目描述递归方法代码 非递归方法代码 题目描述 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xf…

ElementUI Data:Table 表格

ElementUI安装与使用指南 Table 表格 点击下载learnelementuispringboot项目源码 效果图 el-table.vue&#xff08;Table表格&#xff09;页面效果图 项目里el-table.vue代码 <script> export default {name: el_table,data() {return {tableData: …

蓝桥杯省赛无忧 数位DP 课件78 数位DP

01 算法概述 02 问题引入 03 算法分析 04 例题

《QDebug 2024年1月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Repeator 的 delegate 在 remove 移除时的注意事项 Qt Bug Tracker&#xff1a;https://bugreports.qt.io/browse/QTBUG-47500 Repeator 在调用 remove 函数之后&#xff0c;对应的 Item 会立即释放&#xff0c;后续就…

如何基于文档的内容实现 AI 对话功能,以 Documate 为例

前言 在 ChatGPT 出现之时&#xff0c;社区内也出现过 把 React 官方文档投喂给它 &#xff0c;然后对它进行提问的实践。但是&#xff0c;由于每次 ChatGPT 对话能接受的文本内容对应的 Token 是有上限的&#xff0c;所以这种使用方式存在一定的手动操作成本和不能复用的问题…

使用Ettus USRP X440对雷达和EW系统进行原型验证

概览 无论是保障己方平台的生存能力&#xff0c;还是扰乱敌方频谱使用&#xff0c;以电磁(EM)频谱为主导都是任务成功的主要因素。电磁频谱操作(Electromagnetic Spectrum Operation, EMSO)需要使用战术系统来监测敌方的频谱活动、定位其发射器并帮助己方制定行动计划。软件无…

离散数学——特殊关系(笔记及思维导图)

离散数学——特殊关系&#xff08;笔记及思维导图&#xff09; 笔记来自【电子科大】离散数学 王丽杰

DIY制作硬模空心耳机壳使用的是什么原材料?

制作硬模空心耳机壳的原材料可以根据不同的制作要求和材料特性进行选择。以下是一些常见的原材料&#xff1a; 塑料&#xff1a;塑料是一种常用的耳机壳制作材料&#xff0c;具有轻便、耐用、防水等特点。常见的塑料材料包括ABS、PC、PA等&#xff0c;可以根据具体要求进行选择…

20240131在ubuntu20.04.6下使用whisper不同模式的比对

20240131在ubuntu20.04.6下使用whisper不同模式的比对 2024/1/31 16:07 首先你要有一张NVIDIA的显卡&#xff0c;比如我用的PDD拼多多的二手GTX1080显卡。【并且极其可能是矿卡&#xff01;】 2、请正确安装好NVIDIA最新的驱动程序和CUDA。可选安装&#xff01; 3、配置whisper…

Springboot项目启动后浏览器不能直接访问接口,而postman可以访问?

在云服务器上部署springboot后端时&#xff0c;项目启动后浏览器不能直接访问接口,而postman可以访问。这是当时困扰了我大半天的小问题&#xff0c;在我打开防火墙和阿里云安全组之后还是没解决。然后在网上搜了很多很多资料&#xff0c;以为是浏览器访问权限或者是https什么证…

[力扣 Hot100]Day23 反转链表

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 出处 思路 经典考研题&#xff0c;用头插法解决。 代码 class Solution { public:ListNode* reverseList(ListNode* head) {if(!head || !head->next) return head;List…

Open3d计算点云法向量,可视化(代码)

Open3d使用estimate_normals函数来计算法向量。其参数设置Open3d提供了3中参数搜索的方法&#xff08;所有计算的法向量模长为1&#xff09;&#xff1a; open3d.geometry.KDTreeSearchParamKNN(knn20) # 计算近邻的20个点 open3d.geometry.KDTreeSearc…

Linux下qemu的安装并搭建虚拟arm环境(带helloworld测试)【超详细】

qemu的安装并搭建虚拟arm环境 1、准备工作1.1 安装交叉汇编工具1.2 编译内核kernel1.3 u-boot编译1.4 制作根文件系统-busybox 2、启动qemu&#xff08;arm&#xff09;3、helloworld测试 1、准备工作 1.1 安装交叉汇编工具 交叉编译器的作用就不需要详细解释了&#xff0c;因…

MySQL原理(四)索引(3)索引失效与索引区分度

一、索引失效&#xff1a; 首先未使用索引列作为查询条件索引是肯定会生效的&#xff0c;还有其他的情况&#xff0c;索引列做为了查询条件也失效了&#xff1a; ALTER TABLE staffs ADD INDEX idx_staffs_nameAgePos(NAME, age, pos); 1、select 语句、order by语句&#xf…

来了来了,5000个红包封面免费领

今年公众号很慷慨&#xff0c;给长期运营的作者免费发放了6w个红包封面&#xff0c;感谢公众号平台。 往年还是自己花钱找别人设计&#xff0c;平台审核通过后才能正常发放给大家&#xff0c;自从AI绘画工具问世后&#xff0c;自己也能设计了。 下面的两个封面都是我用AI工具St…

2024.1.30报错记录

今天想调通一套github上的U-net代码&#xff0c;把报错记录一下 第一章 ModuleNotFoundError: No module named skimage 没有这个模块 pip install scikit-image 第二章 TypeError: (‘Keyword argument not understood:‘, ‘input‘) TypeError: (‘Keyword argument …

从 20 多套 MySQL 到 1 套 TiDB丨骏伯网络综合运营管理平台应用实践

原文来源&#xff1a; https://tidb.net/blog/a38c72a4 本文作者&#xff1a;骏伯网络 唐帆&#xff0c;PingCAP 贺美存 骏伯网络简介 广州骏伯网络是一家以数据驱动的科技公司&#xff0c;聚焦移动互联网营销服务&#xff0c;坚持以客户为中心&#xff0c;深耕 APP、运营…

政安晨:示例演绎Python的列表

列表和你可以用它们做的事&#xff1a;包括索引、切片和对象变动 (变异-Mutation) 。 列表 在Python中&#xff0c;列表表示有序的值序列。以下是如何创建列表的示例&#xff1a; primes [2, 3, 5, 7] 我们可以将其他类型的元素放在列表中&#xff1a; planets [Mercury…

【C++】拷贝构造函数和赋值运算符重载详解

目录 拷贝构造函数 概念 特征 赋值运算符重载 运算符重载 赋值运算符重载 ​编辑前置和后置重载 ⭐拷贝构造函数 ⭐概念 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存 在的类类型对象创建新…