1.关于行内元素和块状元素的说明

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

2.行内、块状元素区别:
   (1).块级元素会独占一行,其宽度自动填满其父元素宽度
        行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
   (2). 一般情况下,块级元素可以设置 width, height属性,行内元素设置width,  height无效
         (注意:块级元素即使设置了宽度,仍然是独占一行的)
   (3).块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
 
3.行内、块状元素:

块元素(block element)

  * address - 地址
  * blockquote - 块引用
  * center - 举中对齐块
  * dir - 目录列表
  * div - 常用块级容易,也是css layout的主要标签
  * dl - 定义列表
  * fieldset - form控制组
  * form - 交互表单
  * h1 - 大标题
  * h2 - 副标题
  * h3 - 3级标题
  * h4 - 4级标题
  * h5 - 5级标题
  * h6 - 6级标题
  * hr - 水平分隔线
  * isindex - input prompt
  * menu - 菜单列表
  * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
  * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  * ol - 排序表单
  * p - 段落
  * pre - 格式化文本
  * table - 表格
  * ul - 非排序列表

内联元素(inline element)

  * a - 锚点
  * abbr - 缩写
  * acronym - 首字
  * b - 粗体(不推荐)
  * bdo - bidi override
  * big - 大字体
  * br - 换行
  * cite - 引用
  * code - 计算机代码(在引用源码的时候需要)
  * dfn - 定义字段
  * em - 强调
  * font - 字体设定(不推荐)
  * i - 斜体
  * img - 图片
  * input - 输入框
  * kbd - 定义键盘文本
  * label - 表格标签
  * q - 短引用
  * s - 中划线(不推荐)
  * samp - 定义范例计算机代码
  * select - 项目选择
  * small - 小字体文本
  * span - 常用内联容器,定义文本内区块
  * strike - 中划线
  * strong - 粗体强调
  * sub - 下标
  * sup - 上标
  * textarea - 多行文本输入框
  * tt - 电传文本
  * u - 下划线
  * var - 定义变量

可变元素

  可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  * applet - java applet
  * button - 按钮
  * del - 删除文本
  * iframe - inline frame
  * ins - 插入的文本
  * map - 图片区块(map)
  * object - object对象
  * script - 客户端脚本

Html中行内元素有哪些?块级元素有哪些?的更多相关文章

  1. 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

    块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...

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

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

  3. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  4. 重要的事情说三遍:列表 ul / ol 等是块级元素,是块级元素,块级元素

    HTML 块级元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:“块级元素”译为 block level element,“行内元素”译为 inline element. 块级元素在浏 ...

  5. HTML中行内元素与块级元素的区别

    块级元素:独占一行,可设宽高,内外边距:块级元素有form,p,h1到h6,ol ,ul ,dl和dd和dt ,hr,li,pre,caption ,div ,table ,tr ,td ,th等. ...

  6. html中行内元素与块级元素的区别。

    在标准文档流里面,块级元素具有以下特点 1.总是在新行上开始,占据一整行: 2.高度,行高以及外边框和内边距都可以控制: 3.宽度始终是与游览器宽度一样,与内容无关: 4.它可以容纳内联元素和其他块级 ...

  7. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  8. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  9. css块级元素,内联元素,内联块状元素

    块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素 ...

  10. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

随机推荐

  1. Spark SQL中的几种join

    1.小表对大表(broadcast join) 将小表的数据分发到每个节点上,供大表使用.executor存储小表的全部数据,一定程度上牺牲了空间,换取shuffle操作大量的耗时,这在SparkSQ ...

  2. impala基础

    impala: 查询impala表时一定要加库名使用级联删除带有表的数据库:DROP database name cascade; insert插入的两种方式: 1. insert into empl ...

  3. VMware下设置Centos7联网与固定IP连接Xshell

    爱折腾的小伙伴应该经常会用Vmware安装一些虚拟机用于学习,但是比如装了Linux,经常操作的时候非常切换窗口的时候非常麻烦,所以很多人都会选择用Xshell来连接本地的Linux虚拟机,但是用Xs ...

  4. JAVA提高十九:WeakHashMap&EnumMap&LinkedHashMap&LinkedHashSet深入分析

    因为最近工作太忙了,连续的晚上支撑和上班,因此没有精力来写下这篇博客,今天上午正好有一点空,因此来复习一下不太常用的集合体系大家族中的几个类:WeakHashMap&EnumMap&L ...

  5. 深入理解php内核 编写扩展_III- 资源

    原文:http://devzone.zend.com/article/1024-Extension-Writing-Part-III-Resources 编写扩展_III- 资源 介绍 资源 初始化资 ...

  6. web前端素材整理汇总

    最近一直搞前端开发,整理下前端用的一些常用素材,分享给大家 框架类 Vue:https://cn.vuejs.org/ iview:https://www.iviewui.com/ 插件类 Jquer ...

  7. 【NOI2015】程序自动分析

    https://www.luogu.org/problem/show?pid=1955 并查集+离散化. 先执行所有x=y问题,即合并x和y. 再依次执行所有x!=y问题,即查询x和y是否处于同一集合 ...

  8. 阿里云轻量应用服务器Lamp部署php工程踩过的坑

    第一次写博客,也不知道写什么,但是想坚持写博客来提升自己,不喜勿喷. 切回正题,使用阿里云的轻量应用服务器Lamp其实非常方便,价格也很便宜,一键购买需要的环境都帮你搭配好了,剩下的就是自己修改一下数 ...

  9. 二叉树的递归遍历 天平UVa839

    题意:输入一个树状的天平,利用杠杆原理,根据力矩是否相等(W1D1==W1D2)判断天平是否平衡 解题思路:1.由于判断天平是否平衡,当W1和W2都为0的时候,会先输入左子树,再输入右子树 2.此时的 ...

  10. java内存模型个人理解总结

    现阶段线程之间的通讯主要有两种:内存共享和消息传递,而且在java中是采用的内存共享.简单说下内存共享: 假设现在有a线程和b线程,在a和b线程之间的通讯是依靠a线程将相关数据刷新到共享内存,然后b线 ...