display属性详解

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。

1. none：隐藏对象

1.1 不用none前：

    
    
    
    


    
"box">
        

            
"box1">
        
        

        

    
    
"bottom">

显示：

1.2 用了none的时候：

    
    
    
    


    
"box">
        

            
"box1">
        
        

        

    
    
"bottom">

显示：

---

2. inline： 指定对象为行内元素

    
    
    


    


    
"box">
        
好好学习
        
好好学习
        
好好学习
    

显示：

---

3. block： 指定对象为块元素

    
    
    


    


    
"box">
        

        

        

    

显示：

---

4. inline-block：指定对象为行内块元素

即在同一行显示，又可以设置宽高，margin和padding可以设置。注意：识别代码之间的空白。意思就是说，在一行排列的时候盒子与盒子之间会出现空白空隙。

空白解决办法：

1. 把下面的div挨着写，不留空格，空白就会消失。
2. 把空格部分注释起来就不会有空白

    
    
    


    


    
"box">
        

        

        

    

显示：

---

5. table-cell：指定对象为表格单元格

    
    
    


    


    
"box">
        

        

        

    

显示：

---

6. flex：弹性盒

它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建"自适应"浏览器窗口的流动布局。

6.1 未使用flex前：

    
    
    
    


    
"box">
        
"item1">
        
"item2">
        
"item3">
    

显示：

6.2 使用flex后：

    
    
    
    


    
"box">
        
"item1">
        
"item2">
        
"item3">
    

显示：

---

7. inline转块级元素

    
    
    


    


    "box1">好好学习
    "box2">好好学习
    "box3">好好学习

显示：

--- Ending ---