【博学谷学习记录】超强总结，用心分享 | display的用法总结

display在中文的解释上是显示的意思，在前端中主要设置标签的显示类型。

大家在使用display的时候，经常会用到的就是 block inline，以及inline-block这三个属性值。

block

块级元素，在页面显示中独占一行空间，可以设置宽高值，，默认宽度为父级盒子宽度，默认高度是0，或者内容撑开的高度。这一类元素在布局上的设计上占有很大优势，但某些有特定功能的标签，本身无法撑开盒子的大小，比如span和a标签，这时候需要利用属性的转换来改变。具体代码：

display：block

inline-block

行内块元素，显示属性中最具有利用价值的属性值，是inline和block的结合体，用通俗的话讲，就是不独占一行的块级元素，相对于block属性来说，多了一个一行可以显示多个的特点，相对于inline属性来说，多了可以撑开盒子大小的特点，

inline-block的使用，可以减少块级元素对浮动和定位的使用，避免父级盒子塌陷，以及浮动参差不齐的效果。

但是inline-block有一个非常大的缺点，他有inline属性中属性换行之后有一个预留的1像素的空隙，想要解决，就需要将所有元素写在一行，大大增加了代码的可读性和维护的难度。不过现在可以设置父盒子font-size :0来解决这个问题（img标签是属于inline-block属性，但是在浏览器的解析中，显示是inline属性）具体代码：

display：inline-block

inline

行内元素，只占用自己内容的位置，其他元素可以和自己共占一行，不能更改元素的宽高的值，大小由内容撑开，可以使用padding上下左右都有效，margin只能设置左右，但是不能设置上下。具体代码：

display：inline

none

none是隐藏的意思，会让元素在页面中完全消失，并且不占任何空间，即不在文档流中，visibility:hidden也是隐藏元素的效果，但是他还会占用一定的空间。在完成项目的过程中，可以根据要求是指不同的隐藏方式。具体代码：

display：none

list-item

列表 为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。具体效果参考列表元素