html：块级元素和行内元素的特点

display：block；

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

块级元素width、height、padding、margin生效

块级元素有以下几个特点：

　　1、总是另起一行（特立独行）

　　2、可以设置其宽度、高度、内外边距

　　3、在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）

　　4、可以容纳行内元素和其他块元素

display：inline;

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

width、height无效，padding、margin生效

行内元素的特点：

　　1、总是和相邻的行内元素在同一行上（物以类聚）。

　　2、设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。

　　3、默认宽度是他自身内容的宽度。

　　4、行内元素只能容纳其他行内元素或者和文本。

display：inline-block;

行内块元素，width、height、padding、margin生效，典型代表元素：img、input

 

转载于:https://www.cnblogs.com/llqwm/p/9511136.html