vue项目无法设置height:100%;的解决办法
在App.vue下的style中设置
html,body,#app{
height: 100%;
}
注意:App.vue中的跟标签的id应为app
2.
mounted()函数在页面渲染后触发
created()函数在页面渲染前触发
如果要操作DOM的话,created()函数无法获取节点,但mounted()可以
3.document.getElementById(‘id’);返回标签,可以对其进行操作
4.document.getElementsByClassName(‘star-word-container-zc’);返回数组,
在只获取到一个标签的情况下,第零位便是元素,
在获取到n个标签的情况下,下标为[0]~[n-1]的是元素
5.由于position:relative这个属性并没有脱离文档流的,所以元素本身所占的位置会保留
6.JS多图片轮播图的实现算法
1)
建立两组相同的图片,
图片组通过容器包住,
建立容器的父级,设置宽高,并且overflow:hidden,
设置速度值speed
2)通过offsetWidth获取一组图片的父级的宽度
3)JS获取两组图片
4)两组图片通过setInterval与style.left+speed+‘px’;实现左移
5)当左移距离等于offsetWidth时,style.left=0;
7.position总的来说分为绝对定位和相对定位。
absolute
绝对定位,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。并且该父元素
必须设置有position属性,可以将position设置为relative。父类元素的position必须是非static定位的
,不设置left,top默认在当前位置
所以当父级元素的position全是static的时候,absolute是相对于html来进行定位的。
同时设置top和bottom的时候,只有top会生效,同理,同时设置left和right的时候,只有left会生效。
fixed
绝对定位,生成固定定位的元素,相对于浏览器窗口进行定位。
如果不提供相对位置的话,会浮动在其原先在文档流中的位置上方。
relative
相对定位,生成相对定位的元素,相对于其正常位置进行定位。
其正常位置空间仍然被占用
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
sticky
粘性定位,该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;
inherit
规定应该从父元素继承 position 属性的值。
8相对于浏览器窗口就是相对于html
9.脱离文档流的方法:
absoluted
fixed
float:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。
以下为float的情况
以下为非float的情况
10.
1)内联元素水平居中
.center-text { text-align: center; }
2)块级元素水平居中
.center-block { margin: 0 auto; }
3)多块级元素水平居中
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
4)利用display: flex
.flex-center {
display: flex;
justify-content: center;
}
5)单行内联(inline-)元素垂直居中
#v-box {
height: 120px;
line-height: 120px;
}
6)利用表布局(table)
.center-table {
display: table;
}
.v-cell {
display: table-cell;
vertical-align: middle;
}
7)利用flex布局(flex)
.center-flex {
display: flex;
flex-direction: column;
justify-content: center;
}
8)利用“精灵元素”
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
9)固定高度的块级元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
10)未知高度的块级元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
11)固定宽高元素水平垂直居中
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
12)未知宽高元素水平垂直居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
13)利用flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
14)利用grid布局
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
15)屏幕上水平垂直居中
42度空间-如何使DIV在屏幕上水平垂直居中显示?兼容性要好
一个好的程序员应该是那种过单行线都要往两边看的人。
效果如下
注:居中方法节选自https://blog.csdn.net/mars2009/article/details/79683924