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. 使用vue-cli脚手架搭建项目，保存编译时出现的代码检查错误（ESLint）

    一.问题 出现这么写错误是什么原因呢?相信很多小白都会像我一样,第一次接触时有点二丈和尚摸不着头脑.其实是在你用vue-cli脚手架构建项目时用了ESLint代码检查工具,如下图 那么什么是ESLin ...

  2. java基础_02

    一.this和super 作用: this:区分成员变量和局部变量 super:区分父类的成员变量和局部变量 用法: this.成员变量名://访问本类的成员变量 this.成员方法名()://访问本 ...

  3. File 文件操作类 大全

    File  文件操作类  大全 许多人都会对文件操作感到很难  我也是  但是一个好的项目中必定会涉及到文件操作的 文件的复制 粘贴  等等等 公司大佬写了 一个文件操作的工具类 感觉还是棒棒的啦   ...

  4. Kibana6.x.x源码分析--如何使用kibana的savedObjectType对象

    默认kibana插件定义了三种保存实体对象[savedObjectType],如下图所示: 要使用只需要在自己定义的app的uses属性中添加上:savedObjectTypes  即可,如下图所示: ...

  5. oracle三种连接身份

    登录oracle数据库有三种连接身份   sysdba:数据库管理员,sysyoper:数据库操作员,normal:普通用户. "sysdba" 即数据库管理员 权限包括:   打 ...

  6. Linux(1)-CentOS7下解决ifconfig command not found

    第一步: 输入ip addr 确认IP地址是否设置正常,设置好如下所示,如果没有获取到IP地址则设置一个即可. 第二步 确认sbin目录是否存在. cd /sbin 第三步 确认ifconfig命令是 ...

  7. mysql允许数据库远程连接

    2018-11-06 进入数据库 mysql -uroou(用户) -p123456(密码) 授权某个user可远程访问 grant all privileges on *.* to ' with g ...

  8. nginx 地址重写

    例如, www.baidu.com    跳到   www.baidu.com/index.html #if ( $http_host ~* "^(.*)\.baidu\.com$" ...

  9. element-ui Form表单验证

    element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...

  10. jquery 去除字符串左右空格

    /*** 删除左右两端的空格*/String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g, '');} 调用方式: v ...