美文网首页
把笔记备份一下到简书里1

把笔记备份一下到简书里1

作者: 沉默的废柴 | 来源:发表于2018-12-15 10:38 被阅读0次

    我是标题,这一篇主要是部分CSS样式小问题:

    1、float浮动:
    给所有子元素加上float,可以使子元素横向并排左右布局,在父元素加上clearfix清除bug:
    clearfix::after{
    content:'';
    display:block;
    clear:both;
    }
    2、hover悬浮:
    当鼠标选悬停时,在命令行里用hover表示,例如:
    .topNavbar nav ul>li>a:hover{
    border-bottom:1px solid red;
    }
    3、脱离文档流,一般用于背景图与导航栏重合或其他情况,令导航栏相对于视口或浏览器固定:
    topNavbar{
    position:fixed;
    top:0;
    left:0;
    }
    但这有时候会有一个bug,导航栏的margin边框可能会超出body上部,这是因为body本身有一个margin,所以一般情况下写css时可以先设置一个全局样式:
    *{
    margin:0;
    padding:0;
    }
    4、一般情况下,想设置div块内所有元素宽高一样,只需要在大框架宽高确定后,在其他元素内设置高度height就行,宽度width会自适应。
    5、背景图太大,想要居中:
    {background-position:center center;水平居中 垂直居中;
    background-size:cover;自适应覆盖所有面积按比例缩放;
    }
    有一个属性,表示最大宽度980像素,左右自适应居中:
    {max-width:980px;
    margin-left:auto;
    margin-right:auto;
    }
    6、line-height表示行高,可以再加上top或bottom。
    7、span里不要放div,会有bug,可以放span,span加display:block就等于div。
    8、类似个人介绍内容想要内缩,与框架边框有间距并覆盖一部分到导航背景图,就找到包含整个个人介绍文字与图片的上一级框架元素,添加样式:
    .textandpicture{
    padding:50px;
    }
    9、用JS生成标签,在需要创建的标签例如为div的上一级父标签内声明id例如为baba,然后输入命令
    div1 = document.createElement("div")
    baba.appendChild(div1)
    10、改变原网址输入新的需求网址,重新触发键盘事件或鼠标事件想要打开网页的命令:
    location.href = 'http://'+website;
    等同于window.open('http://'+website,'_blank')
    11、while循环:只要语句为真true,就不断循环代码块:
    while(条件){
    语句;
    }
    12、for循环:就是把while循环的三要素放在一起,用分号隔开;
    例如:for (var a = 1; a <10; a = a +1){
    }
    13、switch结构:
    var a = 1
    switch( a ){
    case 1:console.log(a等于1);
    break;
    case 2:console.log(a等于2);
    break;
    default:console.log(a等于其他值);
    }
    default不需要break,break的作用是让代码不再按既有的顺序执行,而是跳出本轮内层循环,进入下一轮外层循环。
    14、continue:用于立即终止本轮内循环,进入下一次内循环。
    例如:
    var a = 1
    while(a < 10){
    a++;
    if(a%2 === 0 )continue;
    console.log(a);
    }
    上面代码只有a为奇数时才会被打印出来,为偶数时直接跳过打印步骤返回循环顶部。
    15、typeof运算符:
    typeof 123;返回'number'
    typeof '123':返回'string'
    typeof false;返回'boolen'
    typeof null;返回'object'
    typeof NaN;返回'number'' NaN是数值,但不等于任何数,包括本身。

    相关文章

      网友评论

          本文标题:把笔记备份一下到简书里1

          本文链接:https://www.haomeiwen.com/subject/tepnhqtx.html