CSS显示模式

目录

CSS显示模式简介

CSS显示模式的分类

块元素

行元素

行内块元素

元素显示模式的转换

使块内文字垂直居中的方法

设计简单小米侧边栏(实践)


CSS显示模式简介

元素显示模式就是元素(标签)以什么方式进行显示,比如<div></div>自己占一行,比如一行可以放多个<span></span>。当网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局网页

CSS显示模式的分类

块元素

常见的块元素有以下标签:

标题标签
<h1></h1>~<h6></h6>段落标签
<p></p><div></div>无序列表标签
<ul><li></li><li></li>
</ul>
有序列表标签
<ol><li></li><li></li>
</ol>

其中,<div></div>是典型的块元素标签

块元素标签的特点:

  • 每一个标签独占一行。
  • 高度,宽度、外边距以及内边距都可以控制。
  • 宽度默认是容器(父级宽度)的100%。
  • 一个容器及盒子,里面可以放行内或者块级元素

📌

文字类的元素内不能放块级元素,例如<p></p>中不可以放块级元素,特别是不能放<div> </div>同理, <h1></h1>~<h6></h6>等都是文字类块级标签,里面也不能放其他块级元素

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块元素</title><style>div{width: 200px;height: 200px;background-color: red;}h1 {background-color: blue;}</style>
</head>
<body><h1>这是一段内容</h1><div>这是一段内容</div>
</body>
</html>

效果如下:

如果在文字类标签中放入可以放置任何内容的块元素则会出现问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块元素</title><style>div{width: 200px;height: 200px;background-color: red;}h1 {background-color: blue;}</style>
</head>
<body><h1>这是一段内容</h1><p><div>这是一段内容</div></p><div>这是一段内容</div>
</body>
</html>

问题如下:

行元素

常见的行元素标签:

链接标签
<a></a>粗体标签
<strong></strong>
<b></b>斜体标签
<em></em>删除线标签
<del></del>
<s></s>下划线标签
<ins></ins>
<u></u><span></span>

<span></span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点:

  • 相邻行内元素在一行上,一行可以显示多个
  • 高、宽直接设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素

📌

