标签的显示模式

显示模式

---

块级元素

  每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度，高度，对齐等属性，通常用于网页布局和网页结构的搭建。
 
  常见的元素有<div>,<p>,<hX>,
<ul>,<ol>,<li>,其中<div>标签时最典型的块元素。
 
块级元素的特点：

• 总是从新行开始
• 高度，行高，外边距及内边距都可以控制
• 宽度默认时容器的100%
• 可以容纳内敛元素和其它块元素

---

行内元素

  行内元素（内联元素）不占有独立的区域，仅仅靠自身的大小和图片尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，禅功与控制页面中文本的样式。
 
  常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>,其中<span>标签时最典型的行内元素
&nsbp;
行内元素的特点：

• 和相邻行内元素在一行上
• 高，宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或者其它行内元素（a特殊）

---

块级元素和行内元素的区别

块级元素的特点：

• 总是从新行开始
• 高度，行高，内外编剧都可以控制
• 宽度默认是容器的100%
• 可以容纳内联元素和其它块元素

行内元素的特点:

• 和相邻行内元素在一行上
• 高，宽的设置无效，但水平方向的padding和margin可以设置，垂直方向无效。
  *默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其它行内元素

---

行内块元素

  在行内元素中有几个特殊的标签<img/>,<input/>,<td>,可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
 
行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，在是之间会有空白缝隙。
• 默认宽度就是它本身内容的宽度
• 高度，行高，内外边距都可以控制

---

标签显示默认转换display

块转行内：display：inline；
行内砖块：display：block;
块，行内元素转换为行内块：display：inline-block；
 
注意：

1. 只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签，hX，dt，它们都是文字类块级标签，里面不能放其它块级元素。
    
2. 链接里面不能再放 链接
3. a里面可以放块级元素