VUE+DOM操作+前端布局踩坑

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)屏幕上水平垂直居中

    
    
    



    

        

            
一个好的程序员应该是那种过单行线都要往两边看的人。
            增加内容
        
    

效果如下

注：居中方法节选自https://blog.csdn.net/mars2009/article/details/79683924