day49 定位布局和过渡动画

复习

1.盒子在父级水平居中
margin: 0 auto;

2.文本样式操作
color: red;
text-align: center;
font: 900 30px/200px "STSong", "微软雅黑"
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    div .div1 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
        text-align: center;
    }
</style>

3.reset操作
清除默认样式
html,body,h1,h6,p,ul {
	margin: 0;
	padding: 0;
}

4.高级选择器
注: 每一个选择器位都可以替换为任意基础|高级选择器
① 群组: 控制多个
② 后代: 空格  |  子代: >   eg: a > b | div b | div > a > b (类别 -> 个数 -> 位置)
③ 兄弟: ~  | 相邻: +   eg: .b2 + .b3 | .b1 ~ .b3
④ 伪类(位置): nth-child(1|2n|3n-1)

5.边界圆角
border-radius: 20px 30px;
border-radius: 50%;
border-radius: 10px / 20px;

6.背景图片(精灵图)
backgroud: ulr("img/bg.png") no-repeat -200px -300px;
div:hover {
	background-position-x: -400px;
}

今日内容

1.浮动布局
2.定位布局
3.过渡动画

:not 高级选择器(除去选择器之外的)

li:(:not(:nth-child(n)))

浮动布局

BFC(block format )
what|why: 让块级(block)标签在父级的宽度限制下同行显示, 一行显示不下, 自动换行
注: 要达到一行显示个数固定, 一定要固定父级的宽度

语法:
子级 {
	float: left|right;
}

问题: 子级不再撑开父级高度 (不完全脱离文档流)
脱离文档流: => 层次结构会上移, 覆盖有位置重叠且没有脱离文档流的标签
不完全: 浮动布局后, 可以重新让子级撑开父级高度

清浮动: 让不完全脱离文档流的子级重新撑开父级的高度, 这种做法就叫做清浮动

语法:
父级:after {
	content: "";
	dislpay: block;
	clear: both;
}

/*谁们需要同行排列, 谁们就用浮动布局处理*/
.ul1 li {
    float: left;
    /*float: right;*/
}
/*谁的高度没有被浮动子级撑开, 谁来清浮动*/
.ul1:after {
    content: "";
    display: block;
    clear: both;
}       

<!--了解-->
<!--:after | :before 伪类 -> 内容-->
<style>
    .box:after {
        /*display: block;*/
        content: "000";
    }
    .box:before {
        /*display: block;*/
        content: "***";
    }
</style>
<div class="box">123</div>

定位布局

固定定位

what|why: 盒子相对于屏幕完成位置布局, 不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的), 且和页面内容发生重叠时, 该布局下的内容显示层次更高(覆盖其他内容)

语法:
position: fixed;

固定定位总结:
1.参考系为页面窗口
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上, 同理左右取左
4.固定定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,
    两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)

<style>
    .info {
        width: 120px;
        height: 220px;
        background-color: orange;
        /*info采用固定定位*/
        position: fixed;
        /*当盒子开的了定位属性,
        该盒子及㐀通过 top | bottom | left | right 四个方位完成布局*/
        top: 0;
        left: 0;
        z-index: 10;
    }

    .sup {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*没有脱离文档流的盒子添加z-index属性无用*/
        z-index: 1000;
    }
    /*无用*/
    /*.sup:after {*/
        /*content: "";*/
        /*display: block;*/
        /*clear: both;*/
    /*}*/
    .sub {
        width: 100px;
        height: 100px;
        background-color: black;
        position: fixed;

        left: 50px;
        right: 50px;
        bottom: 50px;
        top: 50px;

        z-index: 1;
    }
</style>

绝对定位

what|why: 兄弟标签之间不相互影响, 都参照父级的显示区域来完成布局

语法:
position: absolute;

绝对定位总结:
1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位)
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上, 同理左右取左
4.绝对定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,
    两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)

注意:父级一般情况下只是为了给子级绝对定位提供参考系
        子级绝对定位下,必须要求参考系拥有定位
        父级可以选取fixed|absolute定位,就会成为子级的参考系,
        但是父级自身的布局就会因为fixed|absolute完全脱离文档流的特性,影响自身的布局

        如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不收影响)

        解决方案: 父级采用 相对定位
        position: relative; /*父相子绝*/

相对定位

what|why: 核心用处 => 父相子绝

语法:
position: relative;

/*相对定位总结:
1.参考系为自身原有位置
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.top = -bottom | left = -right (上下取上, 左右取左)
4.相对定位 不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局
注: 相对定位定位方位只会改变显示图层, 不会改变盒子的原有位置, 原有位置不变就不会影响兄弟盒子

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-left: 100px;
        margin-top: 200px;
    }
    .box {
        position: relative;
        top: 200px;
        /*bottom: -10px;*/
        /*bottom: 10px;*/
    }

    .bbb {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
</style>

<div class="box"></div>
<div class="bbb">123</div>

过渡动画

/*持续时间*/(一般需要特别设置)
/*transition-duration: 3s;*/

/*延迟时间: (默认值)0*/
/*transition-delay: 1s;*/

/*过渡属性: (默认值)all | 属性1, ..., 属性n |  eg:height, background-color */
/*transition-property: all;*/

/*过渡曲线: (默认值)ease*/
/*ease | ease-in | ease-out | ease-in-out | linear
cubic-bezier(0.83, 1.46, 0, -1.29)*/
/*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/

/* 简写 */
/* 持续时间 延迟时间 过渡属性们 运动的贝塞尔曲线*/
/*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/

transition: .3s linear;

/*需求: 没有高度时, 将所有子级内容隐藏*/
    .box {
        /*超出自己范围的内容如何处理*/
        overflow: hidden;
    }