CSS布局之盒子模型[二]

元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分，对应地它们之间的盒模型也会有不同。

1. 行内元素(inline)

通过display: inline可将元素声明为行内元素，顾名思义指在行里面的元素，因此没有换行的行为。

1.1 宽度和高度

行内元素不能设置宽度和高度，宽度和高度由内容撑开；

1.2 内边距

行内元素可以设置内边距，上下内边距不会影响行内元素的位置，但左右内边距会影响行内元素的位置；

1.3 边框

行内元素可以设置边框，上下边框不会影响行内元素的位置，但左右边框会影响行内元素的位置

1.4 外边距

行内元素不可以设置上下外边距(无效)，但可以设置左右内边距，且会影响元素的位置。

2. 块级元素(block)

通过display: block可将元素声明为块级元素，块级元素拥有换行的行为。

2.1 宽度和高度

块级元素可以自由设置宽度和高度，其中宽度默认为父元素内容区的宽度，而高度则由内容高度撑开。

2.2 内边距

块级元素的内边距也可自由设置，默认为0；

2.3 边框

块级元素的边框可自由设置，默认为0；

2.4 外边距

块级元素的外边距可自由设置，默认为0。值得注意的是，上下两个元素的外边距会发生重叠，比如A元素下外边距(margin-botom)为10px，A元素的上外边距(margin-top)为20px，两者之间的外间距为20px，而非想象中的30px。

3. 行内块元素(inline-block)

通过display: inline-block可将元素声明为行内块元素，行内块元素没有换行的行为，却可以设置宽度和高度，相当于行内元素和块级元素的综合体。

3.1 宽度和高度

行内块可自由设置宽度和高度；

3.2 内边距

行内块元素可正常设置内边距；

3.3 边框

行内块元素可正常设置边框；

3.4 外边距

行内块元素可正常设置外边距。值得注意的是，行内块的外边距跟其他行内块元素或块级元素的外边距不会发生重叠。