CSS3 传统布局（下）（20160903-0034）

一、定位布局

CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。

属性	说明
static	默认值，无定位
absolute	绝对定位，使用 top、right、bottom、left 进行位移
relative	相对定位，使用 top、right、bottom、left 进行位移
fixed	以窗口参考定位，使用 top、right、bottom、left 进行位移

由于绝对位置脱离了文档流，出现层次感。那么每个元素到底在哪一层，会不会冲突覆盖。这时通过 z-index 属性来判断它们的层次关系。

属性	说明
auto	默认层次
数字	设置层次，数字越大，层次越高

@charset "utf-8";

/* 设置 body 方便观察 */
body{
margin: 100px;
height: 900px;
border: solid black 1px;
}

div, header{
width: 150px;
height: 150px;
}
/********************************** 绝对位置 **********************************/
/* 设置绝对位置，脱离文档流，以窗口文档左上角 0,0 为起点。
* 脱离文档流，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在空中一般，有了层次感。
* 此时元素会随之滚动条滚动而滚动
*/
header{
/*background-color: green;
position: absolute;
top: 0;
left: 0;*/
}

div{
/*background-color: silver;
position: absolute;
top: 10px;
left: 10px;*/
}
/* 给 header 与 div 设置绝对位置后，出现层次，其中 header 在下边，想要让 header 来到上方，设置 z-index */
header{
/*z-index: 2;*/
}

/********************************** 相对定位 **********************************/
/*
* 相对定位，是相对元素正常的位置来说的。
*/
header{
/*background-color: green;
position: relative;
top: 50px;
left: 100px;*/
}

div{
/*background-color: silver;*/
}

/********************************** 以窗口参考点位 **********************************/
/*
* 以窗口参考位置，脱离文档流，会随着滚动条滚动而滚动
*/

header{
/*background-color: green;
position: fixed;
top: 0;
left: 0;*/
}

div{
/*background-color: silver;
position: fixed;
top: 10px;
left: 10px;*/
}

这三种均比较常用。还有一种情况，就是：a. 既要脱离文档流（这样元素之间不会相互冲突）；b. 以父元素，比如 body 或其它父元素为参考点（这样可以实现区域性绝对定位）；c. 必须是绝对定位。
/* 第一步，将需要设置参考点的父元素设置为相对，且不设置坐标 */
body{
position: relative;
}
/* 第二步，如果父元素设置了参考点，子元素的绝对位置将以它为基准 */
header{
position: absolute;
top: 30px;
left: 80px;
}1、固定布局，用上边的定位方法，实现上篇博客中的布局效果。设计成流体布局，主要将长度设置为百分比即可。
@charset "utf-8";

/* 这里设置相对位置，且不设置坐标 */
body{
/*width: 960px;*/
width: 100%;
padding: 0;
margin: 0 auto;
position: relative;
color: white;
}

header{
height: 120px;
background-color: olive;
}

aside{
/*width: 200px;*/
width: 20%;
height: 500px;
background-color: purple;
}
/* 设置绝对位置，以父元素的参考点为基准点 */
section{
position: absolute;
top: 120px;
right: 0px;
/*width: 760px;*/
width: 80%;
height: 500px;
background-color: maroon;
}

footer{
height: 120px;
background-color: gray;
}二、box-sizing
元素的盒模型如果加入了内边距 padding 和边框 border 后，它的总长度会增加。那么如果这个元素用于非常精确的布局时（如上例），就需要进行计算增加（边框和内边距增加，元素的 width 相应减少）。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。CSS3 提供了一个属性 box-sizing ，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

属性	说明
content-box	默认值，border 和 padding 设置后用于元素的总长度
border-box	border 和 padding 设置后不用于元素的总长度

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

	Opera	Firefox	Chrome	Safari	IE
支持需带前缀	无	2 ~ 28	4 ~ 9	3.1 ~ 5	8.0+
支持不带前缀	10.1+	29+	10+	6+	9.0+

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

属性	说明
none	默认值，不允许用户调整元素大小
both	用户可以调节元素的宽度和高度
horizontal	用户可以调节元素的宽度
vertical	用户可以调节元素的高度

提示：一般普通元素，默认值是不允许的。但如果是表单类的 textarea 元素，默认是允许的。而普通元素需要设置 overflow:auto。配合 resize 才会出现可拖拽的图形。
/********************************** resize，配合 overflow: auto 使用 **********************************/
/*
* textarea 默认是可以拖拽更改大小的
*/
textarea{
overflow: auto;

/* 只允许调整高度 */
/*resize: vertical;*/

/* 只允许调整宽度 */
/*resize: horizontal;*/

/* 不允许调整宽高 */
resize: none;
}

示例代码地址