css display属性

display是css中最重要的用于控制布局的属性，它的取值有很多，主要有以下几个：

1. none；
2. block；
3. inline；
4. inline-block；

要想更好的使用这个属性值，首先要了解什么是块级元素和行内元素（也称为内联元素）：每个元素都有一个默认的display取值，当display取值为block时，我们称之为块级元素，当display取值为inline时我们称之位行内元素

• 块级元素：会新开始一行，并尽可能撑满容器，比如div、p、img、form、header、footer、section、h1~h6、ol、ul、li、pre（格式化文本）等；
• 行内元素：行内元素可以在段落中包裹一段内容，而不会打乱段落的布局，比如：span、a、abbr（缩写）、cite（引用）、code（计算机代码）、input、lable（表格标签）、sub（上标）、sup（下标）；

1、none 

   有些特殊元素的默认display值是none，比如script，当display取值为none时，该元素及其子元素会被隐藏，它和visibility的区别是，把display设为none的元素不会占用原有的空间（The document is rendered as though the element doesn't exist in the document tree.），并且该属性会被后代继承，而将visibility设为hidden后的元素仍然会占据它本来应该展示的空间；

2、inline

就像字面意，它会使元素在一行内出现，不会打乱原有的排版，不会独占一行；

3、block

使得元素前后带有换行符；可以设置margin、padding属性；当该元素的width缺失时，其宽度是其容器的100%；

4、inline-block