行内元素的盒模型

行内元素的盒模型

行内元素：
a、b、span、img、input、strong、select、label、em、button、textarea
块级元素有：
div、ul、li、dl、dt、dd、p、h1-h6、blockquote

以上大致举例说明了一些行内元素、块元素。着重说明关于行内元素的布局问题。
举例说明：代码如图所示（简单举例）

1、span举例说明

运行结果如图所示：

①行内元素不支持设置宽度（width）和高度（height),运行结果没有任何变化。

结果如图：

②行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

结果如图：

很明显行内元素发生了改变，并且行内元素所占空间只是覆盖了块元素所在地，并没有影响页面的整体布局。
③ 行内元素可以设置border，垂直方向的border不会影响页面的布局

结果如图：

同样行内元素也发生了改变，并且也不影响页面的整体布局。
④行内元素可以设置margin，垂直方向的margin不会影响布局

结果如图所示：

同样行内元素的外边距发生了变化，也并不影响页面布局效果。

2、添加超链接举例说明：

运行结果：

行内元素不能设置高度和宽度，若非要使行内元素可以设置宽度和高度，在超链接中需要使用<display>标签。

结果如图：

此时的<a>标签已经从行内元素转成了块元素，占据一行空间。
<display> 用来设置元素显示的类型
可选值：
inline:将元素设置为行内元素
block: 将元素设置为块元素
inline-block: 将元素设置为行内块元素
行内块元素：既可以设置宽度和高度又不会独占一行
table:将元素设置为一个表格
none:元素不在页面中显示
说到隐藏标签，除了<display>标签外，还有< visibility>标签。
<visibility> 用来设置元素的显示状态
可选值：
visible：默认值，元素在页面中正常显示
hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置

3、<display>和< visibility>区别

未隐藏前的运行结果：

虽然<diaplay>和<visibility>都具有隐藏的功能，但两者还是有所区别的：
前者隐藏后彻底消失，不占据页面布局空间
如图所示

而后者则虽然消失，但空间仍然存在。

运行结果：

空间还留存在页面上。

二者相比较下来，还是display用的比较多，不仅可以设置显示状态还可以改变元素显示的类型。