星网锐捷面试总结

做一个页面，在做页面的时候发现了自己的一些不足的地方。基本上是css和js部分的问题

css

1 rem和html的fontsize的大小是一样的
2 页面刷新 location.reload()
3 display:none和visibility:hidden
display:none 当做不存在
visibility:hidden 不显示但是保留位置
4 css垂直居中
①vertical-align:middle
我觉得不是很好用，常常失效。写在要居中的元素处——行内元素！！
俺懂了，这种居中垂直是要有参照物的，可以用一个元素来参照，宽为0，高度为100%，再加上 display: inline-block; vertical-align: middle;但是这样要多写一个div不方便，这时候就可以用伪元素：before（父元素::before）把这些写伪元素里面，记得要设置居中元素的margin，因为display: inline-block;这种元素之间有空白符。
②flex
父元素处：display:flex; align-items: center;
子元素处： align-self: center;(如果父元素写了item:center,子元素处就不用写了，self是重写父类的item效果。)
③隐藏节点，这个有点偷懒，就是设置宽高不给内容
④已知父元素高度通过transform实现 - - 其实就是往下再往上

   #in{
       width:600px;
        height:300px; 
        background: blue;
        position: relative;    
   }
   #inin{
       background: yellow;
         width:100px;
        height:100px;
        position: absolute;
        top:50%;
       transform: translateY(-50%)
   }

⑤line-height
设置子元素 display: inline-block;
父元素的line-height等于自己的hight
水平居中
①margin: 0 auto。
②要对齐元素inline-block和父元素text-align
text-align其实是行内元素的水平居中对齐
③绝对定位
④flex
父元素 - - display: flex; justify-content: center;
⑤ fit-content -就写在要居中的元素处，但是元素里面要有东西，不然宽度就是0
width: fit-content;
margin: 0 auto;
5.行内元素
<input> <span> <label> <a>
6.伪类，伪元素
伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
7. justify-content
常用的：center | space-between | space-around
8.背景固定不移动不重复
background-repeat: no-repeat;
background-attachment: fixed;

js

① in
prop in object =>   in对象是否包含该属性
② 数字转字符串
//1、toString()
console.log(num.toString());
//2、数字+任何字符串 " "
console.log(num+"");
字符串转数字
parseInt(s);
parseFloat(s);
③定时清除样式

timer=setTimeout(function () {
document.querySelector("xx").style.display="none"
}, 2000);

④阻止表单的默认提交--event.preventDefault()

function func(event){
           event.preventDefault();
       }