碼迷,www.tparu.icu
吉利平特名人堂 > 移動開發 > 詳細

姚记高手平特一肖论坛:H5移動端知識點總結(二)

時間:2019-05-23 18:22:16      閱讀:70      評論:0      收藏:0      [點我收藏+]

吉利平特名人堂 www.tparu.icu 標簽:play   內容   style   col   dir   http   alt   布局   移動   

box-sizing的理解及使用

該屬性是解決盒模型在不同的瀏覽器中表現不一致的問題。它有三個屬性值分別是:
content-box: 默認值(標準盒模型); width和height只包括內容的寬和高,不包括邊框,內邊距;
比如如下div元素:<div class="box">box</div>
css如下:.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:content-box;}
那么在瀏覽器下渲染的實際寬度和高度分別是:222px,222px; 因為在標準的盒模型下,在瀏覽器中渲染的實際寬度和高度包括
內邊距(padding)和邊框的(border);如下圖所示:

技術圖片

 

border-box: width與height是包括內邊距和邊框的,不包括外邊距,這是IE的怪異模式使用的盒模型,比如還是上面的代碼:
<div class="box">box</div>;
css代碼如下:

.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;}

那么此時瀏覽器渲染的width會是178px,height也是178px; 因為此時定義的width和height會包含padding和border在內;
使用這個屬性對于在使用百分比的情況下布局頁面非常有用,比如有兩列布局寬度都是50%;但是呢還有padding和border,那么這個
時候如果我們不使用該屬性的話(當然我們也可以使用calc方法來計算); 那么總寬度會大于頁面中的100%;因此這時候可以使用這
個屬性來使頁面達到100%的布局.如下圖所示:

技術圖片

 

瀏覽器支持的程度如下:

技術圖片

 

回到頂部

理解display:box的布局

display: box; box-flex 是css3新添加的盒子模型屬性,它可以為我們解決按比列劃分,水平均分,及垂直等高等。

一:按比例劃分:

目前box-flex 屬性還沒有得到firefox, Opera, chrome瀏覽器的完全支持,但我們可以使用它們的私有屬性定義firefox(-moz-),opera(-o-),chrome/safari(-webkit-)。box-flex屬性主要讓子容器針對父容器的寬度按一定的規則進行劃分。 代碼如下:

 

<div class="test">
      <p id="p1">Hello</p>
      <p id="p2">W3School</p>
 </div>
 <style>
   .test{
      display:-moz-box; 
      display:-webkit-box; 
      display:box;
      width:300px;
   }
   #p1{
      -moz-box-flex:1.0; 
      -webkit-box-flex:1.0; 
      box-flex:1;
      border:1px solid red;
   }
   #p2{
      -moz-box-flex:2.0; 
      -webkit-box-flex:2.0; 
      box-flex:2;
      border:1px solid blue;
   }</style>

 

如下圖所示:

技術圖片

 

注意:
1. 必須給父容器定義 display: box, 其子元素才可以進行劃分。如上給id為p1設置box-flex設置為1,給id為p2設置box-flex為2,
說明分別給其設置1等分和2等分,也就是說給id為p1元素設置寬度為 300 * 1/3 = 100px; 給id為p2元素設置寬度為 300 * 2/3 = 200px;
2. 如果進行父容器劃分的同時,他的子元素有的設置了寬度,有的要進行劃分的話,那么劃分的寬度 = 父容器的寬度 – 已經設置的寬度 。
再進行對應的劃分。

如下圖所示:

技術圖片

 

技術圖片

 

二:box具體的屬性如下:

box-orient | box-direction | box-align | box-pack | box-lines

1. box-orient;
box-orient 用來確定父容器里的子容器的排列方式,是水平還是垂直,可選屬性如下所示:
   horizontal | vertical | inline-axis | block-axis | inherit
一:horizontal | inline-axis
給box設置 horizontal 或 inline-axis 屬性效果表現一致。都可以將子元素進行水平排列.
如下html代碼:

 

<div class="test">
       <p id="p1">Hello</p>
       <p id="p2">W3School</p>
   </div>
   css代碼如下:
   <style>
       .test{
          display:-moz-box; 
          display:-webkit-box; 
          display:box;
          width:300px;
          height:200px;
          -moz-box-orient:horizontal;
          -webkit-box-orient:horizontal;
          box-orient:horizontal;
       }
       #p1{
          -moz-box-flex:1.0; 
          -webkit-box-flex:1.0; 
          box-flex:1;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0; 
          -webkit-box-flex:2.0; 
          box-flex:2;
          border:1px solid blue;
       }
    </style>

 

如下圖所示:

技術圖片

 

二:vertical 可以讓子元素進行垂直排列; 

css代碼如下:

 

<style>
   *{margin:0;padding:0;}
   .test{
      display:-moz-box; 
      display:-webkit-box; 
      display:box;
      width:300px;
      height:200px;
      -moz-box-orient:vertical;
      -webkit-box-orient:vertical;
      box-orient:vertical;
   }
   #p1{
      -moz-box-flex:1.0; 
      -webkit-box-flex:1.0; 
      box-flex:1;
      border:1px solid red;
   }
   #p2{
      -moz-box-flex:2.0; 
      -webkit-box-flex:2.0; 
      box-flex:2;
      border:1px solid blue;
   }</style>

 

