前端基础(十)_标签分类（行级标签、块级标签、行块标签）

news2025/1/15 19:33:39

标签分类

可以分为三类：行级标签、块级标签、行块标签

行级元素

常用的行级元素：span、b、i、em、strong、a、del、sub、sup等

注意：

1、默认宽度随元素的内容的变化而变化；
2、默认情况下高度由内容撑开；
3、不会独立成行，相邻的行内元素会排列一同一行当中，直到一行排不下，才会换行；
4、换行和空格存在的情况下会被解析；
5、具有部分盒模型特征 宽高无效 padding margin 只显示左右 边框保留；
6、使用：一般用来容纳文本和其他内联元素，通常行元素被包含在块元素中使用

例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 100px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>

</html>

页面：
在这里插入图片描述

块级元素

常用的块级元素：h1~h6、p、div、ul、li、ol、dl 、dt、dd等

注意：

1、默认宽度撑满父元素的宽度；
2、默认高度由内容撑开；
3、元素垂直布局；
4、具有全部的盒模型特征；
5、使用：块级元素中可以添加块级元素、行级元素、行块元素

例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 100px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <!-- <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div> -->

  <!-- 块状元素 -->
  <div>div标签</div>
  <p>p标签</p>
  <h1>h1标签</h1>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
  </ul>
</body>

</html>

页面：
在这里插入图片描述

行块元素

常用的行块元素：img、input等

注意：

1、具有块级标记特征：可以设置宽高内填充外边距；
2、具有行级标记的特征：默认横向显示，直到一行拍不下才会换行，空格会被解析

例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 500px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <!-- <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div> -->

  <!-- 块状元素 -->
  <!-- <div>div标签</div>
  <p>p标签</p>
  <h1>h1标签</h1>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
  </ul> -->

  <!-- 行块元素 -->
  <div class="div2">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
  </div>

</body>
</html>

页面：
在这里插入图片描述
第一行放不下的时候，自动换行展示

类型转换–display属性

display:none； 元素不会被显示—隐藏元素； 不占位
display:block; 元素的显示，将元素显示为块级元素，具有块级元素的特征
display:inline; 将元素显示为行级元素，具有行级元素的特征
display:inline-block; 将元素显示为行块元素，具有行块元素的特征

**1、display:block例子：**

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 200px;
      border: 2px solid red;
      font-size: 15px;
      color: red;
    }

    /* a,
    span,
    b,
    i,
    em,
    strong {
      display: block;
    } */
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>


</html>

