转自：http://gkecenter.blog.163.com/blog/static/181380305201291745234195/
一.两种类型
HTML中的大部分元素都可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。块级元素会从新的一行出现，行 级元素则不会。块级元素的前后都会有插入的断行，所以如果不用CSS则没法让两个块级元素并列在一起。
二.块级元素
块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级，也可以包含行级元素。如，<div>,<li>
三.行级元素
行级元素一般是包含语义意义的元素。行级元素一般只能包含文字或其他行级元素。行级元素不能被应用下列属性：
width
height
max-width
max-height
min-width
min-height
如果你想改变这些属性，应该应用给它的属于块级元素的父元素。
四.Spring Brother
有些元素既可以是块级元素，也能成为行级元素。例如<ins> 和<del>。当这两个元素直接出现在<body>中时，它们就是块级元素。如果作为<P>的子元素，他们就是行级 元素，此时不能包含其他的块级元素。
五.CSS中的类型
CSS中的盒子也有块级和行级之分，也包括其他类型，如，列表和表格等。HTML中的块级元素会产生块级盒子，行级元素会产生行级盒子。在CSS 中，可以用display控制盒子的类型。如，把一个行级元素转换成块级元素。注意，这种转换并不能改变元素本质。即使你把它转换成了 块级元素，你也不能让它包含其他的块级元素，你转换的只是CSS的盒子的外观。
通常没有必要改变元素的盒子类型，下列情况一般有改变盒子的需求：
水平的列表菜单
不断行的标题
隐藏元素
六.盒子类型的变化
对于应用了浮动或绝对定位的元素，如此类样式：float:left，position:absolute，position:fixed。这类元 素的盒子类型显然改变了。它们都变成了块级元素，因此display属性一般都被忽略。
七.盒子的消失
如果对元素应用display:none，它（包括它的子元素）将会被隐藏起来。对它应用的float,position属性也不再有意义。因为它将不会产生任何的盒子。
一.行内元素和块级元素有哪些？
| <address> | information on author |
| <blockquote> | long quotation |
| <button> | push button |
| <caption> | table caption |
| <dd> | definition description |
| <del> | deleted text |
| <div> | generic language/style container |
| <dl> | definition list |
| <dt> | definition term |
| <fieldset> | form control group |
| <form> | interactive form |
| <h1> | heading |
| <h2> | heading |
| <h3> | heading |
| <h4> | heading |
| <h5> | heading |
| <h6> | heading |
| <hr> | horizontal rule |
| <iframe> | inline subwindow |
| <ins> | inserted text |
| <legend> | fieldset legend |
| <li> | list item |
| <map> | client-side image map |
| <noframes> | alternate content container for non frame-based rendering |
| <noscript> | alternate content container for non script-based rendering |
| <object> | generic embedded object |
| <ol> | ordered list |
| <p> | paragraph |
| <pre> | preformatted text |
| <table> | table |
| <tbody> | table body |
| <td> | table data cell |
| <tfoot> | table footer |
| <th> | table header cell |
| <thead> | table header |
| <tr> | table row |
| <ul> | unordered list |
| <a> | anchor |
| <abbr> | abbreviated form |
| <acronym> | acronym |
| <b> | bold text style |
| <bdo> | I18N BiDi over-ride |
| <big> | large text style |
| <br> | forced line break |
| <button> | push button |
| <cite> | citation |
| <code> | computer code fragment |
| <del> | deleted text |
| <dfn> | instance definition |
| <em> | emphasis |
| <i> | italic text style |
| <iframe> | inline subwindow |
| <img> | Embedded image |
| <input> | form control |
| <ins> | inserted text |
| <kbd> | text to be entered by the user |
| <label> | form field label text |
| <map> | client-side image map |
| <object> | generic embedded object |
| <q> | short inline quotation |
| <samp> | sample program output, scripts, etc. |
| <select> | option selector |
| <small> | small text style |
| <span> | generic language/style container |
| <strong> | strong emphasis |
| <sub> | subscript |
| <sup> | superscript |
| <textarea> | multi-line text field |
| <tt> | teletype or monospaced text style |
| <var> | instance of a variable or program argument |
大家可以发现，上面有些元素有重复，为什么呢，是因为HTML中存在可变元素。
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
◎ applet - java applet
◎ button - 按钮
◎ del - 删除文本
◎ iframe - inline frame
◎ ins - 插入的文本
◎ map - 图片区块(map)
◎ object - object对象（当浏览器不支持时，则显示为块级）
◎ script - 客户端脚本
但是就我个人而言，我更愿意把它们当做行内元素，因为一般情况下，不会解释为块级元素
二.行内元素与块级元素有什么不同？
块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。
通过样式控制，它们可以相互转换。
1.尺寸-块级元素和行内元素之间的一个重要的不同点
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。
注：这里说的无效， 是指，它对其它元素的排列没有影响。也就是说，对于设置的margin,padding行内元素文档流里的上下元素来说，他们的间距不会因为上下margin或者上下padding而产生间距。但是就他本身而言，对于上下margin与padding是有效的。
上面写的有点绕了，我也是尽量表达。请参照下图，如果还是不清楚，请动手自己写一下，就能明白了。
2.text-align属性是两者表现的又以不同之处
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，w3c标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，
这样，我们对这个特性的认识应该就清楚了。但是，问题来了，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。啊？ 又是IE！！
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
相关推荐
在HTML中，元素被分为两种主要类型：行内...总的来说，理解和掌握行内元素与块级元素的概念以及如何利用`display`属性是HTML和CSS布局基础中的重要部分。熟练运用这些知识，可以帮助开发者创建出符合预期的网页布局。
在CSS布局中，块级元素（Block-level Elements）和行级元素（Inline Elements）是两种基本的元素类型，它们在HTML文档结构中扮演着至关重要的角色。了解它们的区别和使用方式是创建有效网页布局的基础。 块级元素...
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
04_文本相关属性_行级块级元素内容居中问题.html
行级元素与之相反，它的内容决定它的宽高度，至于特殊字符就当成是文字来看 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-...
从html的角度看标签分为行级元素/内联元素(inline)、块级元素(block)、行级块元素(inline-block)、其他元素。 行级元素： 设置宽高属性无效 与其他行级元素在一行，不设置高度时，默认高度为文字高度 设置margin:...
HTML 元素详解 - 块元素与行内元素 在 HTML 中，元素可以分为两大类：块元素（block element）和行内元素（inline element）。块元素是指占据一整行空间的元素，而行内元素是指只占据所需空间的元素。下面我们将对...
块级元素和行级元素是两种不同的元素类型，块级元素的宽度和高度可以通过width和height属性设置，而行级元素的宽度和高度是自动计算的。 5.5 盒子的margin叠加问题 --------------------- margin叠加问题是指两个...
一、块级元素 行内元素 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您...
通过以上介绍，我们可以了解到HTML5中行级元素与块级元素的区别及使用方法，以及如何利用这些元素来构建更加复杂和美观的网页。同时，掌握表格的基本用法和属性设置，可以帮助我们在实际项目中更加高效地组织和展示...
网页的布局结构是指网页的页面布局，包括块级元素和行级元素的排版。块级元素是指页面上的大区块，而行级元素是指小区块中的文字、图片或超链接等内容。 3.创建HTML5页面 创建HTML5页面可以使用记事本或HBuilder等...
* 块级元素：例如 div、p、h1 等，占据一整行，可以包含其他元素。 * 行级元素：例如 span、a 等，占据一部分行，不能包含其他元素。 * 空元素：例如 br、hr 等，没有内容的 HTML 内容。 HTML 元素的嵌套规则： * ...
本文主要针对块级元素和行级元素在设定宽高时可能出现的各种情况进行了详细的总结，旨在帮助开发者更好地理解和解决相关问题。 1. 元素不设宽度 在元素未设置宽度的情况下，其宽度通常会根据内容自动扩展。对于...
- **块级元素与行级元素**：支持同时包含块级元素和行级元素的标签包括`<fieldset>`、`<div>`、`<li>`、`<object>`。 - **仅行级元素**：只能包含行级元素的标签如`<h1>-<h6>`、`<pre>`、`<p>`、`<address>`。 - **...
块级元素占据整行，行级元素与其他元素共占一行。常见的块级元素有 `<div>`、`<p>`、`<h1>` 等，行级元素有 `<span>`、`<a>`、`<label>` 等。 JavaScript 2. script 标签 defer 和 async 的区别：defer 和 async ...
标准文档流是按照从上到下、从左到右的顺序排列文档内容，由块级元素（如div、ul、li、dl、dt、p等）和行级元素（如span、strong、img、input等）组成。块级元素占据一整行，触碰到页面边缘时会自动换行；行级元素则...
- **会使用display属性排版网页元素**：掌握如何通过`display`属性控制元素的显示状态（如`block`、`inline`、`inline-block`、`none`），实现块级元素与行级元素之间的转换。 - **会使用float属性排版网页元素**：...
在html导入这个js文件(有行级元素需要转换成块级元素)
然而，在实现某些设计时，我们可能希望行级元素能够拥有块级元素的特性，比如设置宽度、高度、内边距和外边距。这时，我们就需要用到`display: inline-block`属性。然而，`inline-block`在不同浏览器之间的兼容性...