行内元素和块级元素

行内元素和块级元素

1.块级元素

• 独占一行
• 宽高以及边距都可以设置
• 宽度缺省是他容器的100%，除非设定一个宽度
• 可以容纳内联元素（行内元素）和其他块级元素

2.行内元素

• 和其他行内元素在一行上
• 高，行高以及边距不可改变
• 宽度是他文字或者图片的宽度，不可改变
• 行内元素只能容纳文本或者其他行内元素
• 注意：
  设置宽度width 无效。
  设置高度height 无效，可以通过line-height来设置。
  设置margin 只有左右margin有效，上下无效。
  设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。两者的区别主要在盒模型上。

3.行内元素和块级元素的转换（display属性）

值	描述
none	此元素被隐藏
block	元素显示为块级元素，并前后会带有换行符
inline	默认，元素显示为内联元素，前后没有换行符
inline-block	行内块元素

• inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。块级元素会换行，就有换行，HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙

• 如何取消inline-block产生的间隙
  1.使用负值的margin各个浏览器的负值也不相同，才能完美贴合
  2.在父元素的css中设置word-spacing负值

• HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。

• 在了解inline-block之前,导航栏一直采用float浮动来达到横向排列的目的，然而浮动是会产生副作用的，需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便

4.HTML中常见块级元素

标签	描述
canvas	定义图形
caption	定义表格标题
div	定义文档中的节
dl	定义列表
dt	定义列表中的项目
footer	定义section或者page的页脚
header	定义section或者page的页眉
h1-h6	定义html标题
hr	定义水平线
nav	定义导航链接
ol	定义有序列表
ul	定义无序列表
li	定义列表中的项目
p	定义段落
section	定义节
table	定义表格
thead	定义表头
th	定义表头单元格
tbody	定义表格主题内容
tr	定义表格中的行
td	定义表格单元
tfoot	定义表格标注内容（脚注）

5.HTML中常见行内元素

标签	描述
a	定义锚
b	字体加粗
br	下一行
button	定义按钮
textarea	定义多行的文本输入控件
del	定义被删文本
em	强调文本
img	定义图像
i	定义斜体
input	定义输入控件
lable	定义input元素的标注
select	定义选择列表
option	定义选择列表的列表
time	定义时间
video	定义视频

可变元素

标签	描述
button	定义按钮
del	删除文本
map	图片区块
script	客户端脚本
applet	java applet
iframe	inline frame
ins	插入的文本
object	object对象