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

時間 2019-11-24

標籤總結一下 css 盒子模型 position 定位欄目 CSS 简体版

原文原文鏈接

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，就很明瞭css

看圖說話總結計算公式：html

標準盒子模型的大小 = content+padding+borderchrome

怪異盒模型(border-box)

取消box-sizing: border-box;註釋再運行。就也很明瞭bash

看圖說話總結計算公式：ui

怪異盒子模型的大小： width和height設置爲多大就多大。spa

總結

兩種盒子模型：標準盒模型、怪異盒模型。3d

區別在於width和height。標準盒模型width和height指的是content的寬度和高度，怪異盒模型width和height指的是content+padding+border。
可經過box-sizing 設置。content-box(設置爲標準盒模型)、border-box(設置爲怪異盒模型)

ok 就很明瞭！！！還不理解找我code

position定位

四個取值：cdn

static(默認值)
relative
absolute
fixed

廢話少說上代碼：htm

<!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>
複製代碼

看圖說話：