day6

一、定位

1.flex固定定位的特点：脱离文档流，不会占位置；相对于body定位；不区分元素类型；不会随滚动条的滚动而滚动。

2.sticky粘性定位的特点：是在固定定位和相对定位之间的一种定位。如果设置了坐标，满足条件，那么他就是固定定位，反之就是相对定位。

3.吸顶效果

   *{
        margin: 0;
        padding: 0;
    }
    header{
        width: 100%;
        height: 200px;
        background-color: hotpink;
    }
    nav{
        width: 100%;
        height: 80px;
        background-color: #ccc;
        position: sticky;
        top: 0;
    }
    main{
        width: 100%;
        height: 2000px;
        background-color: orange;
    }

4.轮播图结构：

opacity，表示透明：取值范围0-1 0.1 0.2... 可以省略0不写；css3新增rgba()表示颜色值加透明。rgb表示的计算机的三原色 red、green、blue； 圆角 左上 右上 右下 左下，border-radius: 10px 5px 15px 20px;border-top-left-radius: 20px

.slider{ width: 500px; height: 500px; border: 1px solid; margin: 50px auto; position: relative; } .slider ul{ position: relative; } .slider ul li{ width: 500px; height: 500px; position: absolute; } .slider ul li img{ width: 100%; height: 100%; }

    .slider ul li.show{
        z-index: 1;
    }
​
    .slider .btn{
        width: 500px;
        height: 50px;
        position: absolute;
        z-index: 2;
        top: 50%;
        margin-top: -25px;
    }
    .slider .btn span{
        float: left;
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, .5);
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        }
        .slider .btn span:nth-child(1){
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
        }
        .slider .btn span:nth-child(2){
            float: right;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
        }
        .slider ol{
            width: 105px;
            height: 15px;
            position: absolute;
            bottom: 30px;
            z-index: 2;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .slider ol li{
            width: 15px;
            height: 15px;
            border-radius: 50%;//圆
            float: left;
            background-color: hotpink;
            font-size: 12px;
            text-align: center;
            line-height: 15px;
            margin: 0 3px;
            cursor: pointer;
        }
        .slider ol li:hover{
            background-color: greenyellow;
            color: red;
        }
<div class="slider">
        <!-- 图片区域 -->
        <ul>
            <li class="show"><a href="#"><img src=""></a></li>
            <li><a href="#"><img src=""></a></li>
            <li><a href="#"><img src=""></a></li>
            <li><a href="#"><img src=""></a></li>
            <li><a href="#"><img src=""></a></li>
        </ul>
        <!-- 左右按钮区域 -->
        <div class="btn">
            <!-- 预留字符：&lt;表示小于，&gt;表示是大于。&nbsp;表示空格 &times;表示乘号 -->
            <span>&lt;</span>
            <span>&gt;</span>
        </div>
        <!-- 小圆圈区域 -->
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>

5.小广告

       *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #000;
    }
    .hot{
        width: 500px;
        height: 300px;
        border: 1px solid;
        background: url("") no-repeat;
        background-size: 100% 100%;
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
    .hot span{
        width: 15px;
        height: 15px;
        font-size: 12px;
        text-align: center;
        line-height: 14px;
        background-color: #ccc;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        opacity: .3;
        color: #fff;
    }
    .hot h3{
        color: red;
        margin-top: 50px;
    }
    <a href="https://www.4399.com">
    <div class="hot">
        <span>&times;</span>
        <marquee>
            <h3>夜深了，小伙子孤独寂寞冷了吗？如果你感觉累了，快来点我~</h3>
        </marquee>
    </div>
</a>

6.图片放大

   *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: black;
    }
    ul{
        width: 800px;
        height: 500px;
        margin: 100px auto;
    }
    ul li{
        list-style: none;
        width: 120px;
        height: 120px;
        border: 1px solid #ccc;
        margin: 20px;
        float: left;
        position: relative;
    }
    ul li>.pic1{
        width: 100%;
        height: 100%;
        /* 注意点：图片如果设置padding值并不会把图片给撑大，会撑出图片内容距离图片边框之间的距离 */
        padding: 3px;
        box-sizing: border-box;
    }
    ul li>.pic2{
        width: 240px;
        height: 240px;
        border: 1px solid #ccc;
        padding: 3px;
        position: absolute;
        left: -60px;
        top: -60px;
        display: none;
        z-index: 999;
    }
    ul li:hover .pic2{
        display: block;
    }
