http://blog.csdn.net/chen_zw/article/details/8713205

块级元素(block)特性:

  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
  • address , blockquote , center , dir , div , dl , fieldset , form ,
    h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript ,
    ol , p , pre , table , ul , li
内联元素主要有:
  • a , abbr , acronym , b , bdo , 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
(a/img/li  是我之前搞错的标签,a总会觉得是块元素)
可变元素(根据上下文关系确定该元素是块元素还是内联元素):
  • applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用:
 
       利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。
       主要用的CSS样式有以下三个:
  • display:block  -- 显示为块级元素
  • display:inline  -- 显示为内联元素
  • dipslay:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
        我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
题外话:最近整理有关块级元素和内联元素区别的有关知识,网上找了不少相关的文章,发现大家的理解似乎都有误,我自己亲自测试了下,发现了不少的问题:
  1. 内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通过这4个属性来控制内联元素的宽度。
  2. 内联元素的内部也可以放块级元素标签,而且内部的块级元素标签会撑大外部的内联标签,所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素)
             例如: <a> 
                              <div style="width:100px;height:100px;">测试</div>
                          </a>
附录:col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr, td 等几个元素标签是只读的,也就是不能使用innerHTML等进行动态赋值.

(转) html块级元素和内联元素区别详解的更多相关文章

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

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

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  4. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  5. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  6. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  7. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  8. html的块级元素和内联元素

    常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...

  9. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

随机推荐

  1. php中mysqli 处理查询结果集的几个方法

    最近对php查询mysql处理结果集的几个方法不太明白的地方查阅了资料,在此整理记下 Php使用mysqli_result类处理结果集有以下几种方法 fetch_all() 抓取所有的结果行并且以关联 ...

  2. 可视化查看MongoDB - MongoVUE

    OS:Window 7 1.下载安装MongoVUE:http://www.mongovue.com/downloads/ 2.运行MongoVUE,点击“OK”按钮,使用免费版 3.选择一个已经存在 ...

  3. 每天学点管理学知识——情绪ABC理论

    什么是ABC理论 ABC理论(ABC Theory of Emotion)是由美国心理学家埃利斯创建的.就是认为激发事件A(activating event 的第一个英文字母)只是引发情绪和行为后果C ...

  4. iOS 之 多线程一

    iOS中实现多线程的技术方案 pthread 实现多线程操作 代码实现: void * run(void *param) {    for (NSInteger i = 0; i < 1000; ...

  5. SDWebImage 原理及使用-b

    SDWebImage托管在github上.https://github.com/rs/SDWebImage 这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下 ...

  6. Xcode报错:Unexpected '@' in program

    今天犯了个很弱的错误,就是当定义个一个@property时,编译器直接报错:Unexpected '@' in program 原因是把定义的属性写在.m文件中了,改到.h文件中就好了... 以后大家 ...

  7. 利用MSF溢出攻击讲解

    msf的强大之处也就不做探讨了,虽然这些东西网上很多.但我想说说我的感受. 这次的演示是在BT5中远程攻击一台win2003 sp2 metasploit是4.3的 需要说明的一点是 现在的BT5中不 ...

  8. 如何解决C#编译中"csc不是内部或外部命令"的问题

    安装完 VisualStudio 2010编译环境后,是不能用命令行直接编译写好的csc文件的,如果不配置环境变量,在命令提示符(cmd)中编译扩展名为cs的文件,会出现错误提示“csc不是内部或外部 ...

  9. gdb调试高级用法

    Linux下进程崩溃时定位源代码位置 如何在调试内核时,同时可以调试应用程序的做法: (cskygdb) c Continuing. ^C Program received signal SIGINT ...

  10. java学习多线程之线程状态