CSS的元素显示模式

news2025/2/21 4:20:46

元素显示模式是什么？：

由于网页中的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示，比如<div>独占一行，比如一行可以放多个<span>标签

html元素一般就分为块元素和行内元素两种类型

块元素：

常见的块元素有<h1>---<h6>,<p>,<div>,<ul>,<ol>，<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

1：独占一行
2：高度，宽度，外边距以及内边距都可以控制
3：宽度默认是容器（父级宽度）的100%
4：是一个容器及盒子，里面可以放很多行内或者块级元素

举例：

<head>
    <style>
        div {
            width: 500px;
        }
    </style>
</head>

<body>
    <div><img src="教学楼.jpg"/></div>
    <div><img src="餐厅.jpg"/></div>
    <div><img src="图书馆.jpg"/></div>
</body>

显示：

在这里插入图片描述
注意：

文字类的元素不能使用块级元素

<p>标签主要用于存放文字，因此<p>里面不能放块级元素特别是不能放

<h1>-<h6>等都是文字类块级标签，里面不能放其他块级元素

行内元素：

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s><ins>,<u>,<span>等，其中<span>标签是典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

1：相邻行内元素在一行上，一行可以显示多个。
2：高，宽直接设置是无效的
3：默认宽度就是它本身内容的宽度
4：行内元素只能容纳文本或者其他行内元素。

举例：

<head>
    <style>
        .span1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <span class="span1">我是行内元素1</span>
    <span>我是行内元素2</span>
    <span>我是行内元素3</span>
</body>

显示：

在这里插入图片描述

注意：

链接里面不能再放链接

特殊情况链接里面可以放块元素，但是给<a>里面可以放块级元素，但是给<a>转换一下块级模式会更安全。

行块内元素：

在行内元素中有几个特殊的标签------<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。

行内块元素的特点：

1：和相邻行内元素(行内块)在一行上但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点)

2:默认宽度就是它们本身内容的宽度(行内元素特点)

3:高度，行高，外边距以及内边距都可以控制（块级元素的特点）。

举例：

<head>
    <style>
        .span1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    我是行内块元素1<input class="span1"></input>
    <td>我是行内块元素2</td>
    我是行内块元素3<input></input>
</body>

显示：
在这里插入图片描述
通过两种显示，我们不难发现，我们在head中设置的样式对于行内元素来说是毫无意义的，但是它却能很好的改变行内块元素的高度等信息。

CSS的元素显示模式总结：

在这里插入图片描述

元素显示模式转换：

特殊情况下，我们需要元素模式的转换---->一个模式的元素需要另一个模式的特性。

比如：想要增加<a>的触发范围。

转化方法：

转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块元素:display:inline-block;

举例：

<head>
    <style>
        div{
            width: 300px;
            height: 100px;
            background-color:aquamarine;
        }
        
    </style>
</head>
<body>
    <div><a href="#">java</a>我是Java</div>
    <div><a href="#">web</a>我是wen</div>
    <div><a href="#">c语言</a>我是C语言</div>
</body>

显示：
在这里插入图片描述通过上面的学习我们知道

是一个块级元素，它单独占据一行，当我们想将如上所示的三个超链接显示在同一行上，就可以使用模式转换：

添加：

 display: inline;

显示：

在这里插入图片描述 注：我们在style中设置的宽度和高度并不会在行内元素中体现出来，行内元素的高度和宽度与它内容有关。

添加：

display:inline-block;

显示：

在这里插入图片描述

get一个实用小工具：

snipaste:可将一个界面上的内容通过截图的方式，贴到电脑屏幕上，这样就不需要来回的切换界面啦

使用方法：
在这里插入图片描述使用完成后直接关闭即可！

在这里插入图片描述

或者还可以使用快捷方式：

F1可以截图，同时测量大小，设置箭头，书写文字等

F3在桌面置顶显示

点击图片，alt可以取色(按下shift可以切换取色模式)

按下esc取消图片显示

实现单行文字垂直居中：

CSS并未提供可使文字垂直居中的代码，这里我们可以使用一个小tips来实现：

具体方法即为：使文字的行高等于盒子的高度 便可以让文字在当前盒子内垂直居中

单行文字垂直居中的原理：

line-height用来设置行高：
在这里插入图片描述文字与盒子的关系：
在这里插入图片描述
行高=盒子的高度：文字居中

