CSS块级元素与行内元素

行内元素与块状元素

1、块级元素：可以设置 width, height属性。
行内元素：设置width和height无效，其宽度随其元素的内容（文字或者图片等）的宽度而变化。
可以通过line-height设置行高（行高和height是不同的东西）。

2、块级元素：可以设置margin和padding。
行内元素：水平方向margin和padding有效，竖直方向margin和padding无效。

3、块级元素：默认独占用一行。默认高度为内部内容高度（没有内容时就为0px），宽度为父容器的100%。
行内元素：与其他元素占用一行。

4、块级元素：可以容纳内联元素和其他块元素。
行内元素：只能容纳文本或者其他内联元素。

5、块状元素：能定义宽度、高度、边距等
　  　　行内元素：与其他元素占用一行。

display属性

1、块元素默认display:block;
行内非替换元素(a,span)默认为display：inline;
行内替换元素(input)默认为display:inline-block;

2、display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。

float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
行内元素去除了之间的莫名空白。

float脱离文档流（与absolute和relative不同）：其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

position

当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素（注：并不一定是relative）来定位。脱离文档流（不占用空间）

2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。脱离文档流（不占用空间）

3.     Relative：相对定位 - 相对自身的定位。注意：设置偏移后，不改变原占用的空间。 不脱离文档流（占用空间）

4.     Static：默认值，没有定位。

5.     Inherit：继承父元素的position值。