day50 盒子显隐2D形变

复习

1.浮动布局
解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度

脱离文档流: 不在页面中占位(显示层次高于文档流)
不完全: 可以通过清浮动操作, 让子级重新撑开父级高度

子级浮动(约定俗成如果有子级浮动, 该子级的所有兄弟都应该浮动)
父级清浮动, 拥有合适的高度, 让兄弟标签布局不出现问题(约定俗成父级都必须清浮动)

float: left | right;

.sup:after {
	content: "";
	display: block;
	clear: both;
}

2.定位
让布局的block盒子完全脱离文档流(自身布局独立), 根据自身的参考系进行布局

定位布局是完全脱离文档流, 永远不会撑开父级高度 => 父级一定要自己设置高度

position: fixed | absolute | relative

fixed: 固定定位, 完全脱离文档流, 参考系为窗口, 上下取上左右取左
absolute: 绝对定位, 完全脱离文档流, 参考系为最近的定位父级, 上下取上左右取左
relative: 相对定位, 不脱离文档流(定位不改变自己原有位置, 改变显示图层), 参考系为自身原有位置, 上下取上左右取左(top=-bottom, left=-right)

fixed: 相对窗口静止 => 广告, tap, 客服, top
absolute|relative: 父相子绝 => 子级在父级规定的显示区域中进行布局

今日内容

1.盒子显影 *****
2.overflow ****
3.伪类边框 **
4.盒子阴影 **
5.2d形变 **** (需要掌握)
浮动层文档层 背景层 阴影图层
双类名 .b.b1
从上往下布局,所有x轴往下是正值

字体图标库

一般都用i标签,因为i标签最简单,把类名改成对应的类,就会变成图标样式
fa框架: http://fontawesome.dashgame.com/

下载 => 用link标签引入css文件

<i class="fa fa-**"></i>

盒子显隐

1.显示效果
display: none; # 没有任何显示效果
消失的时候在页面中不占位，显示的时候在页面中占位

2.盒子透明度
opacity: 0; # 所在区域留白
消失显示在页面中都占位

只要盒子在页面中有占位,就会影响其他盒子布局, 所以显隐的盒子都需要中 定位 处理

opacity可以动画处理, display不能动画处理

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 10px;
    }
    /*消失的时候在页面中不占位，显示的时候在页面中占位*/
    .div1 {
        display: none;
        position: absolute;
        /*display不能过度动画 => 原因none与block是两个状态点(中间找不出存在的第三个状态点)*/
        transition: 2s;
    }
    .ctrl:hover ~ .div1 {
        display: block;
    }

    /*消失显示在页面中都占位*/
    .div2 {
        /*盒子的透明度*/
        opacity: 0;
        /*背景颜色透明,文本层依然显示*/
        /*background-color: rgba(0,0,0,0);*/
        position: absolute;
        /*opacity能过度动画 => 0~1之间可以找出多个中间点, 比如0.5*/
        transition: 2s;
    }
    .ctrl:hover ~ .div2 {
        opacity: 1;
    }
</style>
<div class="ctrl">控制</div>
<!--<div class="div1">001</div>-->
<div class="div2">002</div>
<!--<div class="div3">003</div>-->

overflow属性

解决: 超出盒子规定的显示区域外的内容的处理方式

/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/

/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/

/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/

例子:
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 10px;
    }
    .div1 {
        /*height: 10px;*/

        /* **** */
        /*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
        /*overflow: hidden;*/

        /*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
        /*overflow: auto;*/

        /*一直以滚动方式处理超出规定区域的内容*/
        /*overflow: scroll;*/
    }

    .wrapper {
        width: 200px;
        height: 260px;
        border: 1px solid black;
        margin: 0 auto;
    }
    .scroll {
        width: 600px;
        height: 260px;
        background-color: red;
        margin-top: 0;
    }
    .box {
        width: 200px;
        height: 260px;
        background-color: green;
        margin-top: 0;
        float: left;
        font: 900 50px/260px "STSong";
        color: red;
        text-align: center;
    }
    .box:nth-child(2n) {
        background-color: yellowgreen;
    }

    /*默认显示区域时第一张 => 第二张 => 第三张*/
    .wrapper {
        position: relative;
        /*wrapper规定了显示区域,所以要对超出显示区域外的内容做隐藏处理*/
        overflow: hidden;
    }
    /*一个滚动的大盒子, 嵌套多个小显示盒子, 该大盒子一滚动, 就会带着所有小盒子滚动*/
    /*哪个小盒子滚动到显示区域, 就显示哪个小盒子*/
    .scroll {
        position: absolute;
        left: calc(-200px * 0);
        /*谁动谁过度*/
        transition: 1s;
    }
    .wrapper:hover .scroll {
        left: calc(-200px * 1);
    }
