css之display的使用

display的几个常用的属性值

inline:

1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
2. 不能更改元素的height，width的值，大小由内容撑开. 
3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.

block:

1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
2. 能够改变元素的height，width的值. 
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

 inline-block:

1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
2. 用通俗的话讲，就是不独占一行的块级元素，和float浮动类似。

 

inline-block布局 vs 浮动布局

不同之处：

对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

相同之处：

某些情况下能达到相同的效果，如下：

浮动不好的情况：

inline-block存在的小问题

上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

去除inline-block的空隙：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙

转载自：https://www.cnblogs.com/Ry-yuan/p/6848197.html