CSS新手入门笔记整理:元素类型相互转换

元素类型

块元素(block)

  • 独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素。
  • 块元素内部可以容纳其他块元素和行内元素。
  • 可以定义 width,也可以定义 height。
  • 可以定义 4 个方向的 margin。

行内元素(inline)

  • 可以与其他行内元素位于同一行。
  • 行内元素内部可以容纳其他行内元素,但不可以容纳块元素。
  • 无法定义 height,也无法定义 width。
  • 可以定义 margin-left 和 margin-right,无法定义 margin-top 和 margin-bottom。

行内块元素( inline-block)

  • 可以定义 width 和 height。
  • 可以与其他行内元素位于同一行。

表格(table)

  • 以表格形式显示,类似于 table 元素

表格行(table-row)

  • 以表格行形式显示,类似于 tr 元素

表格单元格(table-cell)

  • 以表格单元格形式显示,类似于 td 元素

元素类型转换

在 CSS 中,我们可以使用 display 属性来改变元素的类型。

语法

元素{dispiay:取值;}

属性值

说明

inline

转换为行内元素

block

转换为块元素

inline-block

转换为行内块元素

table

以表格形式显示,类似于 table 元素

table-row

以表格行形式显示,类似于 tr 元素

table-cell

以表格单元格形式显示,类似于 td 元素

none

隐藏元素


拓展:display:none 简介

  • 在 CSS 中,我们可以使用 display:none 来隐藏一个元素,并且被隐藏的元素不再占据原来位置的空间。
  • display:none 一般用来配合 JavaScript 动态隐藏元素,被隐藏的元素不占据原来位置的空间。
  • display:none 不推荐用来隐藏一些对 SEO(Search Engine Optimization,搜索引擎优化)关键的部分。因为对于搜索引擎来说,它会直接忽略 display:none 隐藏的内容,不会把display:none 隐藏的内容加入权重考虑。

display:none 和 visibility:hidden 的区别

在 CSS 中,如果想要隐藏某一个元素,可以使用 display:none 或者 visibility:hidden 来实现。虽然两种方式都可以隐藏元素,但是它们之间有着本质的区别。

display:none

元素被隐藏之后,不占据原来的位置,也就是说元素“彻底地消失了,看不见也摸不着。”

visibility:hidden

元素被隐藏之后,依然占据原来的位置,也就是说元素“并没有彻底消失,看不见但摸得着”。


拓展:display:table-cell功能用途

图片垂直居中于元素

配合使用 display:table-cell 和 vertical-align:middle 来实现大小不固定的图片的垂直居中效果。

语法

父元素
{display:table-cell;vertical-align:middle;
}
子元素{vertical-align:middle;}


等高布局

语法

盒子1{display:table-cell;}
盒子2{display:table-cell;}

两个盒子都不定义高度时,大小而是由盒子的内容撑开。分别给两个元素都转换成“table-cell”,这时两个盒子高度相等,并且高度由两者高度的最大值决定。这就是 “自适应等高布局。”


自动平均划分元素

当有多个元素横向排列时,可以为每一个元素定义 display:table-cell,它会自动平均划分元素,并且使得它们在同一行显示。

语法

父元素{display:table;}
子元素1{display:table-cell;}
······
子元素n{display:table-cell;}
  • 如果为父元素定义 display:table,为子元素定义 display:table-cell,然后为父元素定义一定的宽度,那么此时子元素的宽度就会根据子元素的个数自动平均划分。

拓展: 去除 inline-block 元素间距

  • inline-block 元素之间会有一定的间距,这种间距有时会对布局产生影响。大多数时候为了不影响布局,需要去除 inline-block 元素的间距。
  • 在 CSS 中,可以为父元素定义一个“font-size:0;”来去除 inline-block 元素的间距。

语法

父元素{font-size:0;}
子元素{display:inline-block}


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

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

相关文章

使用navicat(或者其他数据库管理工具)、powerdesigner导出数据字典

适合先有数据库结构,后需要导出数据字典的情况,多数在发开完成交文档或者用户有库的情况下 有条件的话推荐用powerdesigner导出,比较好看 如果用powerdesigner导出的注释不对,是因为数据库的编码不对 1、使用navicat导出 在该数…

代码随想录算法训练营第45天| 70. 爬楼梯 (进阶) 322. 零钱兑换 279.完全平方数

JAVA代码编写 70. 爬楼梯&#xff08;进阶版) 卡码网&#xff1a;57. 爬楼梯&#xff08;第八期模拟笔试&#xff09; 题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f…

菜鸟学习日记(python)——推导式

python中的推导式是一种独特的数据处理方式&#xff0c;可以从一个数据序列去构建另一个新的数据序列的结构体。 它包括以下推导式&#xff1a; 列表&#xff08;list&#xff09;推导式字典&#xff08;dict&#xff09;推导式集合&#xff08;set&#xff09;推导式元组&am…

Multi-Cell Downlink Beamforming: Direct FP, Closed-Form FP, Weighted MMSE

这里写自定义目录标题 Direct FPClosed-Form FPthe Lagrangian functionthe Lagrange dual function: maximizing the Lagrangianthe Lagrange dual problem: minimizing the Lagrange dual functionClosed-Form FP Weighted MMSE原论文 Lagrange dual5.1.1 The Lagrangian5.1.…

阿里云服务器经济型、通用算力型、计算型、通用型、内存型实例区别及选择参考

当我们通过阿里云的活动购买云服务器会发现&#xff0c;相同配置的云服务器往往有多个不同的实例可选&#xff0c;而且价格差别也比较大&#xff0c;例如同样是4核8G的配置的云服务器&#xff0c;经济型e实例活动价格只要1500.48/1年起&#xff0c;通用算力型u1实例要1795.97/1…

