CSS元素的显示模式

一.什么是元素显示模式

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

HTML元素一般分为块元素和行内元素两种类型。

二.元素分类

1.块元素

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

 块级元素的特点

  1. 比较霸道,自己独占一行。
  2. 高度、宽度、外边距、内边距都可以控制。
  3. 宽度默认是容器(父级宽度)的100%
  4. 是一个容器及盒子,里面可以放行内或者块级元素。

注意 

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

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

同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素。

<p><div>文字类块级元素里不能放其他块元素</div></p>

实际效果: 

 

2.行内元素 

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

行内元素特点 

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

注意 

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

3.行内块元素 

在行内元素中有几个特殊的标签 - <img/>、<input/>、<td>他们同时具有块元素和行内元素的特点。有些资料称他们为行内块元素。

行内块元素的特点

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

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

高度、宽度、外边距、内边距都可以控制(块级元素特点) 

三.元素显示模式转换 

特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一个模式的特性,

比如:想要增加链接<a>的触发范围。

转换为块元素: display:block;

转换为行内元素:display:inline;

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

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

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

相关文章

Python实现四个组成不相同且无重复的三位数

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 1.题目&#xff1a;有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; for i in range(1,…

2023感恩节大促:跨境卖家如何借助海外网红营销赢得市场关注

随着全球贸易的日益发展&#xff0c;跨境电商行业变得愈发竞争激烈&#xff0c;各家卖家纷纷寻找新的营销策略以在大促期间脱颖而出。在2023年感恩节即将来临之际&#xff0c;海外网红营销成为许多卖家关注的热点。本文Nox聚星将和大家探讨跨境卖家如何充分利用海外网红营销&am…

Leetcode—8.字符串转换整数(atoi)【中等】

2023每日刷题&#xff08;三十七&#xff09; Leetcode—8.字符串转换整数&#xff08;atoi&#xff09; 算法思想 参考k神的题解 实现代码 int myAtoi(char* s) {int len strlen(s);if(len 0) {return 0;}int boundary INT_MAX / 10;int i 0, ans 0;while(s[i] ) …

实时数据备份实践inotify和rsync联动

目录 一、实时数据备份 1.实时数据备份 2.定时任务周期性的数据备份 3.实时数据备份 4.Inotify机制 二、实践 1.实时复制环境准备 2.实时复制概念 3.InofityRsync实施复制实战 4.配置好rsync守护进程 5.检查linux是否支持inotify 6.安装inotyify--tools 7.inotify…

全民阅读营造良好氛围 助力培养孩子阅读习惯

日前,2023年全民终身学习活动周全国总开幕式在重庆举行,自2005年起,终身学习活动周已连续举办了18届,累计带动4亿多群众参与全民终身学习活动周,有效推进全面阅读。 随着全民阅读氛围的持续浓厚,阅读不再是语文学科的专项,不再是学校教育的专属,家庭、社会都在积极参与进来。尤…

web自动化测试-Selenium语法入门到精通

前言 说到自动化测试&#xff0c;就不得不提大名鼎鼎的Selenium。Selenium 是如今最常用的自动化测试工具之一&#xff0c;支持快速开发自动化测试框架&#xff0c;且支持在多种浏览器上执行测试。 Selenium学习难度小&#xff0c;开发周期短。对测试人员来说&#xff0c;如果…

【STM32外设系列】JW01三合一空气质量检测模块

&#x1f380; 文章作者&#xff1a;二土电子 &#x1f338; 关注公众号获取更多资料&#xff01; &#x1f438; 期待大家一起学习交流&#xff01; 文章目录 一、JW01模块简介二、数据格式介绍三、程序设计3.1 串口初始化3.2 串口接收中断服务函数3.3 数据解析函数 四、其他…

【数据结构(三)】双向链表(2)

文章目录 1. 基本概念2. 管理双向链表的思路3. 代码实现 1. 基本概念 管理单向链表的缺点分析: ①单向链表&#xff0c;查找的方向只能是一个方向&#xff0c;而双向链表可以向前或者向后查找。     ②单向链表不能自我删除&#xff0c;需要靠辅助节点 &#xff0c;而双向…

三柱汉诺塔

题目描述 汉诺塔是约19世纪末&#xff0c;在欧州的商店中出售一种智力玩具。它的结构如下图所示&#xff1a; 在一个平板上立有三根铁针&#xff0c;分别记为A, B, C。开始时&#xff0c;铁针 A 上依次叠放着从大到小 n 个圆盘&#xff0c;游戏的目标就是将 A 上的 n 个圆盘…

vivado调试核ILA使用技巧

ILA&#xff08;Integrated Logic Analyzer&#xff09;IP Core 是 vivado 的调试核&#xff0c;具体如何创建、调用就不详说了。这里主要记录一个 ILA 的使用技巧&#xff0c;可以大大提高调试效率。 在 Program Device 后&#xff0c;如果添加了 ILA 核&#xff0c;则会出现以…

在有springSecurity或者若依项目中获取当前系统登录的用户信息

方法一&#xff08;springSecurity自带的&#xff09; AuthenticationPrincipal 是 Spring Security 框架中的一个注解&#xff0c;用于获取当前已认证用户的 principal&#xff08;即用户身份信息&#xff09;。 方法二&#xff08;若依项目自带的&#xff09; &#xff08;1…

如何有效解决UDP协议传输问题实现快速安全的文件传输

随着互联网技术的不断发展&#xff0c;UDP协议作为一种快速、简单的传输协议被广泛应用于文件传输领域。然而&#xff0c;UDP协议传输过程中也存在着一些问题&#xff0c;如传输速度不稳定、数据丢失等&#xff0c;这些问题会影响到文件传输的效率和安全性。本文将介绍UDP协议传…

windows 查看防火墙设置命令使用方法

点击键盘上windows键&#xff0c;输入cmd&#xff0c;选择以管理员身份运行 输入下面命令查看使用说明 netsh advfirewall firewall add rule ? 发现显示不全&#xff0c;不方便看 可以输入下面命令&#xff0c;生成文件&#xff0c;方便查看 netsh advfirewall firewall ad…

webshell之无扩展免杀

1.php加密 这里是利用phpjiami网站进行加密&#xff0c;进而达到加密效果 加密前&#xff1a; 查杀效果 可以看到这里D某和某狗都查杀 里用php加密后效果 查杀效果 可以看到这里只有D某会显示加密脚本&#xff0c;而某狗直接绕过 2.dezend加密 可以看到dezend加密的特征还是…

【开源】基于Vue.js的康复中心管理系统

项目编号&#xff1a; S 056 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S056&#xff0c;文末获取源码。} 项目编号&#xff1a;S056&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员…

不存在类型变量 A, T 的实例,使 Collector<T, A, List<T>> 符合 Supplier<R>

报错信息 原因: 不存在类型变量 A, T 的实例&#xff0c;使 Collector<T, A, List<\T>> 符合 Supplier<\R> 来源 测试Stream流的map方法&#xff0c;做算法习惯基本类型定义数组。 map方法:Stream API的一部分。允许以一种声明式的方式处理数据&#xff0c…

2 Advanced Learning Algorithms

文章目录 Week1Neurons and brainNeural network layerForward propagationBuild a netural network ------codeAGIMatrix multiplication ------code Week2Tensorflow--- training detailsactivation functionsMultclass and SoftmaxClassification with multiple outputsAdam…

《算法通关村——幂运算问题解析》

《算法通关村——幂运算问题解析》 2 的幂 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 示例 1&#xff1…

网站被攻击了怎么办,有什么办法防御攻击?

近年来&#xff0c;随着互联网发展&#xff0c;出现了各种各样的网站&#xff0c;web应用&#xff0c;网络极大方便了人们的生活&#xff0c;改变了人们生活方式。而随着网络的发展普及&#xff0c;网络安全问题也困扰着用户。 许多人都曾有过这样经历&#xff0c;网站上线后&…

【项目管理】甘特图(1)——认识甘特图

哈喽&#xff0c;大家好&#xff0c;我是雷工&#xff01; 今天学习下甘特图的绘制&#xff0c;以下为学习笔记。 一、什么是甘特图 甘特图是可以直观展示项目进展随时间走势和联系的条状图。是一种常见的项目管理工具。 项目的时间用横轴表示&#xff0c;项目的进度用纵轴表…