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;

四,snipaste截图工具

五,单行文字垂直居中技巧

让文字的行高等于盒子的高度 

line-height=height

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

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

相关文章

深入探索:缓冲区溢出漏洞及其防范策略

在网络安全的广阔领域中&#xff0c;缓冲区溢出漏洞一直是一个重要的议题。这种漏洞&#xff0c;如果被恶意利用&#xff0c;可能会导致严重的安全问题&#xff0c;包括数据泄露、系统崩溃&#xff0c;甚至可能被攻击者利用来执行恶意代码。在本文中&#xff0c;我们将深入探讨…

vue的8大生命周期

第072个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使用&#xff0c;computed&a…

python30-Python的运算符结合性和优先级

1&#xff09;所有的数学运算都是从左向右进行的&#xff0c;Python 语言中的大部分运算符也是从左向右结合的&#xff0c;只有单目运算符、赋值运算符和三目运算符例外&#xff0c;它们是从右向左结合的&#xff0c;也就是说&#xff0c;它们是从右向左运算的。 2&#xff09…

MATLAB环境下基于深层小波时间散射网络的ECG信号分类

2012年&#xff0c;法国工程学院院士Mallat教授深受深度学习结构框架思想的启发&#xff0c;提出了基于小波变换的小波时间散射网络&#xff0c;并以此构造了小波时间散射网络。 小波时间散射网络的结构类似于深度卷积神经网络&#xff0c;不同的是其滤波器是预先确定好的小波…

Filter 实现过滤符合条件的请求并落库

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、配置过滤器类 二、定义数据表、实体类、Mapper 2.1 DDL 2.2 实体类 2.3 Mapper 三、创建一个过滤器 四、实现 Nacos 配置…

Tkinter教程21:Listbox列表框+OptionMenu选项菜单+Combobox下拉列表框控件的使用+绑定事件

------------★Tkinter系列教程★------------ Tkinter教程21&#xff1a;Listbox列表框OptionMenu选项菜单Combobox下拉列表框控件的使用绑定事件 Tkinter教程20&#xff1a;treeview树视图组件&#xff0c;表格数据的插入与表头排序 Python教程57&#xff1a;tkinter中如何…

Unity类银河恶魔城学习记录4-7 P60 Counter‘s attack window 源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Enemy.cs using System.Collections; using System.Collections.Generic; …

Redis 单线程

文章目录 Redis单线程架构Redis 单线程访问速度IO多路复用原理 Redis单线程架构 Redis的单线程架构的效果为&#xff1a;Redis的单线程是对于服务端而言的&#xff0c;Redis允许多个Redis用户端同时在线操作&#xff0c;但同时只有一个用户端在和服务端交互。多个用户同时发送…

Flink流式数据倾斜

1. 流式数据倾斜 流式处理的数据倾斜和 Spark 的离线或者微批处理都是某一个 SubTask 数据过多这种数据不均匀导致的&#xff0c;但是因为流式处理的特性其中又有些许不同 2. 如何解决 2.1 窗口有界流倾斜 窗口操作类似Spark的微批处理&#xff0c;直接两阶段聚合的方式来解决…

参观宋代建筑,感受传统魅力

为了更好地了解和传承中华文化&#xff0c;同时深入挖掘其在现代社会的传承与发展&#xff0c;2024年2月8日&#xff0c;曲阜师范大学计算机学院“古韵新声&#xff0c;格物致‘知’”社会实践队队员饶子恒深入考察中国传统建筑和文化&#xff0c;前往山东省菏泽市郓城县的水浒…

Android Studio安装过程遇到SDK无法安装问题解决

首次打开studio遇到该类问题&#xff0c;需要下载SDK文件&#xff0c;后又发现SDK由于是Google源&#xff0c;无法进行正常安装&#xff0c;故转而进行SDK的镜像安装。 一、下载SDK Tools 地址&#xff1a;AndroidDevTools - Android开发工具 Android SDK下载 Android Studio…

探讨CSDN等级制度:博客等级、原力等级、创作者等级

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…