CSS中block、inline和inline-block
block
- block是将元素显示为块级元素,每次都是与其他元素从新行开始排布
- block可以设置块的行宽行高,同时还有margin、padding等基本属性
- 典型的块级元素标签有:<div> <p> <label> <h1> <form> <table>等标签
inline
- inline是将元素显示为行内元素,每次都是与其他元素从同一行进行排布
- inline不可以设置元素的宽度高度,以及margin和padding等基本属性
- 典型的inline元素标签有:<span> <b> <a> <image> <input> <strong>等标签
inline-block
- inline是将元素当作行内元素显示,但是本质是块级元素
- inline可以设置其行宽行高,以及margin和padding等基本属性
总结
一般而言,block、inline和inline-block可以互相转换,根据不同的显示方式来设置不同的展示类型:
- 是否想要排布在同一行来决定选择block还是inline
- 是否需要自己手动设定行宽行高以及margin、padding来选择block还是inline
- 如果既想排布显示成同一行,又想手动设置行宽行高以及margin、padding等基本属性,选择inline-block
本人是更倾向于自己手动布局,更易于控制布局,但因为是初学者,这样的见识可能尚早,以后若有新的认识,再回来修改自己的见解。