display属性详解

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

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

1. none：隐藏对象

1.1 不用none前：

 
    
     
      
      
     
    { 
    width: 200px; height: 200px; background-color: pink; /* display: none; */ } .box1 { 
    width: 100px; height: 100px; background-color: blue; margin: 0 auto; } .box>div:nth-child(2) { 
    background: hotpink; } .box>div:last-child { 
    background-color: deeppink; } .bottom { 
    width: 1200px; height: 300px; background-color: purple; } 
  

    "box"> 
   
 
    

      "box1"> 
    
 
   
 
   
 
   
 
  
 
  

    "bottom"> 
  
 

1.2 用了none的时候：

 
    
     
      
      
     
    { 
    width: 200px; height: 200px; background-color: pink; display: none; } .box1 { 
    width: 100px; height: 100px; background-color: blue; margin: 0 auto; } .box>div:nth-child(2) { 
    background: hotpink; } .box>div:last-child { 
    background-color: deeppink; } .bottom { 
    width: 1200px; height: 300px; background-color: purple; } 
  

    "box"> 
   
 
    

      "box1"> 
    
 
   
 
   
 
   
 
  
 
  

    "bottom"> 
  
 

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

 
     
      
       
       
      
     { 
     width: 300px; height: 300px; background-color: pink; /* float: left; */ display: inline; } .box>div:nth-child(2) { 
     background: hotpink; } .box>div:last-child { 
     background-color: deeppink; } 
   

     "box"> 
    

      好好学习 
    
 
    

      好好学习 
    
 
    

      好好学习 
    
 
   
 

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

 
      
       
        
        
       
      { 
      width: 300px; height: 300px; background-color: pink; /* float: left; */ display: block; } .box>div:nth-child(2) { 
      background: hotpink; } .box>div:last-child { 
      background-color: deeppink; } 
    

      "box"> 
     
 
     
 
     
 
    
 

显示：

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

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

空白解决办法：

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

 
       
        
         
         
        
       { 
       width: 300px; height: 300px; background-color: pink; /* float: left; */ display: inline-block; } .box>div:nth-child(2) { 
       background: hotpink; } .box>div:last-child { 
       background-color: deeppink; } 
     

       "box"> 
      
 
      
 
      
 
     
 

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

 
        
         
          
          
         
        { 
        width: 300px; height: 300px; background-color: pink; /* float: left; */ display: table-cell; } .box>div:nth-child(2) { 
        background: hotpink; } .box>div:last-child { 
        background-color: deeppink; } 
      

        "box"> 
       
 
       
 
       
 
      
 

6. flex：弹性盒

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

6.1 未使用flex前：

 
         
          
           
           
          
         { 
         width: 100%; height: 600px; background-color: grey; /* display: flex; */ } .box>div { 
         width: 33.33%; height: 600px; } .item1 { 
         background-color: pink; } .item2 { 
         background-color: orange; } .item3 { 
         background-color: red; } 
       

         "box"> 
        

          "item1"> 
        
 
        

          "item2"> 
        
 
        

          "item3"> 
        
 
       
 

6.2 使用flex后：

 
         
          
           
           
          
         { 
         width: 100%; height: 600px; background-color: grey; display: flex; } .box>div { 
         width: 33.33%; height: 600px; } .item1 { 
         background-color: pink; } .item2 { 
         background-color: orange; } .item3 { 
         background-color: red; } 
       

         "box"> 
        

          "item1"> 
        
 
        

          "item2"> 
        
 
        

          "item3"> 
        
 
       
 

7. inline转块级元素

 
          
           
            
            
           
          { 
          width: 200px; height: 200px; float: left; display: block; } .box1 { 
          background-color: green; } .box2 { 
          background-color: yellow; } .box3 { 
          background-color: red; } "box1">好好学习 "box2">好好学习 "box3">好好学习 

— Ending —