​
   <li>
        <img src="./img/02.jpg" class="pic1">
        <img src="./img/02.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/28.jpg" class="pic1">
        <img src="./img/28.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/16.jpg" class="pic1">
        <img src="./img/16.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/01.jpg" class="pic1">
        <img src="./img/01.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/25.jpg" class="pic1">
        <img src="./img/25.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/02.jpg" class="pic1">
        <img src="./img/02.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/28.jpg" class="pic1">
        <img src="./img/28.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/16.jpg" class="pic1">
        <img src="./img/16.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/01.jpg" class="pic1">
        <img src="./img/01.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/25.jpg" class="pic1">
        <img src="./img/25.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/02.jpg" class="pic1">
        <img src="./img/02.jpg" class="pic2">
    </li>
    <li>
        <img src="./img/28.jpg" class="pic1">
        <img src="./img/28.jpg" class="pic2">
    </li>
</ul>

二、过度属性

1.语法：transition-property：width，height，background-color

2.过渡时间：transition-duration: 2s

3.过度执行延迟时间：transition-delay：2s

4.过度的动画：transition-timing-function: ease-in加速 ease-out减速 linear匀速 ease-in-out先加速再减速

5.缩写形式：transition: all 2s ease-in

三、文本、盒子阴影

text-shadow：: 5px 5px 5px green 值1表示阴影的水平位置 值2表示阴影的垂直位置 值3表示阴影的模糊程度 值4表示阴影的颜色值

box-shadow：5px 5px 5px green 值1表示阴影的水平位置 值2表示阴影的垂直位置 值3表示阴影的模糊程度 值4表示阴影的颜色值

四、弹性盒布局

1.弹性盒也叫伸缩布局盒模型，能让子项目改变其宽度、高度、顺序。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。

主轴-水平方向或x轴

侧轴-垂直方向或y轴

2.弹性盒属性

①伸缩流方向 flex-direction 定义伸缩项目在伸缩容器中的方向 row：从左到右 row-reverse：从右到左 column：从上到下 column-reverse：从下到上

②主轴对齐 justify-content 定义伸缩项目沿主轴线的对齐方式 flex-start：伸缩项目向一行的起始位置靠齐 flex-end：伸缩项目向一行的结束位置靠齐 center：伸缩项目向一行的中间位置靠齐 space-between：伸缩项目会平均的分布在行里 space-around：伸缩项目会平均的分布在行里，两端保留一半的空间 space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

③侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式 flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边 flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边 center：伸缩项目的外边距在该行的侧轴上居中放置 baseline：伸缩项目根据伸缩项目的基线对齐 stretch：伸缩项目拉伸填充整个伸缩容器

④换行 flex-wrap nowrap 不换行 默认值，不管超出还是不超出都不会换行 wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行 wrap-reverse 换行反向 主轴水平时，上下反向，主轴垂直时，左右反向

⑤伸缩流方向属性与换行属性缩写形式 flex-flow flex-flow：换行 伸缩方向; 两个值同时定义或者单独定义都生效，不分先后顺序

⑥align-self（加在子元素上）：主要用来设置单独伸缩项目在侧轴的对齐方式。注意点：align-self可以覆盖align-items flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；（元素位于容器的开头） flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（元素位于容器的结尾） center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（元素位于容器的中间） stretch：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）

⑦堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 往往要与换行同时应用，没有换行就不存在多行的情况 flex-start：各行向伸缩容器的起点位置堆叠；（没有行距） flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距） center：各行向伸缩容器的中间位置堆叠；（居中没有行距） space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配） space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）

⑧显示顺序order（加在子元素上）默认是标准流的顺序排序，在弹性盒里可以通过order来改变顺序。不定义的会排在前面，数字越大越后面。

⑨flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分 flex：1； flex：2

⑩flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

11)flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

12)flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
​
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。不常用，还在不断变化中。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto