块元素、内联元素、行内块元素

一、介绍:

CSS元素划分成块元素行内元素(内联元素)行内块元素等多种常用类型。也就是说:在CSS中,元素根据其在页面上的布局方式被分为不同的显示类型。

     背景:HTML负责定义网页的结构和内容,而CSS则负责控制这些内容的样式和布局。它们共同协作,构建出功能丰富、视觉吸引人的网页。

二、详细: 

(1)块元素

简要:块元素是一个标准的盒子,可以对盒子的任一构成部分进行设置。默认情况下独占一行。

详细:块元素(block element)在HTML中占据其父元素(容器)的全部宽度,前后都会带有换行符,将在其前后都创建新的行。块元素在页面中以块的形式呈现,其特点是,每个块元素通常都会独自占据一行或多行,其宽度自动填满其父元素,高度为其子元素的高度和上下边距的总和,即可以对其设置宽度、高度、内外边距等属性。

常见的块元素有 :

<div><p><h1>-<h6><ol><ul><li><dl><dt><dd><table><form><header>定义 section 或 page 的页眉 ]

<footer>定义 section 或 page 的页脚 ]

<section>定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分。

等等。

块元素在页面布局中扮演着重要的角色,用于构建页面的主要结构和内容区块。 

(2)行内元素(内联元素)

简要:行内元素是一个非标准的盒子,设置宽度、高度、垂直内边距、垂直外边距无效,并且与相邻元素共享一行

详细:在HTML规范中,内联元素也被称为行内元素(inline element)。它们的主要特点是与其他元素都在同一行上按从左至右的顺序显示,不单独占一行。同时,内联元素的宽度、高度以及顶部和底部的边距都不能设置,其宽度通常就是内容的宽度。内联元素通常用于容纳文本或其他内联元素,并常常被包含在块级元素中使用。

常见的内联元素主要包括:

<a>:超链接元素,用于创建链接到其他页面或资源的文本或图像 ]

<span>用于对文本中的一部分进行样式设置或标识。]

[ <img>图像元素,用于在网页上显示图像 ]

<br><strong>加粗文本,其中<strong>表示重要性,而<b>只表示加粗样式。]<em> <i>强调文本,其中<em>通常表示为斜体,而<i>只表示斜体样式,不带有强调的语义。]

<label><label> 元素通常通过 for 属性与表单元素关联。for 属性的值应该与相应表单元素的 id 属性的值相匹配(这个在后面的HTML5表单应用再去讨论)。这样,当用户点击标签时,浏览器就知道应该将焦点移到哪个表单元素上。]

<input><select><textarea><input><select><textarea>元素则用于创建表单控件。]

<u><u> 标签在 HTML 中表示拼写错误或其他需要标注为非正式的文字,通常以下划线形式呈现文本。早期的 HTML 版本中用于表示拼写错误,但在 HTML5 中,其含义已经泛化,可以表示任何形式的拼写或语法上的标注,而不仅仅限于错误。]

等等。

(3)行内块元素:

简要行内块元素是块元素和行内元素的结合体,可以对盒子的任一构成部分进行设置,并且与相邻元素共享一行。

详细:行内块元素(inline-block element)是内联元素的一种特殊类型。它们具有内联元素的特性,即与其他元素在同一行内显示,但同时又可以设置宽度、高度和对齐等属性,这使得它们在布局上更加灵活行内块元素的默认宽度是其内容本身的宽度,但可以通过CSS进行设置。常见的行内块元素可以通过给内联元素添加:display: inline-block;样式来创建。

