• 行内元素
  1. 相邻元素可以在一行显示直到一行排不下才进行换行。
  2. 不可设置宽高,宽度随内容变化。
  3. padding和margin的设置中,水平方向(padding-left...)有效果,垂直方向无效果。
  • 块级元素
  1. 占一行或多行。
  2. 可设置宽高。
  3. 排列从上至下。
  4. 可设置padding和margin。
  5. 宽度没设置,默认100%。
  • 行内块元素
  1. 不自动换行。
  2. 可设置宽高。
  3. 排列从左到右。
  • 行内元素,块级元素,行内块元素之间的转换
  1. display:inline;转换为行内元素
  2. display:block;转换为块状元素
  3. display:inline-block;转换为行内块状元素

行内元素

* 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 - 定义变量

块级元素

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

可变元素

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

【HTML】行内-块级-行块级的更多相关文章

  1. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  2. html:常见行内标签,常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  3. html标签的显示模式(块级标签,行内标签,行内块标签)(转)

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  4. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  5. * CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

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

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

  7. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  8. HTML开发之(块级标签,行内标签,行内块标签)

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

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

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

  10. block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

随机推荐

  1. 访问了一次百度网页,你都经历了什么?https及tcp协议揭秘

    打开https://www.baidu.com/ 网页一个简单的动作,都经历了什么?你想探究内部的原理吗?那我们一起去探索吧 1.准备工作 安装好wireshark.Wireshark(前称Ether ...

  2. 前端笔记之服务器&Ajax(上)服务器&PHP&数据交互&HTTP

    一.服务器 1.1 什么是服务器,做什么的? 服务器,就是放在机房中的电脑,和我们的电脑的区别在与服务器有固定的IP,服务器的安全性和稳定性相当的高;性能一般就可以了,但是CPU的性能要比普通的客户机 ...

  3. DSAPI 导出EXEDLL函数到字符串

    EXE或者DLL写好了,要开始写函数说明文档了,可是有时里面的函数太多,怎么能自动列出来呢?在DSAPI中提供了该功能(目前没有做参数类型导出,以后有时间会添加). 先准备一个已经写好的EXE或DLL ...

  4. 微擎模块的安装文件manifest.xml

    微擎在安装或卸载模块时会根据manifest.xml生成(或删除)数据库中相应记录,并执行manifest.xml里指定的脚本. manifest.xml文件内容详细介绍如下: manifest - ...

  5. transform旋转,平移,缩放,扭曲 斜切

    transform  改变rotate 旋转translate  位移scale 缩放 skew  斜切变形 记得兼容性:-webkit-   -moz-    -ms-     -o- transf ...

  6. HTML之body标签中的相关标签补充

    一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  7. SAP MM ME29N 试图取消审批报错 - Document has already been outputed(function not possible) -

    SAP MM ME29N 试图取消审批报错 - Document has already been outputed(function not possible) - 今天收到用户的一个问题,说他试图 ...

  8. Android为TV端助力 Linux命令查看包名类名

    先运行apk 再输入logcat | grep START 查看当前启动apk的包名和类名 adb shell "pm list packages -f | grep com.yulong. ...

  9. WPF:浅析Dispatcher

    本人文笔差.还是直接上代码吧.(本文假设你对WPF中的Dispatcher有一定的了解) 你觉得下面的代码可以正常执行吗? private void Button_Click(object sende ...

  10. 数据文件实时同步(rsync + sersync2)

    因近期项目需求,需要同步云端服务器的数据给**方做大数据分析. 思路: 起初只要数据同步,准备开放数据采集接口.但实时性较差,会有延迟. 故而寻觅各种解决方案,最终确定使用 rsync 进行文件同步, ...