如下圖所示:

技術圖片

 

三:inherit。 Inherit屬性讓子元素繼承父元素的相關屬性。
效果和第一種效果一樣,都是水平對齊;

2. box-direction
還是如下html代碼:

<div class="test">
     <p id="p1">Hello</p>
     <p id="p2">W3School</p></div>

box-direction 用來確定父容器里的子容器的排列順序,具體的屬性如下代碼所示:
   normal | reverse | inherit
normal是默認值,按照HTML文檔里的結構的先后順序依次展示, 如果box-direction 設置為 normal,則結構順序還是 id為p1元素,id為p2元素。
reverse: 表示反轉。如果設置reverse反轉,則結構排列順序為 id為p2元素,id為p1元素。如下代碼:
css代碼如下:

 

<style>
       *{margin:0;padding:0;}
       .test{
          display:-moz-box; 
          display:-webkit-box; 
          display:box;
          width:300px;
          height:200px;
          -moz-box-direction:reverse;
          -webkit-box-direction:reverse;
          box-direction:reverse;
       }
       #p1{
          -moz-box-flex:1.0; 
          -webkit-box-flex:1.0; 
          box-flex:1;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0; 
          -webkit-box-flex:2.0; 
          box-flex:2;
          border:1px solid blue;
       }
    </style>

 

如下圖所示:

技術圖片

 

3. box-align:

box-align 表示容器里面字容器的垂直對齊方式,可選參數如下表示:
start | end | center | baseline | stretch
1. 對齊方式 start:表示居頂對齊
代碼如下:

 

<style>
       *{margin:0;padding:0;}
       .test{
          display:-moz-box; 
          display:-webkit-box; 
          display:box;
          width:300px;
          height:200px;
          -moz-box-align:start;
          -webkit-box-align:start;
          box-align:start; 
       }
       #p1{
          -moz-box-flex:1.0; 
          -webkit-box-flex:1.0; 
          box-flex:1;
          height:160px;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0; 
          -webkit-box-flex:2.0; 
          box-flex:2;
          height:100px;
          border:1px solid blue;
       }
    </style>

 

如上 P1 高度為160px p2 為100px; 對齊方式如下圖所示:

技術圖片

 

如果改為end的話,那么就是 居低對齊了,如下:

技術圖片

 

center表示居中對齊,如下:

技術圖片

 

stretch 在box-align表示拉伸,拉伸與其父容器等高。如下代碼:

技術圖片

 

在firefox下 和父容器下等高,滿足條件,如下:

技術圖片

 

在chrome下不滿足條件;如下:

技術圖片

 

4. box-pack

box-pack表示父容器里面子容器的水平對齊方式,可選參數如下表示:
  start | end | center | justify
box-pack:start; 表示水平居左對齊,對于正常方向的框,首個子元素的左邊緣被放在左側(最后的子元素后是所有剩余的空間)
對于相反方向的框,最后子元素的右邊緣被放在右側(首個子元素前是所有剩余的空間)代碼如下所示:

 

<style>
   *{margin:0;padding:0;}
   .test{
      display:-moz-box; 
      display:-webkit-box; 
      display:box;
      width:400px;
      height:120px;
      border:1px solid #333;
      -moz-box-pack:start;
      -webkit-box-pack:start;
      box-pack:start; 
   }
   #p1{
      width:100px;
      height:108px;
      border:1px solid red;  
   }
   #p2{
      width:100px;
      height:108px;
      border:1px solid blue;
   }</style>

 

如下圖所示:

技術圖片

 

box-pack:center;  表示水平居中對齊,均等地分割多余空間,其中一半空間被置于首個子元素前,另一半被置于最后一個子元素后; 如下圖所示:

技術圖片

 

box-pack:end; 表示水平居右對齊;對于正常方向的框,最后子元素的右邊緣被放在右側(首個子元素前是所有剩余的空間)。
對于相反方向的框,首個子元素的左邊緣被放在左側(最后子元素后是所有剩余的空間)。如下圖所示:

技術圖片

 

box-pack:Justify:
在box-pack表示水平等分父容器寬度(在每個子元素之間分割多余的空間(首個子元素前和最后一個子元素后沒有多余的空間))
如下:

技術圖片

 

H5移動端知識點總結(二)

標簽:play   內容   style   col   dir   http   alt   布局   移動   

原文地址:https://www.cnblogs.com/erkaige/p/10913514.html

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 吉利平特名人堂 版權所有 京ICP備13008772號-2
迷上了代碼!
北京福彩pk10app 二人麻将下载不联网下载 彩票人工计划全天免费 牌九至尊下载入口 现金二八杠游戏下载 现金二八杠游戏下载 重庆时时历史开奖记录 北京pk10稳赚技巧玩法 网上买彩票怎样稳赚不亏 销售单打印软件 摇皇上骰子玩法 网上通比牛牛有假吗 重庆福彩欢乐生肖走势图 pk10不定位345678打法 11选5手机计划软件破解版 博远棋牌