行内元素和块级元素有哪些
http://pengyfpengyf.blog.163.com/blog/static/1983435920120306270541/
一.行内元素和块级元素有哪些？
| <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仅作用于行内内容上。