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. python进程——生产者消费者

    生产者消费者模型介绍 为什么要使用生产者消费者模型 生产者指的是生产数据的任务,消费者指的是处理数据的任务,在并发编程中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完 ...

  2. Mybatis 逆向工程学习随笔

    一.逆向工程的作用 简单来说,就是替我们生成Java代码. 之前使用Mybatis的Mapper代理方法开发,还需要自己创建实体类,而且属性还得和数据库中的字段对应.这着实是机械化的而且比较麻烦的事, ...

  3. Docker三剑客之常用命令

    一.docker-machine 命令 说明 docker-machine create 创建一个 Docker 主机(常用-d virtualbox) docker-machine ls 查看所有的 ...

  4. Ubuntu 14.04TLS Nginx搭建静态文件服务器

    Nginx搭建静态文件服务器 [官方教程]https://www.nginx.com/resources/admin-guide/serving-static-content/ 打开Nginx的配置文 ...

  5. Spark中的常用算子

    更多有用的例子和算子讲解参见: http://homepage.cs.latrobe.edu.au/zhe/ZhenHeSparkRDDAPIExamples.html map是对每个元素操作, ma ...

  6. Spring的JavaMail实现异步发送邮件

    具体背景就不说了,可以网上搜索相关知识,或者直接看Sping MailSender的官坊网页.这里就直接实战了(Java实现异步发送电子邮件,包含中文无乱码). Maven: <dependen ...

  7. docker-使用ali云加速

    ali专用网络加速地址; https://yq.aliyun.com/articles/29941 使用ali加速 vim /etc/sysconfig/docker 添加: ADD_REGISTRY ...

  8. 26-hadoop-hbase简介

    hadoop的生态系统 1, hbase简介 –HBase–HadoopDatabase,是一个高可靠性.高性能.面向列.可伸缩.实时读写的分布式数据库 –利用HadoopHDFS作为其文件存储系统, ...

  9. 【转载】配置文件报错:不允许有匹配 [xX][mM][lL] 的处理指令目标

    今天编写代码的时候,不小心给一个xml文件的首行加了一行空格,导致了启动报了如题类似的错误,查到一篇文章,顺藤摸瓜发现了这个失误,文章转载如下: 框架整合 的时候,XML 配置文件大多数情况是从另一个 ...

  10. GitHub多人协作简明教程

    本文面向已经了解/熟悉git基本命令但是并不熟悉如何使用GitHub进行多人协作开发项目的同学. 为了简单起见,这里假设只有两个开发人员,HuanianLi 和 DaxiangLi.他们在GitHub ...