nvidia安装出现7-zip crc error解决办法

解决办法&#xff1a;下载network版本&#xff0c;重新安装。&#xff08;选择自己需要的版本&#xff09; 网址&#xff1a;CUDA Toolkit 12.3 Update 1 Downloads | NVIDIA Developer 分析原因&#xff1a;local版本的安装包可能在下载过程中出现损坏。 本人尝试过全网说的…

linux 系统安全基线 安全加固操作

目录 用户口令设置 root用户远程登录限制 检查是否存在除root之外UID为0的用户 ​​​​​​​root用户环境变量的安全性 ​​​​​​​远程连接的安全性配置 ​​​​​​​用户的umask安全配置 ​​​​​​​重要目录和文件的权限设置 ​​​​​​​找未授权的SUID…

json转yolo格式

json转yolo格式 视觉分割得一些标注文件是json格式&#xff0c;比如&#xff0c;舌头将这个舌头区域分割出来&#xff08;用mask二值图的形式&#xff09;&#xff0c;对舌头的分割第一步是需要检测出来&#xff0c;缺少数据集&#xff0c;可以使用分割出来的结果&#xff0c;将…

无公网IP环境如何SSH远程连接Deepin操作系统

文章目录 前言1. 开启SSH服务2. Deppin安装Cpolar3. 配置ssh公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 前言 Deepin操作系统是一个基于Debian的Linux操作系统&#xff0c;专注于使用者对日常办公、学习、生活和娱乐的操作体验的极致&#xff0…

数据仪表盘设计:可视化数据指标和报告

写在开头 在信息爆炸的时代,数据不再是简单的数字和图表,而是一种有机的信息体系。如何将这些琳琅满目的数据以一种直观而高效的方式展示,成为企业决策者和分析师们共同关注的问题。本文将带您深入学习如何设计和创建数据仪表盘,使数据指标和报告以一目了然的方式呈现。 …

Python---time库

目录 时间获取 时间格式化 程序计时 time库包含三类函数&#xff1a; 时间获取&#xff1a;time() ctime() gmtime() 时间格式化&#xff1a;strtime() strptime() 程序计时&#xff1a;sleep() perf_counter() 下面逐一介绍&#…

H3.3K27M弥漫性中线胶质瘤的反义寡核苷酸治疗

今天给同学们分享一篇实验文章“Antisense oligonucleotide therapy for H3.3K27M diffuse midline glioma”&#xff0c;这篇文章发表在Sci Transl Med期刊上&#xff0c;影响因子为17.1。 结果解读&#xff1a; CRISPR-Cas9消耗H3.3K27M恢复了H3K27三甲基化&#xff0c;并延…

Echarts地图案例及常见问题

前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以帮助用户以简单的方式创建复杂的时间序列、条形图、饼图、地图等图形。 Echarts绘制地图的案例 展示了中国各省份的人口数量 var myChart = echarts.init(document.getElementById(main)); var option = {t…

【TailwindCSS】

TailwindCSS作为一种现代化的CSS框架&#xff0c;以其高度的定制性和灵活性受到前端开发者的青睐。本文旨在提供一份详细的TailwindCSS使用教程&#xff0c;特别适用于Vite和Vue框架的组合。 我们将从安装开始&#xff0c;深入探讨如何在项目中有效利用TailwindCSS的各项功能&…

在AWS Lambda上部署标准FFmpeg工具——Docker方案

大纲 1 确定Lambda运行时环境1.1 Lambda系统、镜像、内核版本1.2 运行时1.2.1 Python1.2.2 Java 2 启动EC23 编写调用FFmpeg的代码4 生成docker镜像4.1 安装和启动Docker服务4.2 编写Dockerfile脚本4.3 生成镜像 5 推送镜像5.1 创建存储库5.2 给EC2赋予角色5.2.1 创建策略5.2.2…

【带头学C++】----- 九、类和对象 ---- 9.10 C++设计模式之单例模式设计

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️麻烦您点个关注&#xff0c;不迷路❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ 目 录 9.10 C设计模式之单例模式设计 举例说明&#xff1a; 9.10 C设计模式之单例模式设计 看过我之前的文章的&#xff0c;简单讲解过C/Q…

遥测终端机RTU:实现远程监测和控制的重要工具

遥测终端机RTU对设备进行远程监测和控制&#xff0c;支持采集和传输数据&#xff0c;以实现对工业过程、公用事业、水文和环境的监测和管理。 遥测终端机RTU工作原理 计讯物联遥测终端机RTU通过网口、串口进行传感器/设备等现场数据采集&#xff0c;将其转换为数字信号&#xf…

【LeetCode】202. 快乐数

202. 快乐数 难度&#xff1a;简单 题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变…

高校网站建设的效果如何

高校有较高的信息承载需求、招生宣传、学校内容呈现、内部消息触达等需求&#xff0c;对高校来说&#xff0c;如今互联网深入生活各个场景&#xff0c;无论学校发展、外部拓展还是内部师生互动、通知触达等都需要完善。 除了传统传单及第三方平台展示外&#xff0c;学校构建属…

C#-数组池减少GC工作

数组池减少GC工作 通过ArrayPool类&#xff08;名称空间System.Buffers&#xff09;使用数组池&#xff0c;可减少垃圾收集器的工作&#xff0c;ArrayPool管理一个数组池&#xff0c;数组可以从这租借&#xff0c;并返回池中&#xff0c;内存在ArrayPool中管理。 创建ArrayPool…