行内元素、块级元素和行内块元素

1、行内元素

　常见的行内元素：

<a>	锚点
<b>	字体加粗
<big>	大号字体
<br>	换行
<em>	定义为强调内容
<i>	斜体文本
<img>	图片
<input>	输入框
<label>	标签为input的标注
<select>	单选或多选菜单
<small>	小号字体
<span>	组合文档的行内元素
<strong>	强调内容
<sub>	定义上标
<sup>	定义下标
<textarea>	多行文本输入框

 

　　　

 

 

 

 

 

 

 

 

 

 

 

行内元素的特点：

1.行内元素默认情况下可以和其他内联元素元素在一行上。
2.行内元素默认情况下的大小是不可以控制的。
3.行内元素可以产生代码换行和空格。
4.行内元素对应属性display：inline；
5.行内元素只能容纳文本或者行内元素。
      行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.

 

2、块级元素：

    常见的块级元素

address	地址元素
blockquote	块引用
center	居中对齐
dir	目录列表
div	常用的块级元素
fieldset – form	控制组
form	交互表单
h1~h6	标题
hr	水平横线
isindex-input prompt
menu	菜单列表
noframes – frames	可选内容
noscript	可选脚本内容
ol	有序表单
p	段落
pre	格式化文本
table	表格
ul	无序列表

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

块级元素的特点：

1. 独霸一行，总是在新行上开始
2. 宽度缺省是它父级元素的100%，除非设定一个宽度
3. 高度、行高、外边距、内边距都可以设置
4. 可以容纳其他内联元素或者其他块元素

 

3、行内元素与块级元素的区别：

区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。 
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高 
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。 
区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素

 

4、行内块级元素：

  display：inline-block

  行内块元素特点：

1. 元素排列在一行
2. 宽度默认由内容决定
3. 元素间默认有间距
4. 支持宽高、外边距、内边距的所有样式的设置