css4種布局技巧-table及 flex

table屬性

在一開始，使用表格布局受很多人喜愛，也就是使用<tr><td>等標簽，但是這種方法越來越不推薦，甚至有人列出來了一些列使用這些標簽的缺點，大體來說也就是不符合語義化，是網頁加載不流暢，內容不易修改之類的，但是在table布局的{display:table-row}{display:table-cell}興起之后，table布局又成了一種廣泛的布局方式。

以行為主

這個模型假設創作人創作的標記語言會顯式聲明行，而列是從單元格行里推導出來的。

即：第一列是由每行的第一個單元格構成。

屬性

display:table-row | table-cell | inline-table | table –row-group | table-header-group | table-footer-group | table-column |table-column-group |table-caption

inline-table:生成行內級表

table-row:生成行，相當於<tr>

table –row-group :生成行組，相當於<tbody>

table-cell:table-row 中的單元格，相當於<td>

table-caption:表的總標題，只能有一個

輔助屬性

border-collapse: collapse |separate |inherit

初始值：separate

collapse：合並邊框

separate：分割單元格邊框

 

border-spacing：<length>

說明：border-collapse必須為separate，用來控制table-cell間隔長度

合並邊框布局

當border-collapse為collapse時，則進行合並邊框操作

單元格邊框之間不允許有任何間隔、

所以邊框會合並，而且合並有一套他自己的規則和優先級，

1. border-style：hidden，優先級最高優先於合並所有其他邊框
2. none優先級最低
3. 寬邊框優先級大於窄邊框
4. 如果寬度一樣，邊框樣式 優先級順序：double>solid > dashed > dotted > ridge > outset > groove >  inset
5. 如果上述都一樣，邊框所處位置方面還有順序,按照：cell > row >row group > column >column group >table 使用

給出下面一段代碼

<table>
  <tr>
    <td id=r1c1>1-1</td>
    <td id=r1c2>1-2</td>
    <td id=r1c3>1-3</td>
    <td id=r1c4>1-4</td>
  </tr>
  <tr>
    <td id=r2c1>2-1</td>
    <td id=r2c2>2-2</td>
    <td id=r2c3>2-3</td>
    <td id=r2c4>2-4</td>
  </tr>
  <tr>
    <td id=r3c1>3-1</td>
    <td id=r3c2>3-2</td>
    <td id=r3c3>3-3</td>
    <td id=r3c4>3-4</td>
  </tr>
  <tr>
    <td id=r4c1>4-1</td>
    <td id=r4c2>4-2</td>
    <td id=r4c3>4-3</td>
    <td id=r4c4>4-4</td>
  </tr>
</table>

table{
  border-collapse:collapse;
  border:3px outset gray;
}
td{
  border:1px solid gray;
  padding:0.5em;
}
#r2c1,#r2c2{
  border-style:hidden;
}
#r1c1,#r1c4{
  border-width:5px;
}
#r2c4{
  border-style:double;
  border-width:3px;
}
#r3c4{
  border-style:dotted;
  border-width:2px;
}
#r4c1{
  border-bottom-style:hidden;
  
}
#r4c3{
  border-top:13px solid silver;
}

得出下面的圖像

 

分析各個單元格：

2-1  2-2 4-1bottom都為hidden，優先級最高，所以其邊框都為隱藏

1-1  1-4 3-3 bottom 邊框比相鄰框寬所以優先顯示

2-4  3-4 表明了寬度一樣的情況下 double > dotted

 

table-layout屬性

table-layout：auto | fixed | inherit

初始值：auto

固定布局fixed

表格一開始就固定寬度，寬度又第一列決定

給上面的html加上下面的css

table{
  table-layout:fixed;
  width:400px;
  border-collapse:collapse;
  border:2px outset gray;
}
td{
  border:1px solid gray;
}
#r1c1{
  width:200px;
}
#r1c2{
  width:75px;
}
#r2c3{
  width:500px;
}

出現

1-1 為100px  1-2 為75px  1-3 = 1-4 =（400-200-75-7）/2=59px；

在執行完#r1c2之后，表的布局已經確立下來了，所以#r2c3是無效的。

自動布局auto

自動布局必須要對每一個單元格計算才能得到最終的布局，原則上來說速度比固定布局慢很多

規則：

1. 對於每一個單元格，計算出他的最大寬度和最小寬度
2. 若width值大於最小可能寬度，則此width值為最小寬度，若width為auto，則最小寬度為單元格內容寬度
3. 對於每一列，計算該列的最小和最大寬度

對於上面的html，加上以下css代碼

table{
  table-layout:auto;
  width:auto;
  border-collapse:collapse;
  
}
col#c3{
  width:25%;
}
td{
  white-space: nowrap;
  border:1px solid gray;
}
#r1c2{
  width:40%;
}
#r2c2{
  width:50px;
}
#r2c3{
  width:35px;
}
#r4c1{
  width:100px;
}
#r4c4{
  width:1px;
}

出現、

來對現象做一個解釋

• 對於第一列    最小寬度是4-1的寬度，其他列沒有規定，所以最大值也是100；
• 對於第二列    最小寬度是2-2的50px  最大是1-2的40%
• 對於第三列    最小寬度是35px  最大是25%
• 對於第四列    最小寬度小於內容，所以最小寬度是單元格內容寬度，最大寬度也是，計算為25px

 

列寬如下

1. 最小100px  /  最大100px
2. 最小50px   /  最大40%
3. 最小35px   /  最大25%
4. 最小25px   /  最大25px

最后總寬度：最小寬度215px，最大371.4286px

默認取最大寬度

關於flex布局以及各種常見布局

在這兩篇博客中，這兩者介紹的比較詳細

flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

常見布局：http://www.cnblogs.com/langzi1989/p/5965816.html