三种布局模型和轮播

css布局模型（三种）
1、流动模型（Flow）：默认的网页布局模式，块状元素都自上而下按顺序垂直延伸分布。内联元素都会在所处的包含元素内从左到右水平分布显示
2、浮动模型 (Float):float：left
3、层模型（Layer）：三种：1绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed)


层模型：绝对定位：使用left、right、top、bottom属性；相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对定位：它通过left、right、top、bottom属性相对于以前的位置移动，偏移前的位置保留不动(还是存在)。覆盖不了前面的div没有偏移前的位置
固定定位：与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。
Relative与Absolute组合使用：被参照元素要设置为：position: relative。元素设置position: absolute


颜色值：p{color:red;}英文   p{color:rgb(133,45,200);}rgb颜色  p{color:rgb(20%,33%,25%);}  p{color:#00ffff;}16进制4颜色


技巧：水平居中：1行内元素:被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
2块状元素：（定宽块状）①定宽②margin：auto。 
  （不定宽块状）①加入 table 标签 包括<table> <tbody>、<tr>、<td> table{margin:0 auto;}
                                         ②设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
                                         ③设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的


垂直居中：父元素高度确定的单行文本： 设置父元素的 height 和 line-height 高度 
父元素高度确定的多行文本：①使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
 ②属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。


1. position : absolute 2. float : left 或 float:right 只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block


图片轮播：一个轮播图片主要包括三个部分： 轮播的图片  轮播图片的计数器  轮播图片的控制器
1：设计轮播图片的容器。 <div id="slidershow" class="carousel"></div>  定义一个 ID 值，方便后面采用 data 属性来声明触发。
2：设计轮播图片计数器。在容器 div.carousel  <ol class="carousel-indicators"><li></li></ol>(有几张图片就放置几个li) 
3：设计轮播图片播放区。在容器 div.carousel  这个区域使用 carousel-inner 样式来控制,通过 item 容器来放置每张轮播的图片
4：设计轮播图片控制器。在容器 div.carousel  中通过 carousel-control 样式配合 left 和 right 来实现。
5：触发 $(".carousel").carousel();
carousel() 方法中可以设置具体的参数
$(function(){
    $("#slidershow").carousel({
        interval:2000  //等待时间（毫秒）
pause：hover //鼠标悬停留在幻灯片区域即停止播放
wrap： true  //轮播是否持续循环
    });
    $(".carousel").carousel("cycle") //从左向右循环播放
    $(".carousel").carousel("pause") //停止循环播放
    $(".carousel").carousel("number") //循环到指定的帧，下标从0开始，类似数组
    $("#slidershow a.left").click(function(){ //点击左边
        $(".carousel").carousel("prev"); //返回上一帧
    });
    $("#slidershow a.right").click(function(){//点击右边
        $(".carousel").carousel("next"); //下一帧
    });
});


1：引入bootstrap.min.css（head）
 2：引入jquery.js  bootstrap.min.js（body）
 3：<div id="myCarousel" class="carousel slide">    //data-ride="carousel"  data-interval="2000"设置自动轮播
    <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
<div class="carousel-inner">
            <div class="item active">
                <img src=" " alt="">
                <div class="carousel-caption">
                </div>
               </div>
               <div class="item">
                <img src=" " alt="">
              <div class="carousel-caption">
                </div>
               </div>
               <div class="item">
            <img src="" alt="">
                <div class="carousel-caption">
                </div>
                </div>
      </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
           </div>
        4：<script>
    $('.carousel').carousel()
      </script>