1、html中的块级标签

  显示为“块”状,浏览器会在其前后显示折行。常用的块级元素包括:

  <p>, <ul>,<table>,<h1~h6>等。

2、html中的行级标签(内联元素)

  按行逐一显示,前后不会自动换行;

  文本格式化元素:

  <b>, <td>, <a>, <img>、

块级标签可以和行级标签转换

我们在实际的操作过程中往往会遇到给行级标签添加背景图片的尴尬情景。

那么在这种情况下我们就可以通过(display属性)将行级标签转换为块级标签的方式来实现需要的功能

span{
background:url(.jpg) 10px 10px no-repeat;
display:block;
} //这样我们就可以为span标签添加背景图片了
display:block;
display:inline;
display属性的三个取值:
.none:将某个元素隐藏 display: none;*将 div隐藏*
.block:将某个元素显示
.inline:将某个块级标签转换成了行级标签

HTML中的行级标签和块级标签 《转换》的更多相关文章

  1. html中的行内元素和块级元素小结

    一.首先我们总结下行内元素和块级元素有哪些: 行内元素: <a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加 ...

  2. HTML常用的标签中,行内元素和块级元素

    块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div ...

  3. CSS中的行内元素和块级元素

    我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...

  4. css中的行内元素和块级元素总结

    块级元素 <address>,  <button>,  <caption>,  <dd>,  <del>,  <div>,  & ...

  5. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  6. HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

    HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</titl ...

  7. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  8. img标签到底是行内元素还是块级元素

    面试官问你<img>是什么元素时你怎么回答 写这篇文章源自我之前的一次面试,题目便是问img标签属于块级元素还是行内元素,当时想都没想就说了是行内(inline)元素,面试官追问为什么能够 ...

  9. HTML(四):行级标签和块级标签

    一.行级标签 行级标签又称为内联标签,行级标签不会单独占据一行,设置宽高无效,行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果. 常见行级标签: span.strong.em ...

随机推荐

  1. [luoguP2158] [SDOI2008]仪仗队(数论)

    传送门 可以看出 (i, j) 能被看到,(i * k, j * k) 都会被挡住 暴力 所以 gcd(i, j) == 1 的话 ans ++ 那么可以枚举一半(中轴对称),求解答案,只能拿30分 ...

  2. cpus Vs cpu period and cpu quota

    1.  https://docs.oracle.com/cd/E37670_01/E75728/html/section-zb1_wqw_gt.html To control a container' ...

  3. 字段not null属性要放在最后面写,最少在类型后面写

    报错:create table test2211(id not null bigint ,age timestamp); 正确写法:create table test2211(id bigint no ...

  4. Lucene.Net 与 盘古分词

    1.关键的一点,Lucene.Net要使用3.0下面的版本号,否则与盘古分词接口不一致. 关键代码例如以下 using System; using System.IO; using System.Co ...

  5. Solid Edge如何制作爆炸图

    1 最方便的方式是自动爆炸 点击应用程式-"爆炸-涂彩-动画"   选择要爆炸的对象(默认是顶层组立件),要爆炸的距离(默认系统根据零件大小自动生成距离,你也可以手动设定距离)即可 ...

  6. raywenderlich.com的Swift编程风格指南

    翻译自:https://github.com/raywenderlich/swift-style-guide 这个风格指南可能和你从其它地方看到的不同,我们的焦点主要集中在互联网和文章上的可读性.创建 ...

  7. 中文在C/C++中的处理和汉字乱码问题(wchar_t)

    中文字在C/C++中的处理 现在编程的语言和编程环境随着中国的发展開始对中文有进一步的支持.可是对中文的支持整体来说是有缺陷的,并且有与编译环境的不同导致中文在当前的C/C++中有非常多问题,并且非常 ...

  8. LeetCode 290. Word Pattern (词语模式)

    Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...

  9. 理解和解决requireJS的报错:MODULE NAME HAS NOT BEEN LOADED YET FOR CONTEXT

    使用requireJS载入模块的时候.有时候会碰到例如以下的错误: Uncaught Error: Module name "module1" has not been loade ...

  10. java学习笔记:文件名区分大小写

    我按照网上的教程,写了JAVA第一个程序:Hello World!,出了两个问题,都栽在 大小写 上. public class Hello { public static void main(Str ...