盒模型

ctrl+shift+i进行查看盒子组成

建一个盒子

<div id="box"></div>

<style>
        #box{
            background-color: red;
            height: 300px;
            width: 300px;
        }
</style>

加上paddingpadding: 100px;

加上border border:10px solid black;

再加入一个div使得显现margin的作用，不再展示

定位

这里有两种在流定位值，他们分别是static和relative
这里有两种脱流定位属性，他们是absolute和fixed

static——静态定位

不设置position的话它的默认值就是static，这个时候left、top、bottom、right是不起作用的

relative——相对定位

使用相对定位给元素加left/top/right/buttom元素会以原来的位置为基础加上这些值，即以原来的位置为基础定位，并且没有脱离文档流

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。 也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。

absolute——绝对定位

当给一个元素设置position:absolute时，这个元素的位置就是以他父代元素position不为static的元素作为参考，如果他的父代元素都是position:static那就以body作为参考

fixed——固定定位

升级版absolute