HTML中有很多的标签(元素),可以按照这些元素在网页中所占的空间情况进行分类。具体可以这样简单的分类:

1.块级元素:指的是在网页中该元素独自占据网页的一行显示区域,即当使用了该元素后,该元素会使下一个元素在下一行展示,也就是产生换行;根据资料的定义是:标签的display属性值为block;

2.行级元素:指的是网页中该元素不会独自占据网页的一整行区域,使用该元素后,还可以直接在该元素的后面显示另一个元素,也就是不会换行;或者根据资料的定义是:标签的display属性值为inline;

3.行内块元素:这类元素的display=“inline-block”,它们的效果是:同样不会换行,可以直接在后面显示其他的元素。

具体代表:

1.块级元素:

2.行级元素:

3.行内块级元素:

使用小技巧:

1.一般情况下,不要使用行内元素嵌套块级元素;

2.在布局中,可以使用元素的display属性,改变元素的默认类别。例如:将a 元素的display设为block后,可以作为块级元素使用,这样可以让链接和其他的元素一起放在同一个块中。

HTML中的元素分类的更多相关文章

  1. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  2. Web前端开发基础 第四课(CSS元素分类)

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  3. html标签元素分类

    元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...

  4. CSS学习笔记之元素分类

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...

  5. HTML标签元素分类(HTML基础知识)

    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...

  6. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  7. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  8. HTML之元素分类(HTML基础知识)

    HTML之元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素). a.块级元素(独占一行) 块级元素:其最明显的特征 ...

  9. JavaScript中数组元素删除的七大方法汇总

    原文链接:https://blog.csdn.net/u010323023/article/details/52700770 在JavaScript中,除了Object之外,Array类型恐怕就是最常 ...

随机推荐

  1. ping端口是否开放(windows,macos,linux)

    windows中ping端口:tcping命令 1. tcping 非自带命令,首先安装tcping命令,也可以去官网:http://www.elifulkerson.com/projects/tcp ...

  2. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  3. Note of The Linux Command Line

    心得 在用鼠标点击的图形化桌面之前,单纯用键盘操作软件的时代已经很成熟了.并且还在这样延续下去.鼠标不是电脑操作的唯一模式,至少不是程序员的. 在黑色屏幕下,因为没有鼠标所以只能用按键来操作软件.包括 ...

  4. POJ 2771

    #include <iostream> #include <string> #define MAXN 505 using namespace std; int _m[MAXN] ...

  5. 利用Warensoft Stock Service编写高频交易软件--DEMO

    利用Warensoft Stock Service编写高频交易软件 无论是哪种交易软件,对于程序员来讲,最麻烦的就是去实现各种算法.本文以SAR算法的实现过程为例,为大家说明如何使用Warensoft ...

  6. Java生成某段时间内的随机时间

    上代码: import java.text.SimpleDateFormat; import java.util.Date; public class DateUtil { /** * 生成随机时间 ...

  7. Apater适配器模式(结构型模式)

    1.概要 适配:即在不改变原有实现的基础上,将原先不适合的接口转换成适合的接口. what is Apater?适配,这个概念在生活中无处不在,比如你的iphone 4手机充电器坏了,这是时候只有一个 ...

  8. 基于sql service会话共享,实现SSO

    1:session的存储基于sql service数据库来存储 2:修改sql service中会话管理的系统存储过程 3:实现几个站点的会话共享 4:应用共享会话,实现单点登录

  9. This Gradle plugin requires Studio 3.0 minimum

    从github上下载的项目遇到一个问题:Error:This Gradle plugin requires Studio 3.0 minimum 意思就是说studio版本不高,导入的项目的版本是3. ...

  10. SpringMVC之文件上传

    上传是web程序中常见的功能,当使用上传时,需要把form表单中的enctype属性改为multipart/form-data,这样就使用了二进制进行上传,而后台需要解析这些数据.Dispatcher ...