</style>
<div class="ctrl">ctrl</div>
<div class="div1">div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 </div>

<div class="wrapper">
    <div class="scroll">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</div>

伪类设计边框

设计边框 => 在页面中占位 => 让其定位处理 => 脱离文档流 => 不占位 => 层级结构复杂

设计一个不占位的边框 => 伪类 :before | :after

.box {
	width: 200px;
    height: 200px;
    background-color: red;
    /*给伪类边框提供定位参考系*/
	position: relative;
}
.box:before {
	content: "";

	/*上下边框*/
	width: 180px;
    height: 1px;
    background-color: green;

    /*控制边框位置*/
    position: absolute;
    bottom:0px;
    left: 10px;

}
例子:
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 50px auto;

        position: relative;
    }
    .box:before {
        content: "";

        width: 220px;
        height: 10px;
        background-color: green;

        position: absolute;
        /*top: 0px;*/
        bottom: -10px;
        left: -10px;
    }
    .box:after {
        content: "";

        width: 10px;
        height: 180px;
        background-color: yellow;

        position: absolute;
        left: -10px;
        top: 10px;
    }
</style>
<div class="box">原来文本</div>
<div class="box">原来文本</div>

盒子阴影

注意:
1.盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)
2.盒子可以绑定多套阴影图层
3.阴影图层永远相对于显示图层进行偏移

语法:
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色, ...;

例子:
<style>
    body {
        margin: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: orange;

        /*position: relative;*/
        /*top: 220px;*/

        /*position: absolute;*/
        /*top: 220px;*/

        /*margin-top: 220px;*/

        background-color: rgba(0,0,0,0);

        margin: 220px auto 0;

        /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
        box-shadow: 220px 0 0 20px red, 0 -220px 0 -20px blue, -220px 0 200px 100px yellow, -220px -220px 0 0 cyan, 220px -220px 0 0 cyan;
    }

    .wrap {
        width: 200px;
        height: 260px;
        background-color: orange;
        margin: 50px auto;
    }
    .wrap:hover {
        box-shadow: 0 5px 20px -5px #424242;
    }
</style>
<!--<div class="box"></div>-->

<div class="wrap"></div>

2d形变

# 形变参考点(盒子左上角原点)
transform-origin: x轴坐标 y轴坐标;

# 形变属性
transform: rotate() translate() scale();
# 旋转角度(deg) 偏移距离(px) 缩放比例(无单位)

1.形变多个效果要同时赋值给transform属性
transform: rotate(1080deg) translateX(-300px);  # ①
2.属性值之间的先后顺序往往也会导致过程的不同
transform: translateX(-300px) rotate(1080deg); # ②过程的运动效果与①不同

例子
<style>
    .b {
        width: 150px;
        height: 150px;
        background-color: orange;
        margin: 10px auto 0;
        font: 100 50px/150px 'STSong';
        color: blue;
        text-align: center;

        transition: 1s linear;
    }
    /*旋转形变  角度 deg*/
    .b1 {
        /*transform-origin: 150px 150px;*/ 旋转的原点会变,原点相对于自身原来的位置
    }
    .b1:hover {
        transform: rotate(1080deg);
    }

    .b2:hover {
        transform: rotateX(1080deg);
    }

    .b3:hover {
        transform: rotateZ(1080deg);
    }

    .b4:hover {
        transform: translateX(300px);
    }

    .b5:hover {
        /*1.形变多个效果要同时赋值给transform属性
        2.属性值之间的先后顺序往往也会导致过程的不同
        */
        transform: rotate(1080deg) translateX(-300px);
    }

    .b6:hover {
        transform: scaleX(2) scaleY(2);
    }

    .b7:hover {
        transform: scale(2, 0.5);
    }
</style>
<div class="b b1">1</div>
<div class="b b2">2</div>
<div class="b b3">3</div>
<div class="b b4">4</div>
<div class="b b5">5</div>
<div class="b b6">6</div>
<div class="b b7">7</div>