<var id="5bizx"></var>
    <var id="5bizx"></var>

    <form id="5bizx"></form>
    <var id="5bizx"></var>

        <form id="5bizx"><small id="5bizx"></small></form>

          專注搜索競價代運營

          成長之選 ,效果之道!

          免費咨詢熱線: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.citywhit.com/edu/2421.html

          人妻激情视频一区中文字幕,小雪被弄得很舒服,欧美成 人版中文字幕
            <var id="5bizx"></var>
            <var id="5bizx"></var>

            <form id="5bizx"></form>
            <var id="5bizx"></var>

                <form id="5bizx"><small id="5bizx"></small></form>