<head>
    <style>
        div{
            height: 40px;
            background-color:aquamarine;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>我是Java</div>
</body>

显示：

在这里插入图片描述
行高<盒子的高度：文字偏上

div{
            height: 40px;
            background-color:aquamarine;
            line-height: 10px;
        }

显示：

在这里插入图片描述 行高>盒子的高度：文字偏下

div{
            height: 40px;
            background-color:aquamarine;
            line-height: 60px;
        }

显示：

在这里插入图片描述

CSS的背景：

背景属性可以设置颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

背景颜色：

background-color属性定义了元素的背景颜色。

background-color:颜色值;

举例：

<head>
    <style>
        div{
            height: 300px;
            background-color:antiquewhite;
        }
    </style>
</head>
<body>
    <div><font color="red">我是Java</font></div>
</body>

显示：

在这里插入图片描述一般情况下，元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色。

背景图片：

background-image属性描述了元素的背景图像，实际开发常用于logo的设计或者是一些小图标之类的，优点是非常方便控制位置。

//none表示无背景图
//url---->使用绝对或相对地址指定背景图片
background-image:none|url(url)

举例：

<head>
    <style>
        div{
            height: 300px;
            background-image: url(图书馆.jpg);
        }
    </style>
</head>
<body>
    <div><font color="red">我是Java</font></div>
</body>

显示：

在这里插入图片描述

background-repeat: repeat;//平铺效果如上所示（默认效果）----在纵轴和横轴向上平铺

背景平铺：

background-repeat用来设置背景图片是否需要平铺，默认是平铺的。

background-repeat: no-repeat;//不平铺效果如下所示

在这里插入图片描述

background-repeat: repeat-x;//沿x轴平铺

在这里插入图片描述

background-repeat: repeat-y;//沿y轴平铺

在这里插入图片描述
页面元素既可以添加背景颜色也可以添加背景图片，但是同时添加这两个属性，背景图片会将背景颜色覆盖。

背景位置：

通过background-position属性对其进行设置！

background-position: 方位名词;

举例：

background-position: right top;//显示在页面的右上角
background-position: left top;//显示在页面的左上角

注:如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致，但是如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精准单位：

举例：

background-position: 500px 500px;//指定x坐标和y坐标

background-position: 500px;//指定x坐标，y坐标上垂直居中

参数是方位名词：

background-position: top;//第一个参数确定-->top  y轴顶部对齐，第二个参数省略 x轴是水平居中显示的

显示如下：

显示

background-position: right;//水平一定是靠右侧对齐，第二个参数省略-->y轴是垂直居中对齐的

显示如下：

在这里插入图片描述

参数是混合单位：

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

background-position: 500px top;

背景图像的固定：

background-attachment：用来设置背景图像是否固定或者随着页面的其余部分滚动，它常用于制作时差滚动效果

background-attachment：scroll | fixed
//scroll：背景图像随对象内容进行滚动
//fixed：背景图像固定

背景图片复合写法：

为了简化背景属性的代码，我们可以将有关background的属性写在同一个background中：

例如：

background:背景颜色      背景图片地址    背景平铺  背景图像滚动  背景图片位置
background：transparent   url(img.jpg)   repeat-y   fixed       top;

背景半透明色：

background：rgba(0,0,0,0.3);

最后一个参数为alpha透明度，其取值范围在0-1之间，0.3也可以直接写成.3

注意：背景半透明是指将对应的背景半透明化，其中的内容并不会受到任何影响

效果举例：
在这里插入图片描述

CSS的背景总结：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

线索二叉树

线索二叉树

目录 一、线索二叉树的类型定义 二、各种线索化的二叉树 三、中序线索二叉树的算法 完整代码&#xff1a; 一、线索二叉树的类型定义 typedef struct BTNode {ElemType data;//数据域struct BTNode* lchild;//左孩子或线索指针struct BTNode* rchild;//右孩子或线索指针int lt…
阅读更多...
锐捷MPLS隧道单域实验配置

锐捷MPLS隧道单域实验配置

目录 配置AS100内的IGP路由协议 配置AS内的LDP 配置PE-PE的MP-BGP协议 在PE侧配置PE-CE的路由协议 在CE侧配置PE-CE的路由协议 将CE的路由重发布进MP-BGP中 将MP-BGP的路由重发布进CE中 MPLS隧道——单域基础理论讲解_静下心来敲木鱼的博客-CSDN博客_mpls隧道https://bl…
阅读更多...
Python安装

Python安装

一、官网下载 二、安装 找到下载的安装包&#xff0c;直接双击安装 三、设置环境变量 1、mac自带的python版本 2、修改为新下载的python3.11版本 1&#xff09;修改.bash_profile vi ~/.bash_profile 修改完成后&#xff0c;生效该文件&#xff1a;source ~/.bash_profile…
阅读更多...
如何写出公众号爆文？分享你一份爆文写作秘籍

如何写出公众号爆文？分享你一份爆文写作秘籍

新媒体时代&#xff0c;想要产出一篇公众号爆文真的是难于上青天&#xff01;现在公众号内容同质化严重&#xff0c;如果你没有一些新颖的观点和真本事&#xff0c;是无法从成千上万的公众号中脱颖而出的&#xff01; 如何写出公众号爆文&#xff1f;为什么你看了那么多写作干货…
阅读更多...
java--07 面向对象

java--07 面向对象

altenter 文件名和public名保持一致 两个变量指向同一个对象的内存图&#xff1a;如果被一个对象更改 &#xff0c;另外一个对象跟着更改 垃圾回收机制&#xff1a; altenter &#xff1a;添加方法 ctraltt:添加循环 构造器 this关键字 ​​​​​​​ 封装&#x…
阅读更多...
周志华机器学习（6）：支持向量机

周志华机器学习（6）：支持向量机

周志华机器学习&#xff08;6&#xff09;&#xff1a;支持向量机6 支持向量机6.1 间隔与支持向量6.2 对偶问题&#xff08;dual problem&#xff09;6.3 核函数6.4 软间隔与正则化基本是大段摘录加上一些自己的补充&#xff0c;去除了冗余的话。6 支持向量机 6.1 间隔与支持向…
阅读更多...
实体店应该围绕什么核心来打造自己体系多模式多平台的生态

实体店应该围绕什么核心来打造自己体系多模式多平台的生态

大家好&#xff0c;我是阿璋&#xff0c;阿璋时不时会发布一些创新的电商资讯&#xff0c;经过电商与疫情的反复摧残&#xff0c;实体商家的收益大不如从前&#xff0c;营业额一跌再跌&#xff0c;迎来实体寒潮&#xff0c;本期给大家分享一个实体店结合共享消费积分联盟广告生…
阅读更多...
封神之作，超火Java面试突击手册，进大厂真的就这么简单？

封神之作，超火Java面试突击手册，进大厂真的就这么简单？

2022年的互联网行业竞争越来越严峻&#xff0c;面试也是越来越难&#xff0c;一直以来我都想整理一套完美的面试宝典&#xff0c;奈何难抽出时间&#xff0c;这套完整的java后端学习路线以及1000道的Java面试手册我整理了整整1个月&#xff0c;上传到Git上目前star数达到了30K …
阅读更多...
MCE | 阿尔兹海默症发病机制

MCE | 阿尔兹海默症发病机制

阿尔兹海默症 (Alzheimers Disease, AD)&#xff0c;俗语常说的“老年痴呆症”&#xff0c;在奥斯卡提名短片《勿忘我》中以动画形式展现出了阿尔兹海默症患者的世界&#xff0c;动画中的老人&#xff0c;逐渐失去自己的记忆&#xff0c;甚至忘记最爱的人&#xff0c;他的脑海中…
阅读更多...
学习软件测试需要注意的几点

学习软件测试需要注意的几点

⒈ 测试主页技能掌握 关于软件测试&#xff0c;所需要的专业技能&#xff1a; l 基础测试技术&#xff1a;黑盒测试、白盒测试、测试用例设计等; l 软件测试方法&#xff1a;单元测试、功能测试、集成测试、系统测试、性能测试; l 软件测试知识&#xff1a;基础的测试流程管理、…
阅读更多...
孩子没有感统失调的表现，还有必要做感统训练吗？

孩子没有感统失调的表现，还有必要做感统训练吗？

孩子没有感统失调表现&#xff0c;是不是就可以放心了&#xff1f; 孩子训练一段时间&#xff0c;进步非常大&#xff0c;是不是就不需要再继续做训练了&#xff1f; 答案是&#xff1a;无论孩子能力发展如何&#xff0c;感统训练都必不可少。 为什么每个孩子都需要感统训练…
阅读更多...
Git——IDEA集成GitHub详细操作

Git——IDEA集成GitHub详细操作

目录 一、 设置GitHub账号 二、分享项目到GitHub 三、push推送本地库到远程库 3.1 第一种方法&#xff1a; 3.2 第二种方法&#xff1a;SSH 四、pull拉取远程库到本地库 五、clone克隆远程库到本地 一、 设置GitHub账号 可以使用下面这个token登录&#xff0c;第一个太慢太慢…
阅读更多...
CodeBlocks C++开发环境的配置及使用

CodeBlocks C++开发环境的配置及使用

CodeBlocks C开发环境的配置及使用 本文引用自作者编写的下述图书; 本文允许以个人学习、教学等目的引用、讲授或转载&#xff0c;但需要注明原作者"海洋饼干叔 叔"&#xff1b;本文不允许以纸质及电子出版为目的进行抄摘或改编。 1.《Python编程基础及应用》&#x…
阅读更多...
前端开发性能优化方案-14条

前端开发性能优化方案-14条

1、减少http请求数量。 单独得一个图片&#xff0c;js,css都是一个请求&#xff0c;将同类合并可以有效得减少请求个数。 2、使用CDN(内容分发网络) 需要新增服务器减少请求得站点个数&#xff08;靠钱解决需要买服务器&#xff09;。 3、添加Expire/Cache-Control头 Expi…
阅读更多...
GitHub标星百万的程序员转架构之路，竟被阿里用作内部晋升参考

GitHub标星百万的程序员转架构之路，竟被阿里用作内部晋升参考

架构师是很多程序员的奋斗目标&#xff0c;也可以说是职场生涯的一个重要选择方向&#xff0c;今天我就跟大家聊一聊如何从一个程序员成长为一个架构师。 首先我们先来看看架构师的定义到底是什么&#xff1f; 系统架构师是一个不仅需要主持整体又得需体察局部瓶颈并且依据详…
阅读更多...
Vulkan API的性能及兼容性

Vulkan API的性能及兼容性

1&#xff09;Vulkan API的性能及兼容性 ​2&#xff09;FrameTiming.gpuFrameTime获取GPU耗时有什么条件 3&#xff09;MMO里面的寻路网格如何制作 4&#xff09;万国这种联盟边界的实现思路 这是第314篇UWA技术知识分享的推送。今天我们继续为大家精选了若干和开发、优化相关…
阅读更多...
（九）笔记.net学习之委托和事件、多播委托、观察者模式

（九）笔记.net学习之委托和事件、多播委托、观察者模式

1.委托得声明、实例化和调用 &#xff08;1&#xff09;委托&#xff1a;本质是一个类&#xff0c;继承自System.MulticastDelegate,里面内置了几个方法&#xff0c;如构造函数等。 &#xff08;2&#xff09;声明委托&#xff1a;委托无方法体&#xff0c;可以有返回值或参数…
阅读更多...
Linux文件系统和软硬连接

Linux文件系统和软硬连接

目录 1.文件组成 2.文件系统 3.软硬连接 1.文件组成 先来看看文件的属性部分&#xff1a; 文件属性由权限&#xff0c;硬连接数量&#xff0c;所属组&#xff0c;所属人&#xff0c;大小和修改时间构成。 再来看看文件由的一个的东西inode 793395 793328就是inode 2.文件系…
阅读更多...
聚观早报 |中国企业成世界杯最大金主；马斯克恐失去世界首富位置

聚观早报 |中国企业成世界杯最大金主；马斯克恐失去世界首富位置

今日要闻&#xff1a;中国企业成世界杯最大金主&#xff1b;马斯克恐失去世界首富位置&#xff1b;刘强东称对不起京东高管&#xff1b;苹果在沪最大代工厂重启招工&#xff1b;威马汽车上海全员工资打折中国企业成世界杯最大金主 据报道&#xff0c;作为全球最为瞩目的赛事之一…
阅读更多...
谁懂，java后端面试多次惨败并发的苦！幸好有阿里首发并发编程学习文档，系统全面还便于上手！

谁懂，java后端面试多次惨败并发的苦！幸好有阿里首发并发编程学习文档，系统全面还便于上手！

什么是并发 并发指的在操作系统中&#xff0c;是指一个时间段中有几个程序都处于已启动运行到运行完毕之间&#xff0c;且这几个程序都是在同一个处理机上运行&#xff0c;但任一个时刻点上只有一个程序在处理机上运行。 并发和并行是十分容易混淆的概念。并发指的是多个任务交…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023