/* [border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，
* 四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
*/
/* [相对定位 relative]
* 1、使用position: relative; 设置元素为相对定位的元素；
* 2、定位机制：
* ① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
* ② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
* 3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
*/
/* [绝对定位 absolute]
* 1、使用position: absolute;设置元素为绝对定位元素。
* 2、定位机制：
* ① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
* ② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；
* ③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；
*
* [固定定位 fixed]
* 1、position: fixed; 是一种特殊的绝对定位，父容器无法使用relative锁住
* 2、定位机制：永远相对于浏览器进行定位。
*
* [z-index 属性]
* 1、作用：设置定位元素的Z轴层叠顺序
* 2、使用要求：① 必须是定位元素才能使用。relative/absolute/fixed
* ② 使用z-index需要考虑父容器的约束。
* 如果父容器为z-index:auto，则子容器的z-index可以不受父容器的约束；
* 如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系)。
*
* 3、z-index:auto & z-index:0 的异同：
* ① z-index:auto为默认值，与z-index:0处于同一平面。
* ② z-index:auto,不会约束子元素的z-index层次，而z-index:0，会约束子元素必须与父元素处于同一平面。
*
* 4、z-index相同(处于同一平面的定位元素)的层叠关系：后来者居上
*/
/* 绝对定位元素水平居中的方式：
1、left: 50%;
2、设置margin-left为-width/2：margin-left: -50px;
*/
/* 【1、实现块级元素在块级元素中水平垂直居中】
* ① 设置子容器为定位元素；
* ② left:50%; margin-left:-width/2;
* top:50%; margin-top:-height/2;
*/
/* 【2、使用负边距增大元素宽度】
* ① 不指定子容器宽度，指定高度或填充内容；
* ② margin: 0px -50px; 可以是左右两边，均超出父容器50px
*/
/* 3、负边距实现双飞翼布局
* ① 由于main部分写在前面，所以可以保证朱布局的优先加载
*/
.main, .sub, .extra {
float: left;
}
.main {
100%;
}
.sub {
190px;
margin-left: -100%;
}
.extra {
230px;
margin-left: -230px;
}
.main-wrap {
margin: 0 230px 0 190px;
}