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;

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

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

相关文章

window 搭建 Flutter for Android的环境(二)

最近又重置了笔记本系统&#xff0c;因此又得重新部署Flutter环境&#xff0c;所以就再重新整理了一下&#xff1a; 下载安装好Android、git下载安装好对应版本的Flutter 下载地址:部署环境变量&#xff1a; ANDROID_HOME C:\Users\Administrator\AppData\Local\Android\SdkC:…

winserver2012远程黑屏且无法操作

当我们遇到远程windows服务器发现GUI图形加载异常&#xff0c;黑屏显示&#xff0c;且无法进行任何操作&#xff0c;我们可以尝试以下方法。 1.尝试远程命令重启 #11.11.11.11 远程服务器ip #Administrator 远程桌面用户名 #12345678 密码 #shutdown.exe -r -f 在一分钟…

【计算机网络】HTTPS协议原理

文章目录 一、相关基础概念1.HTTPS 是什么2.什么是"加密"3.为什么要加密4.常见的加密方式5.数据摘要 && 数据指纹 二、HTTPS 的工作过程 -- 加密方式1.只使用对称加密2.只使用非对称加密3.双方都使用非对称加密4.非对称加密 对称加密5.中间人攻击6.证书7.非…

力扣144 二叉树的前序遍历 Java版本

文章目录 题目描述递归方法代码 非递归方法代码 题目描述 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xf…

ElementUI Data:Table 表格

ElementUI安装与使用指南 Table 表格 点击下载learnelementuispringboot项目源码 效果图 el-table.vue&#xff08;Table表格&#xff09;页面效果图 项目里el-table.vue代码 <script> export default {name: el_table,data() {return {tableData: …

蓝桥杯省赛无忧 数位DP 课件78 数位DP

01 算法概述 02 问题引入 03 算法分析 04 例题

《QDebug 2024年1月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Repeator 的 delegate 在 remove 移除时的注意事项 Qt Bug Tracker&#xff1a;https://bugreports.qt.io/browse/QTBUG-47500 Repeator 在调用 remove 函数之后&#xff0c;对应的 Item 会立即释放&#xff0c;后续就…

如何基于文档的内容实现 AI 对话功能,以 Documate 为例

前言 在 ChatGPT 出现之时&#xff0c;社区内也出现过 把 React 官方文档投喂给它 &#xff0c;然后对它进行提问的实践。但是&#xff0c;由于每次 ChatGPT 对话能接受的文本内容对应的 Token 是有上限的&#xff0c;所以这种使用方式存在一定的手动操作成本和不能复用的问题…

Linux eject命令教程:如何安全地弹出你的设备(附实例详解和注意事项)

Linux eject命令介绍 eject命令在Linux中用于弹出可移动设备。这通常是光盘&#xff0c;但也可以是软盘&#xff0c;磁带&#xff0c;或JAZ或ZIP磁盘。此命令还可以控制一些多碟CD-ROM切换器&#xff0c;一些设备支持的自动弹出功能&#xff0c;以及关闭一些CD-ROM驱动器的光盘…

使用Ettus USRP X440对雷达和EW系统进行原型验证

概览 无论是保障己方平台的生存能力&#xff0c;还是扰乱敌方频谱使用&#xff0c;以电磁(EM)频谱为主导都是任务成功的主要因素。电磁频谱操作(Electromagnetic Spectrum Operation, EMSO)需要使用战术系统来监测敌方的频谱活动、定位其发射器并帮助己方制定行动计划。软件无…

新 Ubuntu 14.04 服务器的基本配置

简介 在为新服务器设置最低配置之后&#xff0c;大多数情况下都建议进行一些额外的步骤。在本指南中&#xff0c;我们将继续配置我们的服务器&#xff0c;处理一些推荐但可选的程序。 先决条件和目标 在开始本指南之前&#xff0c;您应该先运行 Ubuntu 14.04 初始服务器设置…

离散数学——特殊关系(笔记及思维导图)

离散数学——特殊关系&#xff08;笔记及思维导图&#xff09; 笔记来自【电子科大】离散数学 王丽杰

DIY制作硬模空心耳机壳使用的是什么原材料?

制作硬模空心耳机壳的原材料可以根据不同的制作要求和材料特性进行选择。以下是一些常见的原材料&#xff1a; 塑料&#xff1a;塑料是一种常用的耳机壳制作材料&#xff0c;具有轻便、耐用、防水等特点。常见的塑料材料包括ABS、PC、PA等&#xff0c;可以根据具体要求进行选择…

vue+springboot项目开发,使用MySQL示例数据库sakila

vuespring boot项目开发&#xff0c;使用MySQL示例数据库sakila 从零开始开发一个简单的前后端分离项目&#xff0c;实现对MySQL示例数据库sakila中film表的数据展示。 环境配置 使用IDEA进行后端开发&#xff08;Spring Boot&#xff09; 安装IDEA&#xff1a;参考JDK的安…

20240131在ubuntu20.04.6下使用whisper不同模式的比对

20240131在ubuntu20.04.6下使用whisper不同模式的比对 2024/1/31 16:07 首先你要有一张NVIDIA的显卡&#xff0c;比如我用的PDD拼多多的二手GTX1080显卡。【并且极其可能是矿卡&#xff01;】 2、请正确安装好NVIDIA最新的驱动程序和CUDA。可选安装&#xff01; 3、配置whisper…

开发实践9_OnlinePlatform笔记

学习朔宁夫开发工程师课程笔记。 0架构&#xff1a; 01. MyDoc\PycharmProjects\ProjOnline&#xff0c;注册一个index app备主页用。 02. python manage.py startapp users, python manage.py startapp course. install apps. 03. total url urlpatterns [# http://127.…

Springboot项目启动后浏览器不能直接访问接口,而postman可以访问?

在云服务器上部署springboot后端时&#xff0c;项目启动后浏览器不能直接访问接口,而postman可以访问。这是当时困扰了我大半天的小问题&#xff0c;在我打开防火墙和阿里云安全组之后还是没解决。然后在网上搜了很多很多资料&#xff0c;以为是浏览器访问权限或者是https什么证…

[力扣 Hot100]Day23 反转链表

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 出处 思路 经典考研题&#xff0c;用头插法解决。 代码 class Solution { public:ListNode* reverseList(ListNode* head) {if(!head || !head->next) return head;List…

蓝桥 第三周 分治 排序

3.1 分治法介绍及关键点解析_哔哩哔哩_bilibili 分治&#xff1a;分解 解决 合并 快速排序 单向扫描分区法 public static void main(String[] args) {// TODO Auto-generated method stubint[] arr {1,6,3,6,2,8,6,1,0,7};quickSort1(arr,0,arr.length-1);for(int i:arr) {…

shell脚本初始化mysql密码

如果你想在shell脚本中初始化MySQL的密码&#xff0c;你可以使用以下的方法。首先&#xff0c;你需要知道MySQL的root用户密码。在初始化过程中&#xff0c;你可以设置一个新的密码。 以下是一个简单的例子&#xff0c;说明如何在shell脚本中初始化MySQL的root密码&#xff1a…