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是一种功能强大的文件夹数据同步工具,可帮助您同步两一个文件夹的内容,包括任何子文件夹。使用文件夹同步软件,允许您在任一方向或两…

初中生学计算机视频,推荐一下适合中学生的在线视频学习网站

英语语法省略句精讲一、并列复合句中某些相同成分的省略。1. This beeper works well,but that one doesnt (work well).这个寻呼机工作正常,但那个就不行。2. All uranium atoms do not have the same atomic weight. Some of them weigh 234 units&…

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

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

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

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

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

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

大工14春《计算机应用基础》在线测试2,大工14春《计算机应用基础》在线测试2...

大工14春《计算机应用基础》在线测试2单选题 判断题一、单选题(共 10 道试题,共 40 分。)1. 在Excel 2010中,存储数据的表格被称为()。A. 文件B. 文件夹C. 工作表D. 图表-----------------选择:C2. 如果改变Excel 2010工作表的打印方向(如横向…

python应声虫代码_前端大牛们都学过哪些东西?

一步一步来。CSS不能编程?用Less、Sass、Stylus、甚至直接用 Absurd,框架除了Bootstrap还有很多。JS写多了很麻烦?jQuery。移动开发?Zepto.js。结构不好?找框架,Backbone.js是MVC,AngularJS和Em…

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

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

python建模大赛算法_Python数据分析kaggle-Titanic+天池-工业蒸汽量预测建模算法

做数据分析许久了, 简单写写比赛的数据分析项目思路一 使用逻辑回归/随机森林等对kaggle比赛项目 "给出泰坦尼克号上的乘客的信息, 预测乘客是否幸存"进行简单的数据分析过程, 使用的工具是Jupyter Notebook项目提供了两份数据,分别是titanic_train.csv(训练集,用来构…

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

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

中职学校计算机教学探讨,中职学校计算机专业教学探讨

【摘要】伴随科技飞速发展,信息技术发展迅猛,计算机教学应告别以往的呆板的传统教学方式,由于职业学校的特殊性,身为职业学校的计算机教师,在教学方法上做出重大的变革,创造出一条适合自身特点的新路,鼓励学生发挥特长,努力实现自己的目标,成为企业需要的人才。【关键词】中职&…

阿甘修理机器人cd_剑网三遗失的美好奖励之阿甘

处理 SSI 文件时出错遗失的美好顾名思义能够拿到曾经失去的美好之物,剑网三的安史之乱资料片推出已经有一段时日了,但是现在火热度不减和官方推出的充值回馈送遗失的美好道具有着分不开的关系。遗失的美好里面包括各种独特的坐骑趣味挂件还有能够使用的小物品&#…

襄阳社区招聘计算机考什么时候,襄阳招聘网格员什么时候报名?

2020年襄阳招聘网格员什么时候开始报名呢?襄阳社区网格员招聘,一直是各位考生非常关注的招聘,襄阳人事考试网也为大家准备了关于2020年襄阳招聘网格员的相关资讯。很多考生听说过社区工作者,但是还是不够清楚作为一名社区网格员的…

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

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

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

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

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

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

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

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

python整数预测_时间序列预测全攻略(附带Python代码) | 36大数据

介绍时间序列(简称TS)被认为是分析领域比较少人知道的技能。(我也是几天前才知道它)。但是你一定知道最近的小型编程马拉松就是基于时间序列发展起来的,我参加了这项活动去学习了解决时间序列问题的基本步骤,在这儿我要分享给大家。这绝对能帮助你在编程…

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

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

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

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