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

转载于:https://www.cnblogs.com/Taniffer/p/6787275.html