页面：
在这里插入图片描述
加上display:block：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 200px;
      border: 2px solid red;
      font-size: 15px;
      color: red;
    }

    a,
    span,
    b,
    i,
    em,
    strong {
      display: block;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>
</html>

页面：
在这里插入图片描述

2、display:inline例子：
根据css的特性，优先继承最近属性，我们可以使用上面的例子，后面再加上属性display:inline即可

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 200px;
      border: 2px solid red;
      font-size: 15px;
      color: red;
    }

    a,
    span,
    b,
    i,
    em,
    strong {
      display: block;
    }

    a,
    span,
    b,
    i,
    em,
    strong {
      display: inline;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>


</html>

页面：
在这里插入图片描述
3、display:inline-block

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .div2 {
      width: 300px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }

    .div2>div,
    .div2>p,
    .div2>h1,
    .div2>ul,
    .div2>ul>li {
      display: inline-block;
    }
  </style>
</head>

<body>

  <!-- 块状元素 -->
  <div class="div2">
    <div>div标签</div>
    <p>p标签</p>
    <h1>h1标签</h1>
    <ul>
      <li>li 1</li>
      <li>li 2</li>
    </ul>
  </div>
</body>

</html>

页面：
在这里插入图片描述

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

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

相关文章

【快速学习系列】Spring理解，IOC、DI、AOP的使用和代码示例及spring扩展（bean作用域、自动装配类型和拆分策略）

【快速学习系列】Spring理解，IOC、DI、AOP的使用和代码示例及spring扩展（bean作用域、自动装配类型和拆分策略）

【快速学习系列】Spring理解&#xff0c;IOC、DI、AOP的使用和代码示例及spring扩展&#xff08;bean作用域、自动装配类型和拆分策略&#xff09; Spring概述 Spring设计理念 Spring是面向Bean的编程 Spring三大核心容器&#xff1a; Beans&#xff0c;Core&#xff0c;Conte…
阅读更多...
使用vue-cli创建一个新项目

使用vue-cli创建一个新项目

1&#xff0c;在文件夹中打开命令行输入&#xff1a; vue create educationcloud-pc 2&#xff0c;这里我选择手动创建配置 3&#xff0c;我会选择我用到的几个 空格键是选中 取消 a是全选 4&#xff0c;这里我暂时使用vue2版本 5&#xff0c;是否使用history路由 6&#xf…
阅读更多...
skyBox 近地时角度倾斜问题，天空倾斜

skyBox 近地时角度倾斜问题，天空倾斜

近地出现角度不对问题 将下面代码放入js文件&#xff0c;引入项目。 本质是在Cesium.skyBox的代码上修改&#xff0c;并给Cesium重新增添近地的天空盒 需要注意的是&#xff0c;代码最后的Cesium.GroundSkyBox SkyBoxOnGround 调用方式&#xff1a; import ‘…/…/路径’ 然后…
阅读更多...
地址汇总详细讲解（内附非纯末梢）

地址汇总详细讲解（内附非纯末梢）

♥️作者&#xff1a;小刘在这里 ♥️每天分享云计算网络运维课堂笔记&#xff0c;疫情之下&#xff0c;你我素未谋面&#xff0c;但你一定要平平安安&#xff0c;一 起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的&#xff0c;绽放&#xff0c;…
阅读更多...
5.2 词向量Word Embedding

5.2 词向量Word Embedding

在自然语言处理任务中&#xff0c;词向量&#xff08;Word Embedding&#xff09;是表示自然语言里单词的一种方法&#xff0c;即把每个词都表示为一个N维空间内的点&#xff0c;即一个高维空间内的向量。通过这种方法&#xff0c;实现把自然语言计算转换为向量计算。 如 图1 …
阅读更多...
转转用户画像平台实践

转转用户画像平台实践

文章目录1. 背景2. 什么是用户画像3. 标签画像的应用场景4. 转转用户画像平台的实践4.1 系统结构图4.2 标签画像的构建原则4.3 标签类型和规则4.4 标签的生产加工4.5 标签的存储设计4.6 用户洞察4.7 用户分群计算4.8 ID-MAPPING5 未来规划6 总结1. 背景 转转作为二手电商交易领…
阅读更多...
Linux C编程一站式学习笔记2

Linux C编程一站式学习笔记2

Linux C编程一站式学习笔记 chap2 常量、变量和表达式 本书以C99为标准 一.继续hello world 加入更多注释的hello world 可以用ctrl(shift)v复制到vim里面 #include <stdio.h>/* * comment1* main: generate some simple output*/int main(void) {printf(/* comment2 */…
阅读更多...
【JS ES6】了解Symbol类型

【JS ES6】了解Symbol类型

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 ajax学习 目录声明定义Symbol的几种方式使用Symbol解决字符串耦合问题扩展特性与对象属性保护声明定义Sym…
阅读更多...
Qt5.6.1移植海思Hi3521d（三）

Qt5.6.1移植海思Hi3521d（三）

系列文章目录 Qt5.6.1移植海思Hi3521d&#xff08;一&#xff09; Qt5.6.1移植海思Hi3521d&#xff08;二&#xff09; 前言 本章讲解如何将编译好的qt程序移植到海思Hi3521D板子上&#xff0c;并且能够启动qt界面&#xff0c;和正常显示中文 一、移植qt库 创建qt.conf&#…
阅读更多...
不再封控，各高校要如何开展教学

不再封控，各高校要如何开展教学

疫情政策逐步放开&#xff0c;石家庄、福州、广西等地各高校发布寒暑假和期末课程安排。 广西科技大学要求从2022年12月13日下午起&#xff0c;停止所有线下课程&#xff0c;未完成的教学任务启动线上教学。 在疫情这三年里&#xff0c;线上教学已经成为学校的主要教学手段&…
阅读更多...
Python操作Excel

Python操作Excel

文章目录xlrd模块安装xlrd库打开Excel文件读取获取指定工作表操作指定行操作指定列操作指定单元格使用示例xlrd模块 xlrd是Python处理Excel表格数据的一个模块&#xff0c;能够对Excel中的数据进行读取。 安装xlrd库 在命令行或终端中输入以下命令进行安装&#xff1a; pip…
阅读更多...
python数据分析 之 pandas数据统计

python数据分析 之 pandas数据统计

目录 一&#xff1a;数据集准备 二&#xff1a;加载文件 三&#xff1a;分组操作进行统计 一&#xff1a;数据集准备 可以创建一个txt&#xff0c;并放置pycharm工程目录下 下面是博主的数据集测试&#xff0c;所用数据&#xff0c;需要的自取 1001,Chinese,1,80 1001,Chine…
阅读更多...
富芮坤蓝牙FR801xH开发环境搭建

富芮坤蓝牙FR801xH开发环境搭建

富芮坤蓝牙FR801xH方案开发资源包网盘下载链接&#xff1a;网盘 提取码&#xff1a;30qu 搭建过程&#xff1a; 安装Keil开发工具:mdk525.exe 可以从Keil官网下载&#xff1a;http://www.keil.com/files/eval/MDK525.EXE 也可以使用网盘tools目录里的包装包 其中需要注意选择的…
阅读更多...
Qt扫盲-QScrollArea理论总结

Qt扫盲-QScrollArea理论总结

这里写目录标题1. 概述2. 滚动条策略3. 子控件4. 尺寸提示1. 概述 QScrollArea 用于显示滚动区域框架内的子控件的内容。如果控件超过框架的大小&#xff0c;视图可以提供滚动条&#xff0c;以便可以查看子控件的整个区域。子控件必须使用 setWidget() 指定。但是在 QDesigner…
阅读更多...
【车载开发系列】UDS诊断---请求下载（$0x34）

【车载开发系列】UDS诊断---请求下载（$0x34）

【车载开发系列】UDS诊断—请求下载&#xff08;$0x34&#xff09; UDS诊断---请求下载&#xff08;$0x34&#xff09;【车载开发系列】UDS诊断---请求下载&#xff08;$0x34&#xff09;一.概念定义二.产生背景三.报文格式1&#xff09;请求报文2&#xff09;肯定响应3&#x…
阅读更多...
[附源码]Nodejs计算机毕业设计基于的民宿租赁系统Express(程序+LW)

[附源码]Nodejs计算机毕业设计基于的民宿租赁系统Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…
阅读更多...
MySQL处理非结构化JSON数据(附 MyBatis-Plus 集成)

MySQL处理非结构化JSON数据(附 MyBatis-Plus 集成)

概述 MySQL 自5.7起开始支持JSON格式的非结构化数据&#xff0c;并且在8.x版本进行性能优化 关于 JSON JSON&#xff08;JavaScript Object Notation, JS对象简谱&#xff09;是一种轻量级的数据交换格式。它基于 ECMAScript&#xff08;European Computer Manufacturers Asso…
阅读更多...
Spring Cloud Alibaba

Spring Cloud Alibaba

Spring Cloud Alibaba第五部分 第二代 Spring Cloud 核心组件&#xff08;SCA&#xff09;第 1 节 Nacos 服务注册和配置中心1.1 Nacos 介绍1.2 Nacos 单例服务部署1.3 微服务注册到Nacos1.4 负载均衡1.5 Nacos 数据模型&#xff08;领域模型&#xff09;1.6 Nacos 配置中心1.6…
阅读更多...
智能家居DIY创意之智能灯泡

智能家居DIY创意之智能灯泡

一、什么是智能灯 传统的灯泡是通过手动打开和关闭开关来工作。有时&#xff0c;它们可以通过声控、触控、红外等方式进行控制&#xff0c;或者带有调光开关&#xff0c;让用户调暗或调亮灯光。 智能灯泡内置有芯片和通信模块&#xff0c;可与手机、家庭智能助手、或其他智能…
阅读更多...
水下潜航器的建模与控制

水下潜航器的建模与控制

(线性系统理论大作业) 题目 水下潜器模型&#xff0c;可能是潜艇或者鱼雷等对象。一个主推进螺旋桨&#xff0c;前后两对水平陀翼&#xff0c;后面一对垂直陀翼。   潜器前进过程中&#xff0c;通过调节助推进螺旋桨推力&#xff0c;以及三对陀翼的角度变化&#xff0c;对潜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023