HTML 5 的常用元素分类

  HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换

    (1)display:inline;转换为行内元素

    (2)display:block;转换为块状元素

    (3)display:inline-block;转换为行内块状元素

  1、行内元素

行内元素特征:(1)设置宽高无效

                 (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

                 (3)不会自动进行换行

    常见的行内元素有:a 、span、br、b、u、ur等等

  2、块级元素

    块状元素特征:(1)能够识别宽高

         (2)margin和padding的上下左右均对其有效

         (3)可以自动换行

         (4)多个块状元素标签写在一起,默认排列方式为从上至下

    常见的块级元素有:div、p、h1-h6、ol-li、table、nav、aside、header、footer、section、article、ul-li、address等等

  3、行内块状元素

    行内块状元素特征:(1)不自动换行

                  (2)能够识别宽高

                  (3)默认排列方式为从左到右

    常见的行内块状元素有:img、input、td等

HTML行内元素、块状元素和行内块状元素的区分的更多相关文章

  1. line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  2. 既然 transform 不适用于某些内联元素,那咱们就把这些元素变成 inline-block 或 block 就行了。

    既然 transform 不适用于某些内联元素,那咱们就把这些元素变成 inline-block 或 block 就行了.

  3. CSS躬行记(2)——伪类和伪元素

    一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...

  4. C语言:将ss所指字符串中所有下标为奇数位置的字母转换为大写-将该字符串中的所有字符按ASCII码值升序排序后输出。-将a所指的4*3矩阵第k行的元素与第0行元素交换。

    //函数fun:将ss所指字符串中所有下标为奇数位置的字母转换为大写,若不是字母,则不转换. #include<conio.h> #include<stdio.h> #incl ...

  5. HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?

    先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...

  6. html5 区块与内联div 与span html块级元素

    HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...

  7. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

  8. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  9. 表单的子元素可不在form标签内

    表单是网页用于向服务器发送数据的元素.其用法类似下面: <form method="POST" action="/login"> <input ...

  10. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

随机推荐

  1. 你必须知道的----C语言笔试面试中经典易错的一些知识点(持续更新)

    1. 关于二级指针的解析和引用 1.1  二级指针意义  二级指针存放的是一级指针的地址    Ex: Int a = ; Int *p = &a; Int **q = &p; 1.2 ...

  2. 品味ZooKeeper之纵古观今_1

    品味ZooKeeper之纵古观今 本章思维导图 这一系列主要是从整体到细节来品味Zookeeper,先从宏观来展开,介绍zookeeper诞生的原因,接着介绍整体设计框架,接着是逐个细节击破. 本章是 ...

  3. HTML中title前面小图标的实现

    做一个比较正规的网站,需要在标题栏前面加上相应的小图标,会好看的多.效果大致如下: 其实实现起来很简单,只要在html文件中的<head></head>标签中加上: <l ...

  4. Qt 学习之路 2(35):文件

    Qt 学习之路 2(35):文件 豆子 2013年1月5日 Qt 学习之路 2 12条评论 文件操作是应用程序必不可少的部分.Qt 作为一个通用开发库,提供了跨平台的文件操作能力.从本章开始,我们来了 ...

  5. FTP 两种连接模式

    简介 FTP协议要用到两个TCP连接, 一个是命令连接,用来在FTP客户端与服务器之间传递命令:另一个是数据连接,用来上传或下载数据.通常21端口是命令端口,20端口是数据端口.当混入主动/被动模式的 ...

  6. 【算法笔记】B1035 插入与归并

    1035 插入与归并 (25 分) 根据维基百科的定义: 插入排序是迭代算法,逐一获得输入数据,逐步产生有序的输出序列.每步迭代中,算法从输入序列中取出一元素,将之插入有序序列中正确的位置.如此迭代直 ...

  7. P2762 太空飞行计划问题

    传送门 经典的最大权闭合子图问题 实验有正的价值,仪器的价值为负 为了实验我们必须选择相应的仪器 所以从 S 连向实验,边权为实验的价值 实验与相应仪器之间连边,边权为 INF 仪器连向 T 边权为仪 ...

  8. 108th LeetCode Weekly Contest Unique Email Addresses

    Every email consists of a local name and a domain name, separated by the @ sign. For example, in ali ...

  9. 1、在linux服务器centos虚拟机搭建nginx网站

    1.搭建linux虚拟机 具体参考 http://jingyan.baidu.com/article/86112f135e584a273697876b.html (如何在WIN7下进行LINUX虚拟机 ...

  10. DenyHosts 阻止SSH暴力攻击

    当你的 Linux 服务器暴露在互联网之中,该服务器将会遭到互联网上的扫描软件进行扫描,并试图猜测SSH登录口令. 你会发现,每天会有多条SSH登录失败纪录.那些扫描工具将对你的服务器构成威胁,你必须 ...