【Vichy的学习日记 #5】CSS元素选择模式

HTML中元素分为块元素和行内元素

一.块元素

常见<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
特点：

1. 自己独占一行
2. 高，宽，外边距，内边距都可以控制
3. 宽度默认是容器的100%
4. 是一个容器及盒子，里面可以放行内或者块段元素

注：

• 文字类元素主要用于存放文字
• <p>主要用于存放文字，<p>中不能存放块级元素，特别是<div>
• 同理，<h1>~<h6>等都为文字块级标签，里面也不能放其他块级元素

二.行内元素

常见<a><strong><b><em><i><del><s><ins><u><span>
<span>为最主要的行内元素
特点：

1. 相邻行元素在一行上，一行可以显示多个
2. 高，宽，直接设定是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能再放链接
• 特殊情况<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

三.行内块元素

<img/>,<input/>，<td>
它们同时具有块元素和行内元素的特点，有些资料称他们为行内块元素

1. 和相邻行内元素（行内块）在一行上，但是他们之间可能会有空白的空隙。一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容宽度（行内元素特点）
3. 宽度，行高，外边距以及内边距都可以控制（块级元素特点）

四.元素显示模式转换

特殊情况下，一个模式的元素需要另一种模式的特性，比如说想要增加链接<a>的触发范围
*转换为块元素

a{
	display:block;
}

*转换为行内元素

div{
	display:inline;
}

*转换为行内块

span{
	display:inline-block;
}