CSS中的传统布局、多列布局、弹性伸缩布局及Emmet工具

亦凉 2023-02-28 12:53 28阅读 0赞

## 1、传统布局 ##

##### 布局模型 #####

在早期没有平板和智能手机等移动设备大行其道的时期，Web 页面的设计主要是面向 PC 端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率 1024 \* 768 设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去 28，最终固定长度设置为 996 即可。当然，也有一些网站在近两年讲最低分辨率设置为 1280 减去滚动条宽度，因为大显示器逐步主流。  
除了刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比如 100%。不管你是什么分辨率，它都能全屏显示，当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。  
我们创建一个三行两列模型。并采用表格布局和浮动布局，构建固定和流体布局的方式，模型图如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

##### 表格布局 #####

表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布局非常不建议使用，只是教学了解。表格应该用它最为语义的地方，就是二维表的数据显示。

###### 固定布局 ######

// HTML 部分
    <table border="0">
    	<tr>
    		<td colspan="2" class="header">header</td>
    	</tr>
    	<tr>
    		<td class="aside">aside</td>
    		<td class="section">section</td>
    	</tr>
    	<tr>
    		<td colspan="2" class="footer">footer</td>
    	</tr>
    </table>
    
    // CSS 部分
    body {
    	margin:0;
    }
    table {
    	margin:0 auto;
    	width: 960px;
    	border-spacing: 0;
    }
    .header {
    	height: 120px;
    	background-color: olive;
    }
    .aside {
    	width: 200px;
    	height: 500px;
    	background-color: purple;
    }
    .section {
    	width: 760px;
    	height: 500px;
    	background-color: maroon;
    }
    .footer {
    	height: 120px;
    	background-color: gray;
    }

###### 流体布局 ######

表格的固定布局改成流体布局非常简单，只需要设置 table 为 100%即可。

// 修改 table
    table {
    	width: 100%;
    }

##### 浮动布局 #####

浮动布局主要采用 float 和 clear 两个属性来构建。

###### 固定布局 ######

// HTML 部分
    <header>
    	header
    </header>
    <aside>
    	aside
    </aside>
    <section>
    	section
    </section>
    <footer>
    	footer
    </footer>
    
    // CSS 部分
    body {
    	width: 960px;
    	margin: 0 auto;
    	color: white;
    }
    header {
    	height: 120px;
    	background-color: olive;
    }
    aside {
    	width: 200px;
    	height: 500px;
    	background-color: purple;
    	float: left;
    }
    section {
    	width: 760px;
    	height: 500px;
    	background-color: maroon;
    	float:right;
    }
    footer {
    	height: 120px;
    	background-color: gray;
    	clear:both;
    }

###### 流体布局 ######

流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20% 和 80%即可。

// CSS 部分
    body {
    	width: auto;
    }
    aside {
    	width: 20%;
    }
    section {
    	width: 80%;
    }

##### 定位布局 #####

在使用定位布局前，我们先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>默认值，无定位</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>绝对定位，使用 top、right、bottom、left 进行位移</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>相对定位，使用 top、right、bottom、left 进行位移</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>以窗口参考定位，使用 top、right、bottom、left 进行位移</td> 
  </tr> 
 </tbody> 
</table>

// 绝对定位，脱离文档流，以窗口文档左上角 0,0 为起点
    header {
    	position: absolute;
    	top: 100px;
    	left: 100px;
    }

所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。  
由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过 z-index 属性来判定它们的层次关系。

// 设置在 100 层上
    header {
    	z-index: 100;
    }
    
    // 以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动
    header {
    	position: fixed;
    	top: 100px;
    	left: 100px;
    }
    
    // 相对定位，不脱离文档流，占位偏移
    header {
    	position: relative;
    	top: 100px;
    	left: 100px;
    }

这三种分别都在各自的情况下使用，均比较常用。但还有一种情况，就是：

1.  既要脱离文档流（这样元素之间不会相互冲突）；
2.  以父元素，比如 body 或其他父元素为参考点（这样可以实现区域性绝对定位）；
3.  还必须是绝对定位。

