总结一下css中的盒子模型和position定位

CSS盒子模型

属性box-sizing可取值

border-box
content-box

标准盒子模型（content-box）

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .hello {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 10px;
            border: 10px solid black;
            margin-bottom: 10px;
            /*box-sizing: border-box;*/
        }

        .world {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="hello">

</div>

<div class="world"></div>
</body>
</html>

运行代码，打开chrome，就很明了

看图说话总结计算公式：

标准盒子模型的大小 = content+padding+border

怪异盒模型(border-box)

取消box-sizing: border-box;注释再运行。就也很明了

看图说话总结计算公式：

怪异盒子模型的大小： width和height设置为多大就多大。

总结

两种盒子模型：标准盒模型、怪异盒模型。

区别在于width和height。标准盒模型width和height指的是content的宽度和高度，怪异盒模型width和height指的是content+padding+border。
可通过box-sizing 设置。content-box(设置为标准盒模型)、border-box(设置为怪异盒模型)

ok 就很明了！！！还不理解找我

position定位

四个取值：

static(默认值)
relative
absolute
fixed

废话少说上代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .hello {
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: red;
        }

        .world {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="hello">

</div>

<div class="world"></div>
</body>
</html>

一个一个来:

1. static 默认值运行代码，就是static的效果了

2. relative

   .hello {
        position:relative;
        width:200px;
        height:200px;
        left:100px;
        top:100px;
        background-color:red;
    }

设置position:relative;效果：

解释一波：红框top、left移动了100px。蓝框不动，这儿不动说明一个问题，红框的位置还在它没有脱离文档流，脱离了蓝框就该往上跑了，知识点理解一下。还有就是红框的移动是相对于它移动之前的位置就行移动的。

3. absolute

.hello {
    position:absolute;
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    background-color:red;
}

看图说话：

很直观是蓝框往上跑了，说明红框那个位置已经不在了。

再举个栗子,修改代码

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .hello {
            position: relative;
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: red;
        }

        .world {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
            top: 100px
        }
    </style>
</head>
<body>
<div class="hello">
    <div class="world"></div>
</div>

</body>
</html>

看图说话

总结一波：

一个元素position设置absolute时，这个元素的位置就是以他父代元素position不为static的元素作为参考，如果他的祖先元素position都是static那就以html元素作为参考。刚刚红色方块的情况就是他父代元素没有position不为static的元素，就以html元素为参考

4. fixed

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 10000px;
        }

        .hello {
            position: relative;
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: red;
        }

        .world {
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: blue;
            top: 0
        }
    </style>
</head>
<body>
<div class="hello">
    <div class="world"></div>
</div>

</body>
</html>