css中定位的学习

首先页面代码如下:

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;
}
}
阅读更多

Vue引入styles的一个小坑

在使用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记录

在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>

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

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

阅读更多