小程序进阶-inline、block和inline-block的区别与联系

背景介绍

每个html标签元素都有默认的元素类型,主要包括两大类:inline内联元素和block块元素。其他则称为可变元素,会根据上下文语境决定该元素为inline元素或者block元素。
在css里,有一个display的属性,它规定元素应该生的框的类型,可能的值很多,除inline、block,常用的有table-cell、inline-block等,其中inline-block是css2.1里新增的值。
line和block类似于1+1=2的基础概念。在没有网络的时代,有一种叫做剪报的东西,它是把报刊杂志等上面剪下的文字、图片资料,整理分类成册。我们可以把剪下来的纸片看作是block元素,而用笔记录的文字、图画,看成是line元素。最早做浏览器的时候加入这两个元素,可能是遵循同样的模式。
inline-block,据资料发现,在IE5.5开始支持inline-block值,也就是1999年12月(最终版为2007年7月)。css2更新发布在1998年5月,2.1的个更新草案则是在2002年8月2日发布的(css2.1版添加了display的inline-block值)。当年可能是为了更好的进行元素布局,踩在标准里给display添加inline-block值。

知识剖析

  1. 常见元素
inline元素:a,span,br,i,em,strong,label,q,var,cite,code
inline-block元素:img,input
block元素:p,div,h1...h6,ol,dl,table,address,blockquote,form
  1. 各自具有什么特点

inlin特点:

(1)和其他元素都在一行上,直到一行排列不下,才会新换一行,其宽度随元素内容而变化
(2)元素的高度、宽度及顶部和底部边距不可设置
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变

block特点:

(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。
(2)元素的高度、宽度、行高以及和底边距都可设置
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

inline-block特点:

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。和其他元素都在一行上;元素的高度、宽度、行高以及底边距都可设置。

常见问题与解决方案

  1. inline和inline-block元素之间的间距问题
设置父容器的font-size为0,子容器重新设置font-size。
  1. inline-block元素的如何垂直居中
设置上下padding值相等;
设置vertical-align:middle;
设置line-height大于font-size;

你可能感兴趣的:(CSS,小程序,小程序,css)