CSS3学习笔记——布局——day six

<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的宽度改为百分之百。会随窗口大小改变等比例缩放。

3.浮动布局

浮动布局主要采用 float 和 clear 两个属性来构建。应用于pc端。
固定布局 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; }
/*如果footer采用浮动，与header不同，浮动之后必须强行设置宽度，不然会等同于内容宽度，header没有浮动，所以长度会默认为父元素宽度*/

流体布局

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

4.定位布局

用position 属性来实现元素的绝对定位和相对定位。
绝对定位absolute，脱离文档流，以窗口文档左上角 0,0 为起点。

相对定位 relative，不脱离文档流，占位偏移

脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。通过 z-index 属性来判定它们的层次关系。
固定定位css里面

body { width: 960px; margin: 0 auto; position: relative; }
/*在body父元素设置一个不需要top和left定位的相对定位，这个叫设置参考点
所以子元素可以根据这个点进行绝对定位，而不是根据浏览器窗口进行绝对定位
将需要设置参考点的父元素设置为相对，且不设置坐标，如果父元素设置了参考点，子元素的绝对定位将以它为基准  */
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; right: 0; }
footer { width: 960px; height: 120px; background-color: gray; /*position: absolute; top: 620px; }

流体布局只需要设置百分比就可以。

box-sizing

这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。
元素盒子如果加入了内边距 padding 和边框 border 后，元素的总长度会增加。

那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。

这其实是比较烦人的操作，尤其是动态设置页面布局的时候。

两个属性值：

content-box 默认值，border 和 padding 设置后用于元素的总长度。

border-box border 和 padding 设置后不用于元素的总长度，不在额外增加元素大小。

resize

更改元素尺寸大小，可鼠标拖动，普通元素需要设置 overflow:auto，配合 resize 才会出现可拖拽图形。

二、多列布局

columns

多列布局属性，实现列动态变换的功能。主要文本比较多的排版。

完整形式

-webkit-columns: 150px 4;

-moz-columns: 150px 4;

columns: border-box;

① 分成四列，每列宽度自适应

-moz-columns: auto 4;
② 设置列宽
-moz-column-width: 200px; 这里设置了 200px，有点最小宽度的意思。

当浏览器缩放到小于 200 大小时，将变成 1 列显示。而如果是 auto，则一直保持四列。
其它属性使用较少。

三、弹性伸缩布局

(Flexible Box)用来实现未来响应式弹性伸缩布局方案。

非常重要（阮一峰 flex 语法篇实例篇）

div { 
	display: -moz-box; 
	display: -webkit-box; 
	display: box; 
    /*IE10 的伸缩布局*/
    display:-ms-flexbox;
}

弹性伸缩盒子里面的子元素就会自适应，默认从左到右排列。

旧版本box

① box-orient

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

-webkit-box-orient: vertical;设置垂直流动
② box-direction

主要是设置伸缩容器中的流动顺序。

-moz-box-direction: reverse;

normal 默认值，正常顺序 reverse 逆序
③ box-pack

用于伸缩项目的分布方式，块从哪开始排列。

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

-moz-box-align: center;
居中对齐，清理上下额外空间，内容占多少，块就多大，类似瀑布流。

⑤ 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 属性可以设置伸缩项目的显示位置。

p:nth-child(1) { -moz-box-ordinal-group: 3; }

将第一个位置的元素，跳转到第三个位置。

混合Flexbox 模型

display 的属性值：

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

② flex-wrap 属性类似与旧版本中的 box-lines，决定内容是否换行。

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

-ms-flex-flow: row wrap;
④ flex-pack 属性和旧版本中的 box-pack 一样，设置伸缩项目的对齐方式。

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

⑥ 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 属性一样控制伸缩项目出现的顺序。

新版本Flexbox 模型

现代浏览器大部分不需要前缀 div { display: flex; } Webkit 内核的浏览器，必须加上-webkit-前缀。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

以下6个属性设置在容器上

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

② flex-wrap 属性类似与旧版本中的 box-lines，决定内容是否换行。需要前缀。

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

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

justify-content: space-around;

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

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

以下6个属性设置在项目上

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

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