inline-block布局

最近在看一个H5网页怎么用inline-block来调整布局。因为在工作中公司不提倡使用position来定位。所以最近看了flex的弹性布局，float浮动和今天的inline-block内联块元素。

一般来说用到inline-block都会想到inline和block。所以就说说这两的特点。

inline的特点:

1.能使元素变成行内元素。让元素可以在一行里并排，不会换行。

2.不能更改宽度和高度，大小将由内容来撑开。

3.使用内边距时四边都是有效的，使用外边距时只有左右是有效的。

block的特点。

1.block是独占一行的，在没有设置宽度时默认的宽度是父元素的宽度。

2.能够改变宽高。

3.可使用内外边距。

 

最后就是inline-block。

1.元素变为行内元素，所以是可以在一行里并排的。

2.能改变宽高。

3.可用内外边距。

总的来说inline-block就是集中了block和inline的优点。在日常的布局中通过inline-block也可以很好的完成。

同时要注意由于块元素的结尾都会带有回车符，所以块与块之前会有小空隙(与浮动布局类似，浮动可通过清除浮动来解决这个问题)，而inline-block想解决这个问题可以通过设置父元素的font-size:0来消除块之前的空隙。因为回车符也是文本，所以设置size为0就可以消除。