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版本的安装包可能在下载过程中出现损坏。 本人尝试过全网说的…

无公网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;并延…

在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…

高校网站建设的效果如何

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

Html5响应式全开源网站建站源码系统 附带完整的搭建教程

Html5响应式全开源网站建站源码系统是基于Html5、CSS3和JavaScript等技术开发的全开源网站建站系统。它旨在为初学者和小型企业提供一套快速、简便的网站建设解决方案。该系统采用响应式设计&#xff0c;可以自适应不同设备的屏幕大小&#xff0c;提高用户体验。同时&#xff0…

Clean My Mac X2024解锁完整版本

Clean My Mac X是Mac上一款美观易用的系统优化清理工具&#xff0c;也是小编刚开始用Mac时的装机必备。垃圾需要时时清&#xff0c;电脑才能常年新。Windows的垃圾清理工具选择有很多&#xff0c;但是Mac的清理工具可选择的就很少。 今天给大家推荐大名鼎鼎的Clean My Mac X&a…

elasticsearch-head 启动教程

D:\elasticsearch-head-master>grunt server ‘grunt’ 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 npm install -g grunt-clinpm install

Leetcode—190.颠倒二进制位【简单】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—190.颠倒二进制位 算法思路 实现代码 class Solution { public:uint32_t reverseBits(uint32_t n) {uint32_t res 0;for(int i 0; i < 32 && n > 0; i) {res | (n & 1) << (31 - i);n >&…

第二十一章,网络通信

网络协议 IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmission Control Protocol/Internet Protocol。Internet 依靠TCP/IP协议&#xff0c;在全球范围内实现了不同硬件结构、不同操作系统…

机器学习实战:预测波士顿房价

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天来学习一下机器学习中一个非常经典的案例&#xff1a;预测波士顿房价&#xff0c;在此过程中也会补充很多重要的知识点&#xff0c;欢迎大家一起前来探讨学习~ 一、导入数据 在这个项目中&#xff0c;我们利用马萨诸…

element el-pagination solt 使用

起初只是想修改一下&#xff0c;共多少条的颜色&#xff0c;和跳转至 发现并不支持 网上找通过js修改&#xff0c;因为我这是在 dialog里面的 好像并不能适用 mounted() {document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue &quo…