// 第一步，将需要设置参考点的父元素设置为相对，且不设置坐标
    body {
    	position: relative;
    }
    
    // 第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准
    header {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }

###### 固定布局 ######

// CSS 部分
    body {
    	width: 960px;
    	margin: 0 auto;
    	position: relative;
    }
    header {
    	width: 960px;
    	height: 120px;
    	background-color: olive;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    aside {
    	width: 200px;
    	height: 500px;
    	background-color: purple;
    	position: absolute;
    	top: 120px;
    	left: 0;
    }
    section {
    	width: 760px;
    	height: 500px;
    	background-color: maroon;
    	position: absolute;
    	top: 120px;
    	/*left: 200px;*/
    	right: 0;
    }
    footer {
    	width: 960px;
    	height: 120px;
    	background-color: gray;
    	position: absolute;
    	top: 620px;
    }

在上面，基本都用了定位来进行固定布局。但细心的可以发现，其实只有右侧需要实行绝对定位，其他就按照普通的摆放即可。对于设计成流体布局，只要将长度设置成百分比即可。

##### box-sizing #####

在盒模型那个章节，我们了解到元素盒子如果加入了内边距 padding 和边框 border 后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。  
CSS3 提供了一个属性 box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>content-box</td> 
   <td>默认值，border 和 padding 设置后用于元素的总长度</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>border 和 padding 设置后不用于元素的总长度</td> 
  </tr> 
 </tbody> 
</table>

// 设置 border-box 让 border 和 padding 不再额外增加元素大小
    aside {
    	width: 200px;
    	height: 500px;
    	background-color: purple;
    	padding: 10px;
    	border: 5px solid red;
    	box-sizing: border-box;
    	float: left;
    }

box-sizing 是 CSS3 推出的，各个厂商在实现时设置了私有前缀。

<table> 
 <thead> 
  <tr> 
   <th>是否支持带前缀</th> 
   <th>Opera</th> 
   <th>Firefox</th> 
   <th>Chrome</th> 
   <th>Safari</th> 
   <th>IE</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>支持需带前缀</td> 
   <td>无</td> 
   <td>2 ~ 28</td> 
   <td>4 ~ 9</td> 
   <td>3.1 ~ 5</td> 
   <td>8.0+</td> 
  </tr> 
  <tr> 
   <td>支持不带前缀</td> 
   <td>10.1+</td> 
   <td>29+</td> 
   <td>10+</td> 
   <td>6+</td> 
   <td>9.0+</td> 
  </tr> 
 </tbody> 
</table>

// 完整形式
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

##### resize #####

CSS3 提供了一个 resize 属性，来更改元素尺寸大小。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>默认值，不允许用户调整元素大小</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>用户可以调节元素的宽度和高度</td> 
  </tr> 
  <tr> 
   <td>horizontal</td> 
   <td>用户可以调节元素的宽度</td> 
  </tr> 
  <tr> 
   <td>vertical</td> 
   <td>用户可以调节元素的高度</td> 
  </tr> 
 </tbody> 
</table>

一般普通元素，默认是不允许的。但如果是表单类的 textarea 元素，默认是允许的。而普通元素需要设置 overflow:auto，配合 resize 才会出现可拖拽的图形。

// 允许修改
    aside {
    	resize: both;
    	overflow:auto;
    }

## 2、多列布局 ##

##### 早期多列问题 #####

我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期 CSS 提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。因为它是区块性的，对于动态的内容无法伸缩自适应，基本无能力。

// 五段内容，分为三列
    <div>
    	<p>我是第一段内容....省略的部分复制大量文本</p>
    	<p>我是第二段内容....省略的部分复制大量文本</p>
    	<p>我是第三段内容....省略的部分复制大量文本</p>
    	<p>我是第四段内容....省略的部分复制大量文本</p>
    	<p>我是第五段内容....省略的部分复制大量文本</p>
    </div>
    
    // 带标题的五段内容，分为三列
    <div>
    	<h4>第一段标题</h4>
    	<p>我是第一段内容....省略的部分复制大量文本</p>
    	<h4>第二段标题</h4>
    	<p>我是第二段内容....省略的部分复制大量文本</p>
    	<h4>第三段标题</h4>
    	<p>我是第三段内容....省略的部分复制大量文本</p>
    	<h4>第四段标题</h4>
    	<p>我是第四段内容....省略的部分复制大量文本</p>
    	<h4>第五段标题</h4>
    	<p>我是第五段内容....省略的部分复制大量文本</p>
    </div>

上面两组内容，如果想用浮动和定位实现流体三列，基本不可能。并且实际应用中，需求可能多变，要更改成四列或者五列呢？所以，CSS3 提供了多列布局属性 columns 来实现这个动态变换的功能。

##### 属性及版本 #####

CSS3 提供了 columns 多列布局属性等 7 个属性集合，具体如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>columns</td> 
   <td>集成 column-width 和 column-count 两个属性</td> 
  </tr> 
  <tr> 
   <td>column-width</td> 
   <td>定义每列列宽度</td> 
  </tr> 
  <tr> 
   <td>column-count</td> 
   <td>定义分分列列数</td> 
  </tr> 
  <tr> 
   <td>column-gap</td> 
   <td>定义列间距</td> 
  </tr> 
  <tr> 
   <td>column-rule</td> 
   <td>定义列边框</td> 
  </tr> 
  <tr> 
   <td>column-span</td> 
   <td>定义多列布局中子元素跨列效果，firefox 不支持</td> 
  </tr> 
  <tr> 
   <td>column-fill</td> 
   <td>控制每列的列高效果，主流浏览器不支持</td> 
  </tr> 
 </tbody> 
</table>

由于 column 属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。下面是主流浏览器的支持和前缀情况。

<table> 
 <thead> 
  <tr> 
   <th>是否支持带前缀</th> 
   <th>Opera</th> 
   <th>Firefox</th> 
   <th>Chrome</th> 
   <th>Safari</th> 
   <th>IE</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>支持需带前缀</td> 
   <td>11.5 ~ 29</td> 
   <td>2 ~ 40</td> 
   <td>4 ~ 45</td> 
   <td>3.1 ~ 8</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>支持不带前缀</td> 
   <td>无</td> 
   <td>无</td> 
   <td>无</td> 
   <td>无</td> 
   <td>10.0+</td> 
  </tr> 
 </tbody> 
</table>

通过上面的表格，我们可以了解到，要想让最新的浏览器全部实现效果，都必须使用前缀。

// 完整形式
    -webkit-columns: 150px 4;
    -moz-columns: 150px 4;
    columns: border-box;

##### 属性解释 #####

为了方便演示，我们在 Firefox 火狐浏览器测试，只用-moz-前缀演示。

###### columns ######

columns 是一个复合属性，包含 columns-width 和 columns-count 这两种简写。意为同时设置分列列数和分列宽度。

// 分成四列，每列宽度自适应
    -moz-columns: auto 4;

###### column-width ######

column-width 属性，用于设置每列的宽度。

// 设置列宽
    -moz-column-width: 200px;

这里设置了 200px，有点最小宽度的意思。当浏览器缩放到小于 200 大小时，将变成 1 列显示。而如果是 auto，则一直保持四列。

###### column-count ######

column-count 属性，用于设置多少列。

// 设置列数
    -moz-column-count: 4;

###### column-gap ######

column-gap 属性，用于设置列间距。

// 设置列间距
    -moz-column-gap: 100px;

###### column-rule ######

column-rule 属性，设置每列中间的分割线。

// 设置列边线
    -moz-column-rule: 2px dashed gray;

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>column-rule</td> 
   <td>&lt;宽度&gt; &lt;样式&gt; &lt;颜色&gt;的边框简写形式</td> 
  </tr> 
  <tr> 
   <td>column-rule-width</td> 
   <td>单独设置边框宽度</td> 
  </tr> 
  <tr> 
   <td>column-rule-style</td> 
   <td>单独设置边框的样式</td> 
  </tr> 
  <tr> 
   <td>column-rule-color</td> 
   <td>单独设置边框的颜色</td> 
  </tr> 
 </tbody> 
</table>

列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时，它自动消失了。

###### column-span ######

column-span 属性，设置跨列大标题。

// 跨列标题，由于火狐尚未支持，固使用 webkit
    -webkit-column-span: all;

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>默认值，表示不跨列</td> 
  </tr> 
  <tr> 
   <td>all</td> 
   <td>表示跨列</td> 
  </tr> 
 </tbody> 
</table>

## 3、弹性伸缩布局 ##

##### 布局简介 #####

CSS3 提供一种崭新的布局方式：Flexbox 布局，即弹性伸缩布局模型(Flexible Box)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中，可能还有各种改动，浏览器的兼容性还存在问题。  
首先，我们来看下 Flexbox 旧版本的浏览器兼容情况：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>IE</th> 
   <th>Firefox</th> 
   <th>Chrome</th> 
   <th>Opera</th> 
   <th>Safari</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>带前缀</td> 
   <td>无</td> 
   <td>4 ~ 25</td> 
   <td>4 ~ 31</td> 
   <td>15 ~ 18</td> 
   <td>5.17+</td> 
  </tr> 
  <tr> 
   <td>不带前缀</td> 
   <td>无</td> 
   <td>无</td> 
   <td>无</td> 
   <td>无</td> 
   <td>无</td> 
  </tr> 
 </tbody> 
</table>

以上的数据，我们摘自 CSS3 手册上的。当然，不同的教材和文章的会略有不同。但误差率也就一到两个版本，影响不大。  
首先，第一步：先创建一段内容，分成三个区域。

// HTML 部分
    <div>
    	<p>第一段内容...</p>
    	<p>第二段内容...</p>
    	<p>第三段内容...</p>
    </div>
    
    // CSS 部分
    p {
    	width: 150px;
    	border: 1px solid gray;
    	background-color: silver;
    	margin: 5px;
    	padding: 5px;
    }
    div {
    	display: -moz-box;
    	display: -webkit-box;
    	display: box;
    }

通过以上设置，在除了 IE 浏览器外，布局实现了水平分布。那么下面，我们就重点研究一下这些属性的含义。

##### 旧版本 #####

如果属性和属性值为：display:box，那么就是 2009 年 7 月份设定的工作草案，属于旧版本。它面向的是一些早期浏览器的弹性布局方案。  
首先，我们要将几个需要布局模块的父元素设置一下容器属性 display。

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>box</td> 
   <td>将容器盒模型作为块级弹性伸缩盒显示（旧版本）</td> 
  </tr> 
  <tr> 
   <td>inline-box</td> 
   <td>将容器盒模型作为内联级弹性伸缩盒显示（旧版本）</td> 
  </tr> 
 </tbody> 
</table>

我们知道块级它是占用整行的，类似`<div>`元素；而内联级不占用整行，类似`<span>`元素。但是我们设置了整个盒子，他们都不占用，保持一致。

// 设置弹性，以火狐为例
    div {
    	display: -moz-box;
    }

###### box-orient 属性 ######

box-orient 主要实现盒子内部元素的流动方向。

// 设置垂直流动
    div {
    	-webkit-box-orient: vertical;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>horizontal</td> 
   <td>伸缩项目从左到右水平排列</td> 
  </tr> 
  <tr> 
   <td>vertical</td> 
   <td>伸缩项目从上到下垂直排列</td> 
  </tr> 
  <tr> 
   <td>inline-axis</td> 
   <td>伸缩项目沿着内联轴排列显示</td> 
  </tr> 
  <tr> 
   <td>block-axis</td> 
   <td>伸缩项目沿着块轴排练显示</td> 
  </tr> 
 </tbody> 
</table>

###### box-direction ######

box-direction 属性主要是设置伸缩容器中的流动顺序。

// 设置逆序
    div {
    	-moz-box-direction: reverse;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>默认值，正常顺序</td> 
  </tr> 
  <tr> 
   <td>reverse</td> 
   <td>逆序</td> 
  </tr> 
 </tbody> 
</table>

###### box-pack ######

box-pack 属性用于伸缩项目的分布方式。

// 分布方式已结束位置靠齐
    div {
    	-moz-box-pack: end;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>伸缩项目以起始点靠齐</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>伸缩项目以结束点靠齐</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>伸缩项目以中心点靠齐</td> 
  </tr> 
  <tr> 
   <td>justify</td> 
   <td>伸缩项目平局分布，-webkit-支持，-moz-不支持</td> 
  </tr> 
 </tbody> 
</table>

###### box-align ######

box-align 属性用来处理伸缩容器的额外空间。

// 居中对齐，清理上下额外空间
    div {
    	-moz-box-align: center;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>伸缩项目以顶部为基准，清理下部额外空间</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>伸缩项目以底部为基准，清理上部额外空间</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>伸缩项目以中部为基准，平均清理上下部额外空间</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>伸缩项目以基线为基准，清理额外的空间</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>伸缩项目填充整个容器，默认</td> 
  </tr> 
 </tbody> 
</table>

###### box-flex ######

box-flex 属性可以使用浮点数分配伸缩项目的比例。

// 设置每个伸缩项目占用的比例
    p:nth-child(1) {
    	-moz-box-flex: 1;
    }
    p:nth-child(2) {
    	-moz-box-flex: 2.5;
    }
    p:nth-child(3) {
    	-moz-box-flex: 1;
    }

###### box-ordinal-group ######

box-ordinal-group 属性可以设置伸缩项目的显示位置。

// 将第一个位置的元素，跳转到第三个位置
    p:nth-child(1) {
    	-moz-box-ordinal-group: 3;
    }

##### 混合过渡版 #####

混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是针对 IE10 浏览器实现的伸缩布局效果，其功能和旧版本的属性大同小异。我们还是采用上一节课的文件，然后使用混合过渡代码，实现 IE10 的伸缩布局。  
首先，设置伸缩盒的 display 有如下两个属性值：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flexbox</td> 
   <td>将容器盒模型作为块级弹性伸缩盒显示（混合版本）</td> 
  </tr> 
  <tr> 
   <td>inline-flexbox</td> 
   <td>将容器盒模型作为内联级弹性伸缩盒显示（混合版本）</td> 
  </tr> 
 </tbody> 
</table>

// 需要 IE 前缀-ms-
    div {
    	display: -ms-flexbox;
    }

###### flex-direction ######

flex-direction 属性和旧版本 box-orient 属性一样，都是设置伸缩项目的排列方式。

// 设置从上往下排列
    div {
    	-ms-flex-direction: column;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>设置从左到右排列</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td>设置从右到左排列</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>设置从上到下排列</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td>设置从下到上排列</td> 
  </tr> 
 </tbody> 
</table>

###### flex-wrap ######

flex-wrap 属性类似与旧版本中的 box-lines，但是 box-lines 我们没有讲解，原因是没有浏览器支持它。

// 设置无法容纳时，自动换行
    div {
    	-ms-flex-wrap: wrap;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>nowrap</td> 
   <td>默认值，都在一行或一列显示</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>伸缩项目无法容纳时，自动换行</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td>伸缩项目无法容纳时，自动换行，方向和 wrap 相反</td> 
  </tr> 
 </tbody> 
</table>

###### flex-flow ######

flex-flow 属性是集合了排列方向和控制换行的简写形式。

// 简写形式
    div {
    	-ms-flex-flow: row wrap;
    }

###### flex-pack ######

flex-pack 属性和旧版本中的 box-pack 一样，设置伸缩项目的对其方式。

// 按照中心点对齐
    div {
    	-ms-flex-pack: center;
    }

###### flex-align ######

flex-align 属性和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。

// 处理额外空间
    div {
    	-ms-flex-align: center;
    }

###### flex ######

flex 属性和旧版本中的 box-flex 类似，用来控制伸缩容器的比例分配。

// 设置比例分配
    p:nth-child(1) {
    	-ms-flex: 1;
    }
    p:nth-child(2) {
    	-ms-flex: 3;
    }
    p:nth-child(3) {
    	-ms-flex: 1;
    }

###### flex-order ######

flex-order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

// 设置伸缩项目顺序
    p:nth-child(1) {
    	-ms-flex-order: 2;
    }
    p:nth-child(2) {
    	-ms-flex-order: 3;
    }
    p:nth-child(3) {
    	-ms-flex-order: 1;
    }

##### 新版本 #####

新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现了统一。  
首先，设置伸缩盒的 display 有如下两个属性值：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex</td> 
   <td>将容器盒模型作为块级弹性伸缩盒显示（新版本）</td> 
  </tr> 
  <tr> 
   <td>inline-flex</td> 
   <td>将容器盒模型作为内联级弹性伸缩盒显示（新版本）</td> 
  </tr> 
 </tbody> 
</table>

// 大部分不需要前缀
    div {
    	display: flex;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>IE</th> 
   <th>Firefox</th> 
   <th>Chrome</th> 
   <th>Opera</th> 
   <th>Safari</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>带前缀</td> 
   <td>无</td> 
   <td>无</td> 
   <td>21 ~ 28</td> 
   <td>无</td> 
   <td>7.0</td> 
  </tr> 
  <tr> 
   <td>不带前缀</td> 
   <td>11+</td> 
   <td>20+</td> 
   <td>29+</td> 
   <td>12.1</td> 
   <td>无</td> 
  </tr> 
 </tbody> 
</table>

从这张表可以看出，只有 webkit 引擎的浏览器 Chrome 和 Safari 的版本需要添加 -webkit-，而 Chrome 浏览器 29 版本以后可以省略了。

###### flex-direction ######

flex-direction 属性和旧版本 box-orient 属性一样，都是设置伸缩项目的排列方式。

// 设置从上往下排列
    div {
    	flex-direction: column;
    }

###### flex-wrap ######

flex-wrap 属性类似与旧版本中的 box-lines，但是 box-lines 我们没有讲解，原因是没有浏览器支持它。

// 设置无法容纳时，自动换行
    div {
    	-ms-flex-wrap: wrap;
    }

###### flex-flow ######

flex-flow 属性是集合了排列方向和控制换行的简写形式。

// 简写形式
    div {
    	flex-flow: row wrap;
    }

###### justify-content ######

justify-content 属性和旧版本中的 box-pack 一样，设置伸缩项目的对其方式。

// 按照中心点对齐
    div {
    	justify-content: space-around;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-start</td> 
   <td>伸缩项目以起始点靠齐</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>伸缩项目以结束点靠齐</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>伸缩项目以中心点靠齐</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>伸缩项目平局分布</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>同上，但两端保留一半的空间</td> 
  </tr> 
 </tbody> 
</table>

###### align-items ######

align-items 属性和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。

// 处理额外空间
    div {
    	align-itmes: center;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-start</td> 
   <td>伸缩项目以顶部为基准，清理下部额外空间</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>伸缩项目以底部为基准，清理上部额外空间</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>伸缩项目以中部为基准，平均清理上下部额外空间</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>伸缩项目以基线为基准，清理额外的空间</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>伸缩项目填充整个容器，默认</td> 
  </tr> 
 </tbody> 
</table>

###### align-self ######

align-self 和 align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和 align-itmes 一致。

// 单独设置清理额外空间
    p:nth-child(2) {
    	align-self: center;
    }

###### flex ######

flex 属性和旧版本中的 box-flex 类似，用来控制伸缩容器的比例分配。

// 设置比例分配
    p:nth-child(1) {
    	flex: 1;
    }
    p:nth-child(2) {
    	flex: 3;
    }
    p:nth-child(3) {
    	flex: 1;
    }

###### order ######

order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

// 设置伸缩项目顺序
    p:nth-child(1) {
    	order: 2;
    }
    p:nth-child(2) {
    	order: 3;
    }
    p:nth-child(3) {
    	order: 1;
    }

## 4、使用 Emmet ##

Sublime Text3 有一个 HTML5 代码提示插件叫Emmet，这个插件比自带原生的要强大许多。

##### 安装方式 #####

Emmet 插件安装一般采用两种方式：

1.  通过命令安装；
2.  下载离线安装。

这里直接采用的是下载离线安装方式。具体步骤：

1.  解压下载好的 Emmet 插件包(这里会提供)；
2.  将 Emmet 和 PyV8 两个文件夹复制到 Sublime Text3 的程序包中；
3.  左下角会显示自动安装，安装好后，重启 Sublime Text3；
4.  在编辑器输入英文状态下的“!”，然后 ctrl+e，出现了 HTML5 的代码库，则安装成功。

##### 自定义！生成 #####

我们输入!，然后 ctrl+e，默认情况下会出现如下代码：

// 默认代码
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    	</head>
    	<body>
    	</body>
    </html>

这里有两个地方和我们之前生成的代码不一样，第一处是：doctype 没有大写；第二处：lang 是 en 的。其实这两处不改也没有太大关系，但有强迫症的看了可能会难受。具体修改方法如下：

1.  首先，进入程序包 pagkages；
2.  其次，进入 Emmet 文件夹，再进入 emmet 文件夹，找到 snippets.json 文件；
3.  最后，打开这个文件，找到相应处修改即可。

##### 快速生成 #####

Emmet 提供了非常丰富的 HTML 和 CSS 代码的快速生成功能，通过使用快速生成代码，极大的增加了开发速度。只不过，Emmet 提供的生成方式需要二次学习，起初可能还不如手工敲击的快。所以，需要一定时间的学习磨合。

// ! + (ctrl + e 或 tab 键) 或 html:5 + tab 键，快速生成 HTML5 代码结构
    <!DOCTYPE html>
    <html lang="zh-cn">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    	</head>
    	<body>
    	</body>
    </html>

所有代码生成，都需要通过 tab 键来生成代码，后面不再赘述。

// 快速生成标签代码
    a
    <a href=""></a>
    
    // 快速生成标签相应的属性值
    a:link、a:mail
    <a href="http://"></a>
    <a href="mailto:"></a>
    
    // 生成标签内的值
    a{超链接}
    <a href="">超链接</a>
    
    // 生成 CSS 链接 link
    link
    <link rel="stylesheet" href="">
    
    // 生成表单控件
    input、input:hidden
    <input type="text">
    <input type="hidden" name="">
    
    // 生成带子标签的一组标签
    ul+、ol+、dl+、table+
    <ul>
    	<li></li>
    </ul>
    <ol>
    	<li></li>
    </ol>
    <dl>
    	<dt></dt>
    	<dd></dd>
    </dl>
    <table>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    
    // 生成嵌套子标签
    nav>ul>li
    <nav>
    	<ul>
    		<li></li>
    	</ul>
    </nav>
    
    // 生成相邻兄弟标签
    div+p+h1
    <div></div>
    <p></p>
    <h1></h1>
    
    // 生成乘积数量的标签
    ul>li*5
    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
    
    // 创建具有 ID 的标签
    div#header
    <div id="header"></div>
    
    // 创建具有 class 的标签
    div.header、div.header.sidebar
    <div class="header"></div>
    <div class="header sidebar"></div>

以上是 HTML 部分的代码生成功能，下面来看下 CSS 的快速生成功能：

// 生成 position: relative
    pos

输入 pos 即可出现 position:relative 这组 CSS 样式，并且 relative 是选定状态，有助于你更换属性值。  
但是我们发现使用 sublime 结合 Emmet 插件的 CSS 提示非常的灵活，不会死板的必须要输入 pos。下面的输入都可以得到相应的值：

po = position: relative

只要输入 po 或者大于 po 字母量的值，都可以得到 position:relative。当然，如果你只是输入 p，那么由于优先级的考虑，出现的是 padding: |。  
如果你输入有误，它也会自动纠错，比如下面这个：

pod = position: relative

如果你想一开始得到的是 absolute 这个属性值，那么直接输入：

poa = position: absolute;

当然，上面的标准写法是这样的：

pos:a = position: absolute;

如果想输入背景的属性，直接使用 bg 即可：

bg = background: |;

使用 bg+可以展开背景属性的完整形式：

bg+ = background: #fff url() 0 0 no-repeat;

使用 bg:n 可以设置背景属性值为 none：

bg:n = background: none;

HTML 和 CSS 其他大部分代码生成方案，可以参考如下网址：  
http://docs.emmet.io/cheat-sheet/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/59587fef43974f8a8f2424849df46f05.png