html能插入背景的行级元素,Html元素类型:块级元素、行内元素(内联元素)和行内块级元素...

66b52468c121889b900d4956032f1009.png

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。事实上,我以前用的时候只是建立在对它们的初步了解之上,可能有时候的使用方法并不正确,这次我需要在实验的基础上去更加深入地认识它们,并且进行一些简单的对比,了解它们之间的差别与联系,从而能够正确地使用它们。

块级元素

特点每个元素都从新的一行开始,其后的元素另起一行,即使设置宽度为0,只要有高度,都会独占一行

元素的高度、宽度、行高以及顶部和内外边距(上下左右)都可设置

元素如果不设置宽度,则是它本身符容器的100%(和父元素的宽度一致)

常见的块状元素

div、p、h1~h6、ul、ol、dl、li、dd、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等block-element.png

常见的块状元素

内联元素(行内元素)

特点和其他元素都在一行上;

元素的高度、宽度及顶部和底部边距不可设置;

元素的宽度就是它包含的文字或图片的宽度,不可改变。

常见的内联元素

span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)inline-element.png

常见的内联元素

内联块级元素(行内块级元素)

特点(同时具有块级元素、内联元素的特点)和其他元素都在一行上;

元素的高度、宽度、行高以及内外边距(上下左右)都可设置

常见的内联块状元素

input、textarea、select、buttoninline-block-element.png

常见的内联块级元素

三种元素类型样式对比

代码


我是第一个div,宽度200px,高度100px,背景色为红色
我是第二个div,宽度200px,高度100px,背景色为蓝色

我是第一个span,宽度200px,高度100px,背景色为红色

我是第二个span,宽度200px,高度100px,背景色为蓝色


我是第一个button,宽度200px,高度100px,背景色为红色

我是第二个button,宽度200px,高度100px,背景色为蓝色


效果

我是第一个div,宽度200px,高度100px,背景色为红色

我是第二个div,宽度200px,高度100px,背景色为蓝色我是第一个span,宽度200px,高度100px,背景色为红色我是第二个span,宽度200px,高度100px,背景色为蓝色我是第一个button,宽度200px,高度100px,背景色为红色我是第二个button,宽度200px,高度100px,背景色为蓝色

实质上,虽然对span这个内联元素设置了宽度和高度,然而并没有起到效果。

总结

三种元素类型的特点决定了它的显示方式和一些属性的可设置性,我们再做网页开发的时候一定要用好它们,有时候如果元素标签本身的类型不能满足我们布局需要的时候,可以使用样式设置对它们进行类型修改变换。设置display:block;可以将元素转换块级元素;

设置display:inline;可以将块状元素转换为内联元素;

设置display:inline-block;可以将元素设置为内联块级元素。

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

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

相关文章

fox pro删除单条数据_Mac文件夹数据同步工具——Sync Folders Pro

Mac版同步文件夹Pro(文件夹数据同步工具)分享给大家!Mac版同步文件夹Pro是一种功能强大的文件夹数据同步工具,可帮助您同步两一个文件夹的内容,包括任何子文件夹。使用文件夹同步软件,允许您在任一方向或两…

bp神经网络预测未来五年数据_预测 | 未来五年以太网收发器出货将达2.75亿只

新闻导读LC最新预测表明,从2021年到2025年间,供应商将售出2.75亿只以太网收发器,为其带来240亿美元的收入。但由于激烈的竞争、电信和企业网络投资的放缓,以及中美敌对升级可能导致中国云数据中心升级的延迟,LC下调了未…

计算机知识竞赛决赛流程,计算机知识竞赛决赛圆满结束!还不快戳?!

原标题:计算机知识竞赛决赛圆满结束!还不快戳?!温 馨 提 示 :热烈庆祝:青海大学 “计算机知识竞赛”圆满结束!计算机莅临本场比赛的嘉宾有:计算机协会指导老师:贾金芳老师…

开关造成的毛刺_玻璃面板开关钻孔加工

玻璃面板开关,也叫做钢化玻璃开关。与传统的面板开关不同在于它是用钢化玻璃制作而成,但是同样能够达到控制电路的作用,这种开关的设计理念是为了能够达到简约时尚的作用,同时也具有美观与安全性,可以说是受到许多家庭…

html播放rtsp流,浏览器播放rtsp视频流解决方案

最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究。而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一些开源的方案…

本科计算机专业在车辆段,机电与轨道车辆工程系2021届毕业生参加成都铁路局车辆段及电务段认知实习...

2020年10月28日,在机电与轨道车辆工程系专业教师及辅导员们的带领下,轨道交通学院机电与轨道车辆工程系2017级本科车辆工程专业、机械设计制造及其自动化专业、2018级专科城市轨道交通车辆技术专业共108名学生,以及2017级本科电气工程专业45名…

java参数注解pam_吃透Java基础十:注解

一、什么是注解官方定义:注解是一系列元数据,它提供数据用来解释程序代码,但是注解并非是所解释的代码本身的一部分。注解对于代码的运行效果没有直接影响。注解有许多用处,主要如下:提供信息给编译器:编译…

广州计算机操作员培训,汕尾市计算机操作员报名考试时间地址及培训入口

