css复习——定位、全屏div、div居中、calc函数

0714

相对定位

相对（比较安全）定位
position: relative;
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、相对于其正常位置进行定位

不影响元素本身的特性（ 元素的特性（类型）：块元素，内联元素，内联块 ）
位置移动之后，原来的位置会被保留(没有脱离文档流)
如果没有加上定位值,对元素本身没有任何影响
提升层级
left : 给定位元素加上一个左边的距离（相对原来自身的位置发生偏移）（可以给负值）
top : 给定位元素加上一个上边的距离（相对原来自身的位置发生偏移）（可以给负值）
层级： 后来居上
z-index : 层级

绝对定位

绝对定位
position:absolute;

a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级

固定定位

position: fixed;

相对于可视区定位

全屏div

<style>
    .box{
        background-color: #0e3757;
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
</style>

div居中

<style>
        .box{
            width:700px;
            height:500px;
            background-color: #0e3757;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }
</style>

calc函数

width:calc(100% - 10px);(中间的空格不能省掉！！！)
1. 只支持 +-*/ （加减乘除）四个运算符
2. */（乘除的时候参与计算的值只能有一个带单位）

我们可以使用calc()以确定长度等width，height，margin，padding，font-size，等。为了测量，我们可以使用数学表达式：加法，减法，除法和乘法。