總結一下css中的盒子模型和position定位

ANT1994發表於2018-11-20

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>
複製程式碼