行内元素与块级元素

1.行内元素与块级元素

2.行内元素与块级函数的区别
（1）行内元素会在一条直线上排列，都是同一行的，水平方向排列；
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
（2）行内元素，不能包含块级元素只能容纳文本或其他内联元素；块元素，能容纳其他块元素或者内联元素。
（3）行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
（4）text-align属性：这个特性描述了如何使一个块元素的行内内容对齐。这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。但是，IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

3.块级元素和内联元素之间的转换
（1）display
块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;
a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
b.display:block;转换为块级元素。
c.display:inline;转换为行内元素。
d.display:inline-block;转换为行内块级元素（IE7以下不适用）。
（2）float
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。
（3）position
当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

注意：
（1）通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是float与position的副作用，他们本身的作用还会干扰布局效果。
（2）块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这个效果。