35.CSS传统布局【下】
第二十七章 传统布局【下】
一、定位布局
CSS2提供了position属性来实现元素的绝对定位和相对定位
（1）static :默认值，无定位
（2）absolute :绝对定位，使用top,right,bottom,left进行位移
（3）relative :相对定位，使用top,right,bottom,left进行位移
（4）fixed :以窗口参考定位，使用top,right,bottom,left进行位移
//绝对定位，脱离文档流，以窗口文档左上角0,0为起点
header{
position: absolute;
top: 0;
left:0;
}
脱离文档流的意思是本身这个元素在文档流是占位置的，如果脱离了，就不占文档的位置，好像浮在空中一般，有了层次感。
由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在哪一层，会不会冲突覆盖。这时通过z-index属性来判定他们的层次关系。
属性 说明
auto 默认层次
数字 设置层次，数字越大，层次越高
//设置在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;
}
1、固定布局
//css部分
@charset "utf-8"
body{
margin: 0 auto;
width: 960px;
/*position: relative;*/
}
header{
width:960px;
height: 120px;
background-color: olive;
position: absolute;
top: 0;
left:0;
}
aside{
width: 200px;
height: 500px;
background-color: purple;
}
section{
width:760px;
height:500px;
background-color: maroon;
position: :absolute;
top:120;
right: 0;
}
footer{
width: 960px;
height: 120;
background-color: gray;
position: absolute;
top: 120;
right: 0;
}
在上面，基本都用了定位来进行固定布局，但细心的可以发现，其实只有右侧需要实行绝对定位，其他就按照普通的摆放即可，对于设计成流体布局，只要将长度设置成百分比即可
二、box-sizing
元素盒子内如果加入内边距padding和边距border后，他的总长度会增加，如果这个元素用于非常精确的布局时，我们就要计算增减，这个比较麻烦，尤其设置动态时。
CSS3提供了一个属性box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框长度增减问题。
属性 说明
content-box 默认值，border和padding这只后用于元素的总长度
border-box border和padding设置后不用于元素的总长度
//设置border-box让border和padding不额外增加元素大小
box-sizing：border-box；
box-sizing是CSS3推出的，各个厂商在实现时设置了私有前缀
Opera Firefox Chrome Safari IE
支持需带前缀 无 2～28 4～9 3.1～5 8.0+
支持不带前缀 10.1+ 29+ 10+ 6+ 9.0+
//完整形式
-webkit-box-sizing:border-box;
·
·
三、resize
CSS3提供了一个resize属性，来更改元素尺寸大小
（1）none 默认值，不允许用户调节元素大小
（2）both 用户可以调节元素的宽度和高度
（3）horizontal 用户可以调节元素的宽度
（4）vertical 用户可以调节元素的高度
一般普通元素，默认值是不允许的，但如果是表单类的textarea元素，默认是允许的，而普通元素需要设置overflow：auto，配合resize才会出现可拖拽的图像。
例、header{
height:120px;
background-color:alive;
over-flow:auto;
resize:both;
}
//header表格的右下方会有一个拖动图标。
