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. 根据枚举获取枚举的Description特性值

    首先定义一个枚举:两个值:已确认.未确认. public enum ConfirmStatusEnum { [Description("未确认")] unconfirmed = , ...

  2. Linux 查看文件夹命令

    1,按照时间升序 命令:ls -lrt 详细解释:        -l use a long listing format 以长列表方式显示(详细信息方式)       -t sort by modi ...

  3. Python + gevent模块对单个接口进行并发测试 1

    本文知识点 利用gevent模块进行并发测试 代码如下 from gevent import monkey monkey.patch_all() import requests import geve ...

  4. luogu4931. 情侣？给我烧了！（加强版）（错位排列）

    题目链接 https://www.luogu.org/problemnew/show/P4931 题解 以下部分是我最开始的想法. 对于每一个 \(k\),满足恰好有 \(k\) 对情侣和睦的方案数为 ...

  5. PHP验证身份信息

    $code = 'code'; $patt = "/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(10|11|12))([012](\d|(30|31)))\d{3}[ ...

  6. Git的深入理解与GitHub托管服务的使用

    [转自] http://www.cnblogs.com/cocowool/archive/2012/02/17/2356125.html 源代码管理系统(SCM)与版本控制 版本控制是一种记录若干文件 ...

  7. Oracle PL/SQL之GROUP BY GROUPING SETS

    [转自] http://blog.csdn.net/t0nsha/article/details/6538838 使用GROUP BY GROUPING SETS相当于把需要GROUP的集合用UNIO ...

  8. PIE SDK栅格数据唯一值渲染

    1. 功能简介 栅格数据唯一值渲染,是以像元为单位,不同的像元值设置不同的颜色,从而达到唯一值显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 实例化唯一值渲染对象 第二步 初始 ...

  9. Nginx + Lua搭建文件上传下载服务

    收录待用,修改转载已取得腾讯云授权 最新腾讯云技术公开课直播,提问腾讯W3C代表,如何从小白成为技术专家?点击了解活动详情 作者 | 庄进发 编辑 | 迷鹿 庄进发,信息安全部后台开发工程师,主要负责 ...

  10. maven 引入本地 jar

    $ 参考1 : https://www.cnblogs.com/lixuwu/p/5855031.html ! 注: 参考1中的第二种方法,作者并未实际尝试,我尝试了,虽然在eclipse 中编译不报 ...