flex布局分成两行，设置两行之间的间距
如何设置flex两行之间的间距？
给父容器设置固定的高度，然后加上属性align-content: space-between;
css中mixin怎么理解
less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用，如设置一个有默认宽高的mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@mixin box-size($width:100px,$height:100px) {
width: $width;
height: $height;
}
.demo{
@include box-size;
}
.demo2{
@include box-size(200px,300px);
}
.demo{
width: 100px;
height: 100px;
}
.demo2{
width: 200px;
height: 300px;
}
|
两个display:inline-block元素间的间距
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.parent div {
width: 100px;
height: 100px;
display: inline-block;
}
.left {
background-color: red;
}
.right {
background-color: rosybrown;
}
<div class="parent">
<div class='left'></div>
<div class='right'></div>
</div>
|
产生原因：换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。
解决方案：
- 手动在代码层面清除空格
1
2
3
| <div class="parent">
<div class='left'></div><div class='right'></div>
</div>
|
- 父元素flex或者grid
- 父元素font-size：0
其他一下hack方法