AOA棋牌

专注搜索竞价代运营

成长之选 ,效果之道!

免费咨询热线: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.       &nbsp;&nbsp;<title>AOA棋牌科技</title> 
  7.     ; &nbsp;  <style> 
  8.  &nbsp;          .a{ 
  9.                 /* background-color: green; */ 
  10.                 display: flex;/* 使用弹性布局 */ 
  11.                 align-items:center;/* 垂直居中 */ 
  12.                 justify-content:center;/* 水平居中 */ 
  13.  &nbsp;          } 
  14.          &nbsp;  .div{ 
  15.                 width: 100px; 
  16.       &nbsp;         height: 100px; 
  17.  &nbsp;              background-color: aqua; 
  18.           &nbsp;     margin-left: 5px; 
  19.             &nbsp;   &nbsp;
  20.         ;    } 
  21.             .div1{&nbsp;
  22.   &nbsp;             height: 50px;; 
  23.     &nbsp;       } 
  24.     &nbsp;&nbsp;  </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.    &nbsp;    </div>&nbsp;
  35.   &nbsp;      
  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>AOA棋牌科技</title>&nbsp;
  7.        &nbsp;<style&gt; 
  8.       &nbsp;     .a{ 
  9.   &nbsp;            ;   display: inline;  
  10.        ;           width: 100px; 
  11.              &nbsp;    height: 100px; 
  12.                   padding: 5px; 
  13. &nbsp; &nbsp;               border: 1px solid blue;   
  14.      &nbsp; &nbsp;          background-color: yellow;  
  15.             }&nbsp;
  16.       &nbsp; ;    .b{ 
  17.          &nbsp;      display: inline-block;&nbsp;
  18.      ;           width: 100px; 
  19.   &nbsp;             height: 100px; ;
  20.                 padding: 5px; 
  21.            &nbsp;    border: 1px solid blue;   
  22.      &nbsp;   &nbsp;      background-color: yellow;  
  23.        &nbsp; &nbsp;  } 
  24.             .c{ 
  25.      ;           display: block; 
  26.        &nbsp;        width: 100px; 
  27.   &nbsp;        &nbsp;    height: 100px; 
  28.            &nbsp;    padding: 5px; 
  29.                 border: 1px solid blue;   
  30.  &nbsp;              background-color: yellow;  
  31.            &nbsp;} 
  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.    &nbsp;    <title>AOA棋牌科技</title> 
  7. &nbsp;       <style> 
  8.        &nbsp;    .a{ 
  9.                   display: inline;  
  10.            &nbsp;      width: 100px; 
  11.                  &nbsp;height: 100px; 
  12.                   padding: 5px; 
  13.   &nbsp;               border: 1px solid blue;   
  14.                   background-color: yellow; ; 
  15.   &nbsp;        ; } 
  16.    ;         .b{ 
  17.              &nbsp;  display: inline-block; 
  18.                 width: 100px; 
  19.                &nbsp;height: 100px; 
  20.     &nbsp;           padding: 5px; 
  21.                 border: 1px solid blue;&nbsp;  
  22.          &nbsp;      background-color: yellow; &nbsp;
  23.  &nbsp;          } 
  24.         </style>&nbsp;
  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://czxhbook.com/edu/2421.html

"
"