总结一下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>
复制代码