html/css中的块元素，行内元素，行内块元素

html/css中的块元素，行内元素、行内块元素

** 块元素（block element）**
在网页中一般通过块元素来对页面进行布局，块级大多为结构性标记，它的特点是：
1.总是从新的一行开始
2.高度、宽度都是可控的，margin和padding的上下左右均对其有效
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
注意：块元素中基本上什么都能放， p元素（块元素）中不能放任何的块元素。
常见的块元素是：

    <h1>...</h1> 标题一级

    <h2>...</h2> 标题二级

    <h3>...</h3> 标题三级

    <h4>...</h4> 标题四级

    <h5>...</h5> 标题五级

    <h6>...</h6> 标题六级
    
    <hr> 水平分割线

    <p>...</p> 段落

    <pre>...</pre> 预格式化

    <blockquote>...</blockquote> 段落缩进 前后5个字符

    <marquee>...</marquee> 滚动文本

    <ul>...</ul> 无序列表

    <ol>...</ol> 有序列表

    <dl>...</dl> 定义列表

    <table>...</table> 表格

    <form>...</form> 表单

    <div>...</div>
    
    <hgroup></hgroup>
 
    <p>在p标签中的内容就表示一个段落</p>

行内元素 （inline element）

在页面中不会独占一行的元素称为行内元素，行内大多为描述性标记。一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
特点是：
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能放行内元素，不能包含块级元素
常见的行内元素有：

<span>...</span>

    <a>...</a> 链接

    <br> 换行

    <b>...</b> 加粗

    <strong>...</strong> 加粗

    <img> 图片

    <sup>...</sup> 上标

    <sub>...</sub> 下标

    <i>...</i> 斜体

    <em>...</em> 斜体

    <del>...</del> 删除线

    <u>...</u> 下划线

    <input>...</input> 文本框

    <textarea>...</textarea> 多行文本

    <select>...</select> 下拉列表

	<strong>表示强调，重要内容！</strong>

	<q> 表示一个短引用</q>
	
    <blockquote> 表示一个长引用  </blockquote>

行内块元素
具有行内元素和块元素两者的特点，元素排列在一行，不会自动换行，可设置宽度和高度以及外边距和内边距的所有样式，因此使用次数也多。

三者转化关系如下：

display：inline 转换为行内元素
display：block  转换为块元素
display：inline-block  转换为行内块元素