块级元素和行内元素及其区别

[TieMuZhen]

文档流的概念：对于内联元素，是从左到右排列的，当宽度不够时换行；对于块级元素，是从上到下排列的，每一个元素都另起一行。

一、内联元素宽高的确定

宽度：不受width的限制，由文字内容决定的，padding和margin可以改变宽度。

高度：不受height的限制，padding和margin也不能改变。可以通过line-height和font-size来改变。

二、块级元素宽高的确定

宽度：

　　1、可以自行设置width的值；
　　2、不设置宽度时的值为auto，是它本身父容器的100%。
　　3、需要注意的是如果width写了100%，应该是元素内容的宽度（content）等于父元素的宽度，元素的宽度应该等于这个宽度加自身的border，会凸出来一部分。

高度：

　　1、可以自行设置height的值；
　　2、默认值为0；
　　3、由元素内部的文档流中的元素的高度的总和决定的（里面元素的height+padding+margin有合并的可能），当元素脱离文档流时，不能用于父元素高度的计算；
　　4、当块级元素里面是文字时，文字只有一行，高度由line-height决定，文字有多行，会自动换行，但是碰到长度很长的单词时需要手动添加连字符（-）换行，有一个属性与之相关，word-breaking: break all; 超出宽度，不管单词是否结束都换行。

三、行内元素与块级元素间的相互转换

行内元素和块级元素都不是绝对的，可以相互转换,，通常有这些方式可以转换。　　

• display，将元素设置为块级、行内或是其它。　　
• float，隐形地把 inline元素转换为inline-block元素 。不会占据一行，相当于display：inline-block;　　
• position，属性值为absolute、fixed时，隐形地把 inline元素转换为block元素 ，其它属性值不会做转换。

四、置换元素

<img>、<input>、<textarea>、<select>是行内元素，但是它们却可以设置宽高，这是为什么呢？因为它们是行内置换元素。

置换元素：内容不受CSS视觉格式化模型控制，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。