生活习惯越来越多的计算机进入了人们的日常生活,随着计算机价格的逐步便宜,越来越多的家长为自己的孩子购置了计算机,但是计算机目前在我们的日常生活中,却没有扮演一个下面的角色,现在家庭中的计算机一般都是作为娱乐…

go get如何删除_Go 每日一库之 xorm

简介Go 标准库提供的数据库接口database/sql比较底层,使用它来操作数据库非常繁琐,而且容易出错。因而社区开源了不少第三方库,如上一篇文章中的sqlc工具,还有各式各样的 ORM (Object Relational Mapping,对象关系映射…

浮点加法器计算机组成原理,计算机组成原理 第二章运算方法与运算器

第二章运算方法与运算器运算方法:指算术(四则)运算和逻辑运算,在运算器的实现方法,而实现这两种运算的硬设备就是算术逻辑部件ALU(Arithmeticand Logic Unit)或称运算器由于逻辑运算及实现较简单,所以本章主要讨论计算机中算术四则…

wordpress添加html媒体文件,WordPress“添加媒体”文件时只显示上传到当前文章的附件图片...

最近子凡把很大一部分精力都分散在了泪雪建站的改版和泪雪网的运营中去了,随着泪雪网的定位和内容的新增,网站也需要有很多细节的升级,而在今天就给大家分享一个 WordPress 如何在编辑文章时“添加媒体”中默认只显示上传到本文中的附件的方法…

世界上最大的计算机硬盘,全球我最大 忆捷A600 2TB移动硬盘评测

评测工程师简介:PConline评测工程师:韩松评测工程师点评:移动领域里面的新霸主,为需要安全的人士提供了一个全新的移动理念。集安全性、技术性、容量、兼容性、稳定性、散热性等重要指标于一身。可以说忆捷A600绝对是移动硬盘领域…

tplink连接服务器失败_管家婆财贸双全连接失败,服务器端没有找到加密狗

管家婆财贸双全连接失败,服务器端没有找到加密狗管家婆财贸双全找不到狗判断步骤1、先判断电脑能否识别管家婆财贸双全加密狗我的电脑--右键--属性--硬件--设备管理器--通用串行总线控制器(或人体学接口设备)看有没有这个 SafeNet Inc. USB Key 出现,插上…

2020年秋计算机科学导论,南开大学《主干课1-计算机科学导论》2020秋主干课考试...

试卷总分:100 得分:303 R- k9 d3 ^1 } F一、单选题 (共 10 道试题,共 20 分)- z" x3 C% Z7 V |9 D p5 s1.数字836的基数可能是( )3 D) j2 h- l N OA.2" D# H% r2 b3 ]; d" iB.57 E; n, U4 v# |; L4 k% r4 u- QC.78 x) x" r3 r; y6 A2 oD.10) X3…

两直线平行交叉相乘_人教版初中数学七年级下册 平行线判定2公开课优质课课件教案视频...

平 行 线 的 判 定 一、教材分析1、主要内容及其地位本节的主要内容是平行线的判定公理及两个判定定理,由分析画平行线的过程得知,画平行线实际上就是画相等的同位角,由此得到平行线的判定公理——“同位角相等,两直线平行”&…

相关系数矩阵计算_corrplot包:相关性矩阵可视化

今天学习下相关性矩阵的可视化,可以用来可视化相关性矩阵的包有corrplot包、corrgram包、GGally包、ggcorrplot包等,这些包在大部分情况下都可以满足需求。今天先来学习corrplot包的使用,后面几天有空会详细讲解下另外三个包。目 录1. 安装和…

pat根据中序遍历和先序遍历_[leetcode/lintcode 题解] 前序遍历和中序遍历树构造二叉树...

【题目描述】根据前序遍历和中序遍历树构造二叉树.在线评测地址:九章算法 - 帮助更多中国人找到好工作,硅谷顶尖IT企业工程师实时在线授课为你传授面试技巧​www.jiuzhang.com【样例】样例 1:输入:[],[] 输出:{} 解释: 二叉树为空…

java中审核订单流程图_「数据架构」数据流程图:实例-订餐系统

数据流图(DFD)提供了系统内信息流(即数据流)的可视化表示。通过绘制数据流程图,您可以了解由参与系统流程的人员提供并交付给他们的信息、完成流程所需的信息以及需要存储和访问的信息。本文以一个订餐系统为例,对数据流图(DFD)进行了描述和说明。食品订…

jsp项目放入宝塔windows环境_商业裂变,之项目技术实战(第八节:宝塔面板介绍)...

一、宝塔简介:宝塔面板是一款服务器管理软件,支持windows和linux系统,可以通过Web端轻松管理服务器,提升运维效率。例如:创建管理网站、FTP、数据库,拥有可视化文件管理器,可视化软件管理器&…

es文件浏览器smb服务器,ES文件浏览器怎么连接电脑SMB,可以参考这篇文章

ES文件浏览器是一款多功能的手机文件/程序/进程管理器,可以在手机、电脑、远程和蓝牙间浏览管理文件。是一个功能强大的免费的本地和网络文件管理器和应用程序管理器。ES文件浏览器与电脑进行局域网链接后可以管理电脑的文件,不只是复制,还可…