首先页面代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id='div1'>
    <div id='div2'>
        <div id='div3'>
            <div id='div4'>

            </div>

        </div>

    </div>
    <div id='div22'>
    </div>
</div>

<style>
#div1{
    width: 700px;
    height: 700px;
    background: red;
    margin-top: 50px;
    margin-left: 50px;
}
</style>

relative和absolute

relative单独使用，代码如下

1
2
3
4
5
6
7
8
9
10
11

#div2{
        width: 500px;
        height: 500px;
        background: rgb(17, 0, 255);
        position: relative;
        top: 20px;
        left: 20px;
        right: 0;
        bottom: 20px;
    }
}

在使用styus的时候，经常会定义一些css的常用变量，但是在引入styl文件一直使用的是@import '~styles/mixins'，然后就是一直在报错，
后来经过了解发现，这种写法需要在build中的webpack.conf.js中设置style的别名，

1
2
3
4
5
6
7
8

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles')
    }
  },

然后将styles指向放styl的文件夹即可。

在css的样式应用中，script是一个双标签，也就是说script是必须要通过标签闭合的也就是<script></script>,而不可以使用<script XXX/>这样写的话会导致浏览器解析不出来页面，
而单标签的话则是可以通过/>关闭。类似于<meta>标签的话则是不需要/>但是在工作中的话是推荐加上闭合标签，以是的代码有很好的可读性。

同理在css中的p标签如果嵌套了一个h1标签的话会出现解析错误,是因为p标签的话只能出现行内元素和文本，若是出现了块级元素的话:浏览器的解析方法如下：

1
2
3
4
5
6
7
8
9

<p>
<h1>测试的标题</h1>
</p>

浏览器解析：

<p></p>
<h1>测试的标题</h1>
<p></p>

垂直方向上的外边距会叠加，即宽的外边距会决定垂直方向上的距离

为设置了宽度的盒子添加边距啥的会导致盒子变得更宽