以下是一些常见的行内块元素:

  1. <img>:图片元素。在默认情况下,图片元素就是行内块元素。它不会独占一行,并且可以设置宽度和高度。
  2. <input>:输入框元素。这也是一个行内块元素,通常用于表单中收集用户输入。
  3. <button>:按钮元素。用于创建可点击的按钮,也是行内块元素。
  4. <textarea>:多行文本输入框。虽然它看起来像块级元素,但在CSS中默认是行内块元素。
  5. <select>:可创建单选或多选菜单,即下拉列表元素。允许用户从预定义的选项中选择一个值,是行内块元素。(后面在HTML5表单应用会讨论
  6. <label>:标签元素。用于定义表单控件的描述,但通常配合display: inline-block;来使用以设置宽度等样式。

其中一部分标签介绍: 

(1)这是<select>标签,其中<select>标签中的<option>标签用于定义列表中的可用选项。

   <select><option>苹果</option><option>香蕉</option><option>樱桃</option></select>

 运行效果:

(4)相互转换: 

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

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

相关文章

OC foudation框架(上)学习

foundation框架 文章目录 foundation框架字符串&#xff08;NSString && NSMutableString&#xff09;NSString的其他功能NSMutableString 日期与时间 &#xff08;NSDate&#xff09;2.1 日期与时间&#xff08;NSDate&#xff09;2.2日期格式器日历与日期组件定时器&…

Java入门基础学习笔记8——注释

1、注释&#xff1a; 注释是写在程序中对代码进行解释说明的文件&#xff0c;方便自己和其他人查看&#xff0c;以便理解程序的。 package cn.ensource.note;/**文档注释文档注释 */ public class NoteDemo {public static void main(String[] args) {// 单行注释System.out.…

word转pdf的java实现(documents4j)

一、多余的话 java实现word转pdf可用的jar包不多&#xff0c;很多都是收费的。最近发现com.documents4j挺好用的&#xff0c;它支持在本机转换&#xff0c;也支持远程服务转换。但它依赖于微软的office。电脑需要安装office才能转换。鉴于没在linux中使用office&#xff0c;本…

SwiftUI 调整视图内容周围间隙(Content Margins)的“时髦”方法

概述 在 SwiftUI 开发的应用中,往往在小屏设备(比如 iPhone)上布局良好的 App 放到大屏(iPad)上后就会“一塌糊涂”。因为它们一味的只想着“占据”却不知道“舍弃”。 从 iOS 17.0(iPad 17.0)开始苹果提供了原生的视图修改器方法专注于处理此事。 在本篇博文中,您将…

Python实战开发及案例分析(17)—— 粒子群算法

粒子群优化&#xff08;Particle Swarm Optimization, PSO&#xff09;是一种计算方法&#xff0c;它通过模拟鸟群的社会行为来解决优化问题。粒子群优化算法中的每个“粒子”代表问题空间中的一个候选解决方案。每个粒子都会根据自己的经验以及邻居的经验来调整其在解空间中的…

windows轻松管理nodejs 版本 升/降级 卸载等等

#nvm-windows 管理nodejs 版本神器# 不经意升级了node版本导致原有项目启动异常, 看到了node版本管理神器:nvm-windos 1,先下载 nvm >> git 选择如下安装包或 nvm-setup.exe文件 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.12 2. 双击安装,下一…

centos追加扩容整块磁盘容量

centos追加扩容整块磁盘容量 原磁盘/dev/vdb有100G&#xff0c;整块直接挂载到了/data目录下后来追加了200G到/dev/vdb上[rooti-QxxV9WFa3-2 ~]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sr0 11:0 1 386K 0 rom vda 253:0 0 100G 0 disk └─vda1…

如何在本地调试THUDM/chatglm2-6b大模型

模型下载网站&#xff1a;https://www.opencsg.com/models 安装git&#xff1a; sudo apt install git安装git-lfs&#xff0c;这个很重要。 sudo apt-get install git-lfs下载模型&#xff1a;THUDM/chatglm2-6b mkdir THUDM cd THUDMgit lfs intsall git clone https://p…

Win10 WSL2 Ubuntu 22.04 配置深度学习环境

文章目录 WSL安装Anaconda下载Anaconda安装包安装配置conda命令conda换国内源conda初始化shell环境conda init手动源激活脚本&#xff1a; 安装Windows上的NVIDIA GPU驱动WSL安装CUDA Toolkit安装12.1版本环境配置报错1报错2 内存不足导致安装崩溃问题描述问题分析问题解决 WSL…

用docker 搭建 vscode for web

前言: 每当我们换机子或者是电脑内容不够的时候&#xff0c;总想着能用web方式使用某些软件&#xff0c;这样子&#xff0c;你无论何时何地都能愉快的开发了&#xff0c;今天来安排下使用容器技术去搭建vscode。 查找合适的Docker镜像 你可以使用官方的Code Server Docker镜像…

vue2人力资源项目6角色管理

elementUi编写表格样式及分页组件 <template><div class"container"><div class"app-container"><!--角色管理内容--><div class"role-operate"><el-button type"primary">添加角色</el-butt…

并行执行参数的应用技巧——《OceanBase 并行执行》系列 5

OceanBase 提供了一套参数&#xff0c;实现对并行执行功能的初始化和调优。 在OceanBase 的启动过程中&#xff0c;系统会根据租户的 CPU 数量和特定的配置项 px_workers_per_cpu_quota 来自动计算出默认的并行执行控制参数。当然&#xff0c;用户也可以选择不采用这些默认值…

一键开启,盲盒小程序里的梦幻奇遇

在这个充满惊喜与未知的数字时代&#xff0c;盲盒小程序以其独特的魅力成为了许多人的新宠。只需一键开启&#xff0c;你就能踏入一个充满梦幻奇遇的世界&#xff0c;探索未知的惊喜与乐趣。 盲盒小程序不仅仅是一个简单的购物平台&#xff0c;它更是一个充满神秘与惊喜的宝藏库…

ETL中如何执行Python脚本

Python的解读 Python 是一种高级、通用的编程语言&#xff0c;由荷兰程序员吉多范罗苏姆&#xff08;Guido van Rossum&#xff09;于1990年代初设计并发布。Python的设计哲学强调代码的可读性和简洁性&#xff0c;它的语法清晰且表达力强&#xff0c;使得开发者能够以更少的代…

GT2512-STBA 三菱触摸屏12.1寸型

T2512-STBA参数说明&#xff1a;12.1"、SVGA 800*600、65536色、TFT彩色液晶显示屏、AC电源、32MB内存 三菱触摸屏GT2512-STBA性能规格详细说明&#xff1a; [显示部] 显示软元件&#xff1a;TFT彩色液晶显示屏 画面尺寸&#xff1a;12.1寸 分辨率&#xff1a;SVGA 80…

【Vue】Vue的核心

目录 计算属性-computed插值语法实现methods实现计算属性实现使用使用总结&#xff1a; 监视属性-watch监视的两种写法&#xff1a;深度监视备注&#xff1a; computed和watch之间的区别 绑定样式class样式绑定字符串写法数组写法对象写法 style样式绑定对象式1对象式2数组式 条…

Web数字孪生引擎

Web数字孪生引擎是指用于在Web上创建和运行数字孪生的软件平台。它们通常提供一组API和工具&#xff0c;用于连接到实时数据源、可视化数据并创建交互式体验。Web数字孪生引擎被广泛应用于各种应用&#xff0c;例如工业物联网、智能建筑、城市管理和公共安全等。北京木奇移动技…

Unable to locate the .NET SDK

问题描述&#xff1a; vs2019 加载项目时&#xff0c;提示如下&#xff1a; Unable to locate the .NET SDK as specified by global.json, please check that the specified version is installed. 项目中没有globan找al.json 文件 先使用&#xff1a; dotnet --list-sdks 命…

玩游戏专用远程控制软件

玩游戏专用远程控制软件&#xff1a;实现远程游戏的新体验 随着网络技术的不断发展和创新&#xff0c;远程控制软件已经逐渐渗透到我们生活的方方面面&#xff0c;尤其是在游戏领域。玩游戏专用远程控制软件&#xff0c;作为这一趋势下的产物&#xff0c;为玩家提供了全新的游…

linux开发知识点笔记汇总(F1C200S)

1、buildroot常用make 命令 常用命令 意义 make menuconfig buildroot菜单 make uboot-menuconfig uboot菜单 make linux-menuconfig linux菜单 make busybox-menuconfig busybox菜单 make 编译buildroot make linux-rebuild 重新编译linux make uboot-rebuild 重…