專注搜索競價(jià)代運(yùn)營

成長之選 ，效果之道！

免費(fèi)咨詢熱線：17636682598

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

display是布局中使用頻率最高的屬性，屬性值也有很多常用的有display:flex彈性布局，display:inline-block內(nèi)聯(lián)塊定義，display:block塊級元素定義

display: flex彈性布局

Flex是Flexible Box的縮寫”彈性布局”是目前主流的布局方式，適用PC+移動自適應(yīng)布局，使垂直居中更容易實(shí)現(xiàn)；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>根據(jù)窗口自動水平居中</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> 
運(yùn)行結(jié)果：
???????

display: inline-block和display: block區(qū)別

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

  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區(qū)別；<span class="a">inline設(shè)置屬性高度</span></p> 
  36.         <p>display: inline-block和display: inline區(qū)別；<span class="b">inline-block設(shè)置屬性高度</span></p> 
  37.         <p>display: inline-block和display: inline區(qū)別；<span class="c">block設(shè)置屬性高度</span></p> 
  38.     </body> 
  39. </html> 

運(yùn)行結(jié)果：

 

display: inline-block和display: inline區(qū)別

display: inline 行元素是p、span、a標(biāo)簽的默認(rèn)標(biāo)簽使用不多，display: inline-block和display: inline對比 display: inline-block允許在元素上設(shè)置寬度和高度。

  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區(qū)別；<span class="a">inline設(shè)置屬性高度</span></p> 
  28.         <p>display: inline-block和display: inline區(qū)別；<span class="b">inline-block設(shè)置屬性高度</span></p> 
  29.     </body> 
  30. </html> 

運(yùn)行結(jié)果：

 

本文分類：營銷學(xué)院

瀏覽次數(shù)：48次瀏覽

發(fā)布日期：2022-07-06 17:01:17

本文鏈接：http://24hourphotoeditor.com/edu/2421.html