display属性

 

diaplay: block

基本特性

1、块级元素的宽度按文本方向填充所有可用空间。

2、块级元素的高度是根据内容高度自动计算的。

3、块级元素总是从新行开始。

盒模型特性

4、width（宽度）和height（高度）属性可以应用于块级元素。

5、padding（内边距）和border（边框）属性也可以应用于块级元素。

当我们设置margin（外边距）时，我们会有一些意外的发现。第一个块级元素的上外边距和最后一个块级元素的下外边距最终都在父级元素之外。

如果我们为父元素设置border和padding，margin就会停止折叠。

相邻的块级元素的margin也会折叠。浏览器会在两者之间选择一个最大的，而且你不能改变它。（如果你有两个margin相接的元素，这些margin将合并为一个margin，即最大的单个margin的大小。）

diaplay: inline

基本特性

1、内联元素的宽度和高度是根据内容自动计算的。

如果内联元素的内容不适合在一行中显示，那么浏览器将把它移到一个新的行中。宽度将根据最大行的长度来计算。

2、如果有空间，内联元素将在同一行。如果没有空间，浏览器会将元素移到新的一行。

盒模型特性

3、width 和 height 属性不适用于内联元素。

4、你可以设置padding、border和margin，但垂直方向的padding、border和margin最终会在父级元素之外。

diaplay: inline-block

基本特性

1、inline-block元素的宽度和高度是根据内容自动计算的。

如果inline-block元素的内容不适合在一行中显示，那么浏览器将把它移到一个新的行中。其宽度将与父元素的宽度相等。

2、如果有空间的话，inline-block元素将在同一行。另外，HTML代码中的空格也会在元素之间产生一些间隙。

如果没有空间，浏览器会将元素移动到新行。

盒模型特性

3、width（宽度）和height（高度）属性可以应用于inline-block元素。

4、你可以设置padding、border和margin，且不用担心超出父级。

转载自： https://zhuanlan.zhihu.com/p/560570147