链接里面不能再放链接,特殊情况链接 <a></a>里面可以放块级元素,但是给 <a></a> 转换一下块级模式最安全

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行元素</title><style>span {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><span>这是一段内容</span>
</body>
</html>

效果如下:

行内块元素

常见的行内块标签:

<img />
<input />
<td></td>

行内块元素同时具有块元素和行内元素的特点:

  • 和相邻行内元素(或者行内块元素)在一行上,但是他们之间会有空白缝隙。
  • 一行可以显示多个行内块元素(行内元素特点)。
  • 默认宽度就是它本身内容的宽度(行内元素特点)。
  • 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式的转换

即一个模式的元素需要另外一种模式的特性,比如想要增加链接 <a></a>的触发范围

转换方式:

  • 转换为块元素:display: block;
  • 转换为行内元素:display: inline;
  • 转换为行内块:display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内块元素</title><style>/* 将a标签转换为行内块元素 */a {display: inline-block;width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><a href="#">链接</a><a href="#">链接</a>
</body>
</html>

效果如下:

使块内文字垂直居中的方法

在CSS中没有直接对文字设置垂直居中的属性,但是可以采用行高的设置来解决这个问题

当行高与当前块高度相同时,文字会被上下两个间隙挤在块的中间

同理,当行高大于当前块高度时,则此时因为上下间隙均等分布,所以上面的间隙会占据大部分的块空间,从而使文字向下移动,反之当行高小于当前块高度时,使文字向上移动

设计简单小米侧边栏(实践)

参考图如下:

参考小米商城链接:小米商城

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单小米侧边栏</title><style>a {/* 设置每一个链接的大小,前提是为块元素 */display: block;width: 237px;height: 50px;/* 设置每一个链接的背景颜色 */background-color: rgb(80, 85, 92);/* 设置每一个链接的文字缩进 */text-indent: 2em;/* 设置每一个链接文字的行高,使内容文本垂直居中 */line-height: 50px;}/* 设置链接默认显示效果 */a:link {color: whitesmoke;text-decoration: none;}/* 设置当鼠标悬停时链接的效果 */a:hover {background-color: rgb(205, 103, 0);}</style>
</head>
<body><a href="#">手机</a><a href="#">电视</a><a href="#">家电</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">耳机 音箱</a><a href="#">健康 儿童</a><a href="#">生活 箱包</a><a href="#">智能 路由器</a><a href="#">电源 配件</a>
</body>
</html>

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

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

相关文章

让15万的车也配激光雷达,速腾发布中长距「千元机」MX

‍作者 |老缅 编辑 |德新 4月15日&#xff0c;国内头部激光雷达公司速腾聚创发布了新一代中长距激光雷达MX。 相比较其产品配置&#xff0c;最令人惊喜的是它的价格。 「MX将以低于200美元的价格作为基础&#xff0c;实现第一个项目的量产。」速腾聚创CEO邱纯潮在发布会现场…

ABAP 批次换算率和批次辅单位数量计算

文章目录 ABAP 批次换算率和批次辅单位数量计算第一种方式批次换算率获取辅单位完整程序运行结果 第二种方式核心程序 CONVERSION_EXIT_ATINN_INPUT&#xff1a;特征值转换示例 ABAP 批次换算率和批次辅单位数量计算 如果一个物料有批次双单位&#xff0c;并且在报表里面展示批…

初识LangChain的快速入门指南

LangChain 概述 LangChain是一个基于大语言模型用于构建端到端语言模型应用的框架&#xff0c;它提供了一系列工具、套件和接口&#xff0c;让开发者使用语言模型来实现各种复杂的任务&#xff0c;如文本到图像的生成、文档问答、聊天机器人等。 LangChain简化了LLM应用程序生…

Mysql The last packet sent successfully to the server was 0 milliseconds ago.

项目启动后&#xff0c;报错&#xff0c;但是我的navicat 数据库连接工具是连接上的&#xff0c;没有问题的&#xff0c;但是程序就是连接不上。端口放开了&#xff0c;防火墙也放开了 先说问题&#xff1a;是网络问题&#xff0c; 如何解决&#xff1a;因为我的机子上又跑了…

Pytest精通指南(18)多种手段过滤或升级警告

文章目录 前言使用命令行实现过滤未处理警告&#xff0c;执行结果升级警告忽略警告忽略警告摘要 使用装饰器实现过滤装饰方法装饰类装饰模块 使用配置文件实现过滤 前言 在 pytest 中执行测试时&#xff0c;可能会出现警告&#xff0c;这些警告通常是由于代码中存在某些可能导致…

代码随想录算法训练营Day58|LC739 每日温度LC496 下一个更大元素I

一句话总结&#xff1a;单调栈专题&#xff01; 原题链接&#xff1a;739 每日温度 很简单的单调栈入门题。 在使用单调栈解决此题之前&#xff0c;先要想到&#xff1a;单调栈要什么时候用呢&#xff1f;怎么才能想到用单调栈呢&#xff1f; 什么时候用单调栈呢&#xff1f;…

海信发布《黑神话:悟空》定制电视E8N新品,重塑大屏游戏体验

4月17日&#xff0c;在“AI美好生活”2024海信电视E8系列新品发布会上&#xff0c;海信电视官宣成为《黑神话&#xff1a;悟空》全球官方合作伙伴。同时&#xff0c;海信电视还为广大游戏玩家带来了《黑神话&#xff1a;悟空》的显示CP&#xff0c;推出了官方定制电视——旗舰新…

基于SpringBoot的“论坛管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“论坛管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 论坛管理系统结构图 前台首页功能界面图 用户登录…

「GO基础」在Windows上安装Go编译器并配置Golang开发环境

文章目录 1、安装Go语言编译程序1.1、下载GoLang编译器1.2、安装GoLang编译器 2、配置Golang IDE运行环境2.1、配置GO编译器2.1.1、GOROOT 概述2.1.2、GOROOT 作用2.1.2、配置 GOROOT 2.2、配置GO依赖管理2.2.1、Module管理依赖2.2.2、GOPATH 管理依赖 2.3、运行GO程序2.3.1、创…

C# 整数转罗马数字

罗马数字包含以下七种字符:I&#xff0c;V&#xff0c;X&#xff0c;L&#xff0c;C,D和M。 例如&#xff0c;罗马数字2写做 II &#xff0c;即为两个并列的 1。12 写做XII&#xff0c;即为XII。27写做 XXVII,即为XXV II 。 通常情况下&#xff0c;罗马数字中小的数字在大的数字…

一个不同长度元素排序找行和列的需求

1、需求&#xff1a;三种长度的元素&#xff0c;分别是4、8、12&#xff0c;每一行的长度是12&#xff0c;超过12就排到下一行&#xff0c;我们将这三种类型的多个元素打乱&#xff0c;然后找到这些元素对应的行和列。 如下图&#xff1a; 2、解决思路&#xff1a; 创建一个长…

Ubuntu 20.04.6下载

下载地址&#xff1a;https://cn.ubuntu.com/download 下载版本&#xff1a;ubuntu-20.04.6-desktop-amd64.iso

OpenHarmony实战开发-如何实现进入页面,点击动画卡片,动画播放并且文本发生变化。

介绍 Lottie是一个适用于OpenHarmony的动画库&#xff0c;它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画&#xff0c;并在移动设备上进行本地渲染&#xff0c; 可以在各种屏幕尺寸和分辨率上呈现&#xff0c;并且支持动画的交互性&#xff0c;通过…

C++stack,queue,priority_queue容器(个人笔记)

C栈队列优先级队列 1.熟悉stack接口以及使用1.1stack的接口1.2stack的模拟实现1.3stack的一些笔试题 2.熟悉queue接口以及使用2.1queue的接口2.2queue的模拟实现2.3queue的笔试题 3.熟悉priority_queue的接口以及使用&#xff08;底层堆&#xff09;3.1priority_queue的接口3.2…

spdlog C++日志管理 安装和下载

下载地址 https://github.com/gabime/spdlog?tabreadme-ov-file 使用git拉取代码 按照操作进行编译 点击spdlog.sln&#xff0c;用vs2019打开&#xff0c;进行编译debug x64 每项都编译一下&#xff0c;会生成安装包 安装包下载路径 https://download.csdn.net/download…

【AI学习中常见专业英文缩写词的解释】

前言&#xff1a; 为了看着不无聊&#xff0c;文中插入了一些AI生成的狗图片 AI(Artificail Intelligence)人工智能&#xff1a; 让机器模拟和展示人类智能的技术。 GAI(Generative Artificail Intelligence)生成式人工智能: 利用复杂的算法、模型和规则&#xff0c;从大规…

mysql数据库表的数据显示到前端tableView

首先我们在ui视图设计中引入TableView, 定义一个model QSqlQueryModel *modelnew QSqlQueryModel(ui->tableView);model->setQuery(query);//将查询结果绑定到模型上ui->tableView->setModel(model); 将tableView内容设置成model然后就可以出现数据库的数据。示…

2.8 构建gradle环境

构建gradle环境 目录一、安装Java Development Kit (JDK)二、下载Gradle三、解压Gradle四、配置环境变量五、验证安装六、gradle构建java项目七、eclipse配置gradle 目录 一、安装Java Development Kit (JDK) Gradle是基于Java开发的&#xff0c;所以首先需要安装JDK。你可以从…

春秋云境:CVE-2022-32991[漏洞复现]

从CVE官网查询该漏洞相关信息 该漏洞是由于welcome.php中的eid参数包含了SQL注入漏洞 则我们的目标就在于寻找welcome.php地址以及相关的可注入eid参数 开启靶机 先在页面正常注册、登录一个账号。密码随便填 进入了home目录&#xff0c;这里有三个话题可以选择开启 随便选…

【服务器部署篇】Linux下Nginx的安装和配置

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…