• <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>
  • 專注搜索競價代運營

    成長之選 ,效果之道!

    免費咨詢熱線:17636682598

    css中display屬性flex、inline-block、block用法

    display是布局中使用頻率最高的屬性,屬性值也有很多常用的有display:flex彈性布局,display:inline-block內聯塊定義,display:block塊級元素定義

    display: flex彈性布局

    Flex是Flexible Box的縮寫”彈性布局”是目前主流的布局方式,適用PC+移動自適應布局,使垂直居中更容易實現;justify-content屬性,align-items屬性來控制水平排序與垂直居中

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"
    6.         <title>通高科技</title> 
    7.         <style> 
    8.             .a{ 
    9.                 /* background-color: green; */ 
    10.                 display: flex;/* 使用彈性布局 */ 
    11.                 align-items:center;/* 垂直居中 */ 
    12.                 justify-content:center;/* 水平居中 */ 
    13.             } 
    14.             .div{ 
    15.                 width: 100px; 
    16.                 height: 100px; 
    17.                 background-color: aqua; 
    18.                 margin-left: 5px; 
    19.                  
    20.             } 
    21.             .div1{ 
    22.                 height: 50px;; 
    23.             } 
    24.         </style> 
    25.     </head> 
    26.     <body> 
    27.         <div class="a"
    28.             <p>根據窗口自動水平居中</p> 
    29.             <div class="div">1</div> 
    30.             <div class="div">2</div> 
    31.             <div class="div div1">3垂直居中</div> 
    32.             <div class="div">4</div> 
    33.             <div class="div">5</div> 
    34.         </div> 
    35.          
    36.     </body> 
    37. </html> 
    運行結果:
    ???????

    display: inline-block和display: block區別

    display: block 與display:inline-block 區別在元素之后不添加換行符,因此該元素可以位于其他元素旁邊。

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"
    6.         <title>通高科技</title> 
    7.         <style> 
    8.             .a{ 
    9.                   display: inline;  
    10.                   width: 100px; 
    11.                   height: 100px; 
    12.                   padding: 5px; 
    13.                   border: 1px solid blue;   
    14.                   background-color: yellow;  
    15.             } 
    16.             .b{ 
    17.                 display: inline-block; 
    18.                 width: 100px; 
    19.                 height: 100px; 
    20.                 padding: 5px; 
    21.                 border: 1px solid blue;   
    22.                 background-color: yellow;  
    23.             } 
    24.             .c{ 
    25.                 display: block; 
    26.                 width: 100px; 
    27.                 height: 100px; 
    28.                 padding: 5px; 
    29.                 border: 1px solid blue;   
    30.                 background-color: yellow;  
    31.             } 
    32.         </style> 
    33.     </head> 
    34.     <body> 
    35.         <p>display: inline-block和display: inline區別;<span class="a">inline設置屬性高度</span></p> 
    36.         <p>display: inline-block和display: inline區別;<span class="b">inline-block設置屬性高度</span></p> 
    37.         <p>display: inline-block和display: inline區別;<span class="c">block設置屬性高度</span></p> 
    38.     </body> 
    39. </html> 

    運行結果:

     

    display: inline-block和display: inline區別

    display: inline 行元素是p、span、a標簽的默認標簽使用不多,display: inline-block和display: inline對比 display: inline-block允許在元素上設置寬度和高度。

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"
    6.         <title>通高科技</title> 
    7.         <style> 
    8.             .a{ 
    9.                   display: inline;  
    10.                   width: 100px; 
    11.                   height: 100px; 
    12.                   padding: 5px; 
    13.                   border: 1px solid blue;   
    14.                   background-color: yellow;  
    15.             } 
    16.             .b{ 
    17.                 display: inline-block; 
    18.                 width: 100px; 
    19.                 height: 100px; 
    20.                 padding: 5px; 
    21.                 border: 1px solid blue;   
    22.                 background-color: yellow;  
    23.             } 
    24.         </style> 
    25.     </head> 
    26.     <body> 
    27.         <p>display: inline-block和display: inline區別;<span class="a">inline設置屬性高度</span></p> 
    28.         <p>display: inline-block和display: inline區別;<span class="b">inline-block設置屬性高度</span></p> 
    29.     </body> 
    30. </html> 

    運行結果:

     

    本文分類:營銷學院

    瀏覽次數:48次瀏覽

    發布日期:2022-07-06 17:01:17

    本文鏈接:http://www.backlinkboom.com/edu/2421.html

    天美传媒精品,亚洲国际综合无码一区,液液酱cosplay露出
  • <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>