block元素和inline元素的特点

一、block元素的特点

1、处于常规流中时，如果width没有设置，会自动填充满父容器

2、可以设置height/width及margin/padding

3、处于常规流中时，布局在前后元素位置之间（独占一个水平空间）

4、忽略vertical-align

二、inline元素特点

1、水平方向上根据direction依次布局

2、不会在元素前后进行换行

3、受white-space控制

4、margin/padding在垂直方向上无效，在水平方向上有效

5、width/height对非替换行内元素无效，宽度由元素内容决定；

6、非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定

7、浮动或绝对定位时会转换成block

8、vertical-align生效

三、补充

替换元素

替换元素是浏览器根据其标签元素与属性来判断显示具体的内容。

比如：<input type="text" /> ，type="text"表明这是一个文本输入框，换成其他的时候，浏览器显示就不一样，<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素

(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如：<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

 

转载于:https://www.cnblogs.com/aaron-shu/p/4100277.html