一,概述
正 常文档流是从左到右,从上到下,遇块(块级元素)换行
块级元素的概念:会独占一行的就是块级元素,如:h1-h6,div,p,ul,li ...
行内元素的概念: 不会独占一行的就是行内元素,如:span,a,img,input ...
二,Display 属性
Display取值:inline-block,block,inline
Display:inlin-block可以让元素既不独占一行,又可以设置宽高,行高,内外边距
Display:block可以让元素独占一行。而且又可以设置宽高,行高,内外边距
元素分类 | 默认display值 | 举例 | 定义 | 特点 |
块级元素 | Display:block | h1-h6,div,p,ul,li | 独占一行, 可以通过设置display:inline-block让其不独占一行 | 能够设置宽,高,行高,外边距,内边距 |
行内元素 | Display:inline | span,a,img,input | 不独占一行 | 行内元素不能够设置宽,高,外边距,行高,内边距,但是可以通过设置display:inline-block设置宽,高,外边距,内边距 |