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,一经查实,立即删除!

相关文章

Java正则表达式之账号检验与判断基础

考虑到此时读者不知道何为正则表达式&#xff1a; 我需要验证一个字符串是否符合qq号码的规则&#xff0c;我们采取已有知识进行验证 import java.util.Scanner;public class Main{public static void main(String[] args){//正则表达式理解为一种规则//这种规则就是用来校验…

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;如果…

householder进行矩阵QR分解

文章目录 1. Householder 进行QR分解 1. Householder 进行QR分解 A Q R (1) AQR\tag1 AQR(1) A [ 1 2 0 1 1 0 3 1 1 0 3 2 1 2 0 2 ] (2) A\begin{bmatrix}1&2&0&1\\\\1&0&3&1\\\\1&0&3&2\\\\1&2&0&2\end{bmatrix}\tag2 A…

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

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

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

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

丹麦商标申请途径 商标注册申请所需文件 丹麦商标注册流程

丹麦商标申请途径 丹麦商标注册的申请手续简单&#xff0c;可以通过以下三种途径进行申请&#xff1a; 1、单一国家注册&#xff1a;通过单个国家的方式向丹麦专 利商标局申请商标注册; 2、欧盟商标注册&#xff1a;丹麦是欧洲共合体之一,因此也可以通过欧盟来进行商标注册;…

Python学习笔记--过解决一个需求问题来了解闭包

网络上介绍 Python 闭包的文章已经很多了,本文将通过解决一个需求问题来了解闭包。 这个需求是这样的,我们需要一直记录自己的学习时间,以分钟为单位。就好比我学习了 2 分钟,就返回 2 ,然后隔了一阵子,我学习了 10 分钟,那么就返回 12 ,像这样把学习时间一直累加下去…

三柱汉诺塔

题目描述 汉诺塔是约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协议传…

模拟实现auto_ptr

template<class T>class auto_ptr {public:auto_ptr(const T* ptr):_ptr(ptr){}//管理权转移&#xff0c;会产生悬挂指针问题。auto_ptr(auto_ptr<T>& ap):_ptr(ap._ptr){ap._ptr nullptr;}~auto_ptr(){if (_ptr){delete _ptr;}}T& operator*(){return *_…

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

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

CTRL C V

H-3-Y8TVVE9KN4-RM8LDMMJR2-LU7AYSZM29-JU56GRJWHC

webshell之无扩展免杀

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