轮播图

作用：主要用于产品的展示或公司相关的宣传；

组成：1、轮播的组图（至少两张）

2、控制器

3、计数器

cursor: pointer;   将图标设为手型

定位

1、postion:设定元素在文档中的内容；会自动转化为块级标签；

2、a、static:静态定位；（默认，不能设置left/top/right/bottom）占用文档流

b、relative:相对定位 ；占用文档流，可以设置偏移；相对自己原本的位置

c、absolute:相对定位；脱离文档流，相对于body做偏移；与相对定位结合使用，就会相对于relative做偏移，设定父类的元素上 (注意容易考)

d、fixed:绝对定位；脱离文档流，相对于浏览器（0,0）偏移，与relative无关。用于开发中的固定导航栏。

3、z-index：仅能在定位元素上发挥作用；（postion;absolute）

默认为0 ，对于static和retive无效；

4、开发策略：先整体，后局部，自顶向下，逐步细化；

a、双飞翼布局：由三列组成，两端固定，中间自适应；兼容性好，最主要的部分可以优先加载；

.left{
    width: 300px;
    background-color: slateblue;
    margin-left: -100%;    //注意是-100%,使它没有大小，挤上去
}
​
​
 .right{
            width: 300px;
            background-color:goldenrod;
            margin-left: -300px;   //同理
        }

b、圣杯布局：由三列组成，两端固定，中间自适应，外观与双飞翼一样

c、侧边栏布局：两栏或者三栏

左侧固定，右侧自适应：

.contrain{
    width: 100%;
    overflow: hidden;
    position: absolute;
​
​
}
.left{
    width: 200px;
    height:200px;
    float: left;
    background-color: aqua;
    margin-right: -200px;
    position: relative;
​
}
.right{
    float: left;
    width: 100%;
    height: 200px;
    margin-left: 200px;
    background-color: pink;
}

三栏布局：

.center{
    float: left;   //虽然中间自适应，也要float;
    width: 100%;
    height: 200px;
    background-color: slateblue;
​
}

BFC规范以及IFC规范

FC：Fammting context(格式上下文)。

一、BFC：块级格式上下文：

条件：浮动元素（float）、定位元素（postion(absolute/fixed)）、display(inline-block/table-cell/table-caption)、overflow(hidden\auto\scroll)

t特性：1、内部的盒子会在垂直方向上接一个的放置；

2、垂直方向的距离有margain最大值决定；

3、BFC区域不会与float元素区域重叠

4、计算BFC高度，也会计算浮动元素；

5、BFC是独立的容器，里面的子元素不会影响到外面的元素；

二、IFC行级格式：

font-size/line-height/height/vertical-aligin

规则：a、元素会在一行上从左到右；

b、在一行上所以的元素在该区域形成一个行框

c、行宽的高度包含框的高度，高度行框元素中最高的；

d、浮动的元素不会在行框中，并且浮动元素会压缩行宽的宽度

E、宽度容纳不下子元素时，就会换行，并产生新的行框；

F、行框的元素内遵循text-align和vertical-align