CSS —— display属性

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

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.mzph.cn/web/52325.shtml

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

相关文章

Idea 创建 Maven项目的时候卡死

文章目录 一、Archetype 和 Catalog1.1 Archetype(原型)1.2 Catalog(目录) 二、可能遇到的问题2.1 问题描述2.2 原因分析2.3 解决方案 参考资料 一、Archetype 和 Catalog 1.1 Archetype(原型) Archetype…

【自考zt】【软件工程】【21.10】

关键字: 软件需求基本性质、软件系统需求挑战、耦合(高内容,低无直接)、内聚(初始化时间)、uml包、rup边界类、测试首要目标、单元测试最后工作、性能需求 软件开发本质、软件需求规约三种风格、提炼、用…

9.7(QT.Day 1)

一、自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面 要求&#xff1a;每行代码都有注释 【需要用到的图片或者动图&#xff0c;自己去网上找】 1.mywidget.h代码 #ifndef MYWIDGET_H #define MYWIDGET_H#include <QWidget> #include <QIcon> //图…

2024全国大学省数学建模竞赛A题-原创参考论文(部分+第一问代码)

一问题重述 1.1 问题背景 "板凳龙"&#xff0c;又称"盘龙"&#xff0c;是浙闽地区的传统地方民俗文化活动。这种独特的表演艺术形式融合了中国传统龙舞的精髓和地方特色&#xff0c;展现了人们对美好生活的向往和对传统文化的传承。 在板凳龙表演中&am…

为elementui的el-date-picker时间选择器添加快捷选项

1、效果图 2、实现方法 直接在elementui的时间选择器上修改&#xff0c;添加shorcuts选项&#xff0c;但是样式要自己修改。 有几个注意点&#xff1a; 1&#xff09;如图我是选中后有显示背景颜色的&#xff0c;也就意味着要给选中的选项添加类名&#xff0c;elementui没有…

一. 从Hive开始

1. 怎么理解Hive Hive不能理解成一个传统意义上的数据库&#xff0c;应该理解成一个解决方案。 是Hadoop在hdfs和mapreduce之后才出现的一个结构化数据处理的解决方案。 Hdfs解决了大数据的存储问题&#xff0c;mapreduce解决了数据的计算问题。 一切似乎很美好。 但是使用成本…

微信小程序页面制作——个人信息

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

探索fastFM:Python中的高效推荐系统库

文章目录 &#x1f680; 探索fastFM&#xff1a;Python中的高效推荐系统库背景&#xff1a;为何选择fastFM&#xff1f;快照&#xff1a;fastFM是什么&#xff1f;安装指南&#xff1a;如何将fastFM加入你的项目&#xff1f;快速入门&#xff1a;五个基础函数的使用实战演练&am…

【音视频】播放音视频时发生了什么? 视频的编解码 H264是什么? MP4是什么?

目录 ✨播放一个视频的流程✨为什么要编码&#xff08;压缩&#xff09;视频数据&#xff1f;✨如何编码&#xff08;压缩&#xff09;数据&#x1f384;简单的例子&#x1f384;音视频编码方式&#x1f384;视频编码格式H264编码是什么&#xff1f;发展历程&#xff1f;H.264基…

解锁 macOS 剪贴板历史记录,高效复制、粘贴技巧

在Mac上&#xff0c;我们经常需要在不同文档之间复制和粘贴内容。然而&#xff0c;macOS自带的剪贴板只能保存最后一个复制项&#xff0c;这大大限制了我们的工作效率。幸运的是&#xff0c;一些第三方应用程序可以帮助我们查看和管理剪贴板的历史记录&#xff0c;从而提升我们…

关系的规范化与范式详解

在数据库设计中&#xff0c;关系的规范化是确保数据结构合理性、减少冗余和异常的关键步骤。如果你是一个数据库设计的初学者&#xff0c;这篇文章将为你深入浅出地讲解 关系规范化 和 范式 的核心概念&#xff0c;并通过简洁的示例帮助你加深理解。 关系的规范化&#xff1a;…

飞机制造5G智能工厂数字孪生工业物联平台,推进制造业数字化转型

飞机制造行业作为高端制造业的典范&#xff0c;正积极探索数字化转型的新路径。飞机制造5G智能工厂数字孪生工业物联平台&#xff08;以下简称“平台”&#xff09;的兴起&#xff0c;不仅为飞机制造业注入了强劲动力&#xff0c;更为整个制造业的数字化转型树立了新的标杆。 …

B: 小球反弹

目录 一&#xff1a; 二&#xff1a; 三&#xff1a; 四&#xff1a; 一&#xff1a;问题描述 有一长方形&#xff0c;长为343720 单位长度&#xff0c;宽为233333 单位长度。在其内部左上角顶点有一小球&#xff08;无视其体积&#xff09;&#xff0c;其初速度如图所示且…

Transformer预测 | 基于Transformer心率时间序列预测(tensorflow)

效果一览 基本介绍 Transformer预测 | 基于Transformer心率时间序列预测(tensorflow) 程序设计 import pandas as pd from pandas.plotting import lag_plot from statsmodels.graphics

变量数据类型 Day3

1. 变量 1.1 变量的概念 变量是计算机内存中的一块存储单元&#xff0c;是存储数据的基本单元变量的组成包括&#xff1a;数据类型、变量名、值&#xff0c;后文会具体描述变量的本质作用就是去记录数据的&#xff0c;比如说记录一个人的身高、体重、年龄&#xff0c;就需要去…

Verilog基础,原码,反码与补码的概念

Verilog模块初认识 1、Verilog模块(Module) Verilog中的module可以看成一个具有输入输出端口的黑盒子&#xff0c;该黑盒子有输入和输出接口(信号)&#xff0c;通过把输入在盒子中执行某些操作来实现某项功能。(类似于C语言中的函数) 图1 模块示意图 1.1 模块描述 图1 所示的…

2024年【防爆电气】试题及解析及防爆电气模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 防爆电气试题及解析考前必练&#xff01;安全生产模拟考试一点通每个月更新防爆电气模拟考试题库题目及答案&#xff01;多做几遍&#xff0c;其实通过防爆电气复审模拟考试很简单。 1、【单选题】()利用输送爆炸危险…

Einsum(Einstein summation convention)

Einsum&#xff08;Einstein summation convention&#xff09; 笔记来源&#xff1a; Permute和Reshape嫌麻烦&#xff1f;einsum来帮忙&#xff01; The Einstein summation convention is a notational shorthand used in tensor calculus, particularly in the fields of …

大美祖国之地名篇-探寻全国同名地名

目录 前言 一、地名数据库 1、数据库模型 2、数据表结构 二、实践之旅&#xff0c;发现同名地名 1、省、市同名 2、市、县同名 3、 区县、乡镇同名 4、乡镇和村委会同名 三、总结 前言 我们祖国地大物博&#xff0c;从北到南&#xff0c;从东到西。祖国位于亚洲东部&…

九,自定义转换器详细操作(附+详细源码解析)

九&#xff0c;自定义转换器详细操作&#xff08;附详细源码解析&#xff09; 文章目录 九&#xff0c;自定义转换器详细操作&#xff08;附详细源码解析&#xff09;1. 基本介绍2. 准备工作3. 自定义转换器操作4. 自定义转换器的注意事项和细节5. 总结&#xff1a;6. 最后&…