行内元素
常见的行内元素有:<a>,<strong>,<b>,<em>,<del>,<span> < i > 、< label >、 < br >等
行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。
行内元素的特点:
和相邻的行内元素在一行上高度和宽度无效,但是可以设置line-hight但是水平方向上的padding和margin可以设置,垂直方向上的无效默认的宽度就是它本身的宽度行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)
块级元素:
< div > 、 < p > 、 < h1…6 > 、 < ol > 、 < ul > 、 < table > 、< form >
块级元素的特点:
块级元素会独占一行高度,行高,外边距和内边距都可以单独设置宽度默认是容器的100%可以容纳内联元素和其他的块级元素
行内块元素
img input td
行内块级元素的特点:
和相邻的行内元素(行内块)在一行上,但是中间会有空白的间隙默认的宽度就是本身内容的宽度高度,行高,内边距和外边距都可以设置行内块不能转化为行内
inline-block 元素也可以设置vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
vertical-align:middle 使行内快相对于父元素的行高垂直居中