CSS —— display属性

news2024/9/20 8:15:22

用于指定一个元素在页面中的显示方式

HTML中标签元素大体被分为三种类型:块元素、行内元素和行内块元素

块元素 :block

1.独占一行

2.水平方向,占满它父元素的可用空间(宽度是父级的100%)

3.垂直方向,占据的空间由其内容大小决定

4.可以通过 css 属性 width 、 height 设置该元素的宽和高(添加宽高都生效)

常见的block模式下的元素:

div
main
ul
li
p
address
article
aside
blockquote 
dd
dl
dt 
footer
form
h1 h2 h3 h4 h5 h6
header 
hr
nav
ol
pre
section
table
行内元素 :inline

1.一行可以显示多个

只要 当前行有剩余空间可以容纳自身内容,就会显示在里面;如果没有剩余空间,才会移到下一行。

如果前面的兄弟元素是inline模式,往往会在同行显示

如果前面的兄弟元素是block模式,则会在不同行显示

2.宽度和高度默认由内容撑开

3.css 属性 width 、 height 不起作用(设置宽高不生效)

span
a
audio
b
br
button
canvas
em
embed
i
iframe
img
input
label
select
strong
svg
textarea
video
行内块元素:inline-block

1.一行可以显示多个

2.可以设置宽高

display:block;(将元素转换为块元素)

display:inline;(将元素转换为行内元素)

display:inline-block;(将元素转换为行内块元素)

display:none;(元素将被隐藏)

display:flex;(将元素作为弹性盒子显示)(弹性布局)

采用flex布局的元素,称为 Flex 容器(flex container),简称"容器"

display:grid;(将元素作为网格容器显示)

display:table;(将元素作为表格显示)

本文参考自:界面布局 - 基本规则 | 白月黑羽

                      display属性详解_display:block属性-CSDN博客

                      弹性布局(display:flex;)属性详解_弹性布局的属性有哪些-CSDN博客

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

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

相关文章

如何使用QT完成记事本程序的UI界面布局

每日QT技巧查询表-CSDN博客 会持续更新记事本编写的全部过程,关注不迷路 一、相关控件 ①水平和垂直布局 ②按键 ③文本框 ④水平弹簧 ⑤标签 ⑥Widget 二、控件使用方法 1、PushButton 拖出三个按键,并对其进行命名,两处地方命名可以不一…

亚马逊IP关联及其解决方案

在电子商务领域,亚马逊作为全球领先的在线购物平台,吸引了众多商家和个人的参与。然而,随着业务规模的扩大,商家在使用亚马逊服务时可能会遇到IP关联的问题,这不仅影响账户的正常运营,还可能带来一系列不利…

频谱图在频率为0附近有较大幅度,这是为什么

如下图所示,很明显看出,相比于其他频率段,在频率为0Hz左右,其幅值幅度较大。这是为什么呢? 在频谱图中,频率为0 Hz附近的幅值较大,通常意味着信号中存在较强的低频成分或直流分量(D…

春日美食:基于SpringBoot的在线订餐系统

1 绪论 1.1 研究背景 随着互联网技术的快速发展,网络时代的到来,网络信息也将会改变当今社会。各行各业在日常企业经营管理等方面也在慢慢的向规范化和网络化趋势汇合[13]。电子商务必将成为未来商务的主流,因此对于餐饮行业来说,…

【动手学深度学习】05 线性代数(个人向笔记)

1. 线性代数 向量的一些公式 ∣ ∣ a ∣ ∣ ||a|| ∣∣a∣∣ 表示向量 a 的范数,课上没有讲范数的概念 其中第一条为求向量的二范数 第四条表示如果a为标量,那么向量 ∣ ∣ a ⋅ b ∣ ∣ ||ab|| ∣∣a⋅b∣∣ 的长度等于 ∣ a ∣ ⋅ ∣ ∣ b ∣ ∣…

T2打卡——彩色图片分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者:K同学啊 1.导入数据: #设置gpu import tensorflow as tf gpustf.config.list_physical_devices(GPU) if gpus:#如果有多个gpu仅使用第一个gpu0gpus[0]#设置…

基于图谱的记忆存储 - mem0 graph memory + neo4j

log 日志版 【LLM最强大脑】基于图谱的记忆存储 - mem0 graph memory neo4j_哔哩哔哩_bilibili 获取API Key 谷歌邮箱注册,需科学上网,你知道的┗|`O′|┛ 嗷~~ 获取 mem0ai key Dashboard | Mem0.ai 获取 neo4j key Neo4j Graph Databa…

Linux:软硬连接和动静态库

一般ll一下,最左边一列就是文件类型: 怎么创建链接文件: ln -s 目标文件 创建的链接文件名 来试试:这叫软连接,软连接相当于Windows下的快捷方式,直接指向原文件的绝对路径;删除软连接不影响原…

通义千问大模型Java调用,百炼

文章目录 一、大模型服务平台[百炼](https://help.aliyun.com/zh/model-studio/getting-started)二、Java sdk调用与eventStream三、百炼平台其它 一、大模型服务平台百炼 百炼是阿里新出的一个大模型服务平台,聚合了多个千问大模型及其它一些大模型的调用&#xf…

【MySQL】Ubuntu22.04安装MySQL8.0.39及修改默认用户名和密码

文章目录 安装mysql1. 下载mysql2. 查看mysql版本3. 启动mysql服务(通常在安装后自动启动)4. 运行安全配置脚本 修改用户名和密码1. 查看mysql自动设置的随机账号与密码2. 用默认账号密码登录mysql3. 找到账号密码有关的数据库4. 更改用户名和密码mysql5…

C++:AVL树保姆级详解

目录 AVL树概念 AVL树的性质 AVL树节点定义 AVL树的构造函数和拷贝函数 构造函数 拷贝构造 AVL树的插入(灰常重要) 更新平衡因子 什么时候向上调整平衡因子 如何向上调整平衡因子 旋转 左单旋 右左单旋 右单旋 左右单旋 AVL树的验证 验证是否是二叉搜索树 这…

Apollo星火计划基础速记

1 Apollo规划模块 规划根据感知预测的结果,当前定位信息以及Routing的结果,规划出一条安全行驶的轨迹送给控制模块 其中NaviPlanning主要用于高速公路的导航规划,OnLanePlanning用于城区及高速公路各种复杂车道;OpenSpacePlanning用于没有车道线的场景,主要在自主泊车和狭…

JavaDS —— 并查集

并查集概念 案例引入: 假设现在有三个程序设计小分队,分别来自广东,广西和海南,其中广东小分队人员的编号为{0,6,7,8} 广西小分队人员编号为{1,4,9},海南小分…

关于WebZip乱码目录文件名修改

先引用一段 来描述问题: 在IT行业中,我们经常遇到与编码和字符集有关的问题,特别是在处理包含中文字符的文件或目录时。"WebZip乱码目录文件名修改"这个问题就是一个典型的例子,涉及到Webzip工具在下载包含中文路径的文…

清洁眼镜片

经常眼镜弄脏了 怎么弄都干净不了 根本无法佩戴 影响出门时间 有时在外很尴尬 其实清洁很简单 从水龙水冲洗镜片(可附上洗手液) 然后用纸巾局部点触抹干偶尔泛起小水滴 就好

计算机毕业设计SpringBoot+VUE自动灌装生产线 MES 系统设计

采用 B/S 架构,MES 应用软件通过 TCP/IP 协议与自动灌装生产线上的各个工作单元中的 PLC 控制器进行通信,查询或采集由 PLC 控制器采集的生产数据。通过 JAVA 构建的平台与数据库进行连接,实现灌装生产线的生产管理、订单管理、质量管理和数据…

DPDK基础入门(六):从PCIe事务的角度看包处理

PCIe PCI Express(Peripheral Component Interconnect Express)又称PCIe,它是一种高速串行通信互联标准。PCIe规范遵循开放系统互联参考模型(OSI),自上而下分为事务传输层、数据链路层、物理层。对于特定的…

【Hot100】LeetCode—70. 爬楼梯

目录 1- 思路动规五部曲 2- 实现⭐763. 划分字母区间——题解思路 3- ACM 实现 原题链接:70. 爬楼梯 1- 思路 动规五部曲 1- dp 数组创建,确定含义 dp[i] 代表到达 楼梯 i 的方法数 2- 状态转移方程 因为一共有两种移动的方式,当前 dp[i] …

基于Java的垃圾分类网站系统

你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言:Java 数据库:MySQL 技术:SpringBoot框架,B/S架构 工具:MyEclipse, Tomcat 系统展示 首页 用户管理…

Radmin-同一局域网只需IP就可以控制电脑

Radmin小编十多年前就在用,它是一款非常好用的局域网控制工具,可以完全替代Windows自带的远程桌面,它的安全性和便于操作性都比Windows的远程桌面好用。 Radmin还有一个好处,就是远程别人电脑时,对方那边毫无察觉&…