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. Quartz2D学习笔记(1)

    ********************************** 简介 *************************************** Quartz2D是⼀个二维绘图引擎,同时支持 ...

  2. IntelliJ IDEA 使用随笔

    注册的地址:http://idea.iteblog.com/key.php

  3. 【转载】TCP保活(TCP keepalive)

    下图是我遇到tcp keepalive的例子: 以下为转载: TCP保活的缘起 双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...

  4. 为什么 API 监控对于任何业务来说都重要?

    对于商务运算来说一个比较稳定的趋势在于对 API 日渐增长的依赖性,几乎每一个代码级交互过程都会调用 API 来收集数据或触发某些关键过程.没有 API ,你将无法与同伴进行文件交流,没有 API , ...

  5. tornado异步请求的理解(转)

    tornado异步请求的理解 http://www.kankanews.com/ICkengine/archives/88953.shtml 官网第一段话: Tornado is a Python w ...

  6. 单片机 C 语言模块化编程

    好的开始是成功的一半 通过上一章的学习,我想你已经掌握了如何在程序中释放CPU了.希望能够继续坚持下去.一个良好的开始是成功的一半.我们今天所做的一切都是为了在单片机编程上做的更好. 在谈论今天的主题 ...

  7. C++开发与Windows API

    Windows API 向 C++ 开发人员提出了一项挑战. 组成 API 的众多库大都表现为 C 语言风格的函数和句柄或是 COM 风格的接口. 这些用起来都不太方便,需要进行一定的封装或间接操作. ...

  8. PLSQL Developer Debug

    如果要查看存储过程或者函数的执行过程,可以用debug的模式.PLSQL Developer提供了debug功能,以函数为例: 1. 找到你要debug的函数,然后右击—>选择“Add debu ...

  9. 【CF】323 Div2. D. Once Again...

    挺有意思的一道题目.考虑长度为n的数组,重复n次,可以得到n*n的最长上升子序列.同理,也可以得到n*n的最长下降子序列.因此,把t分成prefix(上升子序列) + cycle(one intege ...

  10. Windows 8/8.1系统下硬盘占用率100%的问题解决思路汇总

    家庭组 2.关闭虚拟内存 3.关闭Windows 8快速开机功能 4.服务进程superfetch 5.系统下软件排除 操作步骤: 1.Windows 8系统的家庭组方便多人不用存储设备就能在局域网中 ...