前端知识点部分总结

前端知识点总结

多行文本溢出

• 部分浏览器兼容（Chrome、Safari、Opera）

  .div{
      overflow:hidden;
      display:-webkit-box !important;
      text-overflow:ellipsis;                 //隐藏的部分用...表示
      word-break:break-all;                     //自动换行
      -webkit-box-orient:vertical;            //垂直方向
      -webkit-line-clamp:3;                   //显示3行隐藏
  }
  

  这种办法很好用，但是兼容性不够

• 对于IE和Firefox

  .div{
      line-height:1.5rem;
      height:4.5rem;
      overflow:hidden;
  }
  

  但是这种办法，太过于绝对，硬性规定了文本的高度，不具有拓展性

float部分浏览器不能显示高度

    html:
    <div class="content">
        <div class="left">...</div>
        <div class="right">...</div>
    </div>

    css:
    .content{border:1px solid #ccc}
    .left{float:left;}
    .right{float:left;}

如果.content内部div设置了float对齐方式，那么.content将没有高度，border就不能把里面的内容包含

html:
<div class="content">
    <div class="left">...</div>
    <div class="right">...</div>
    <div class="clearbox">...</div>
</div>

css:
.content{border:1px solid #ccc;}
.left{float:left;}
.right{float:left;}
.clearbox{clear:both;}

加入.clearbox清除浮动；.content就能够把里面的内容全部包含在内容里面

如何让大图片居中，不被压缩

html:
<div class="img"></div>

css:
.img{background:url(..) no-repeat top center;}

将图片当作背景图片，这样就可以居中，很适用于响应式布局，浏览器宽度改变，图片很能很好的看到效果

不定宽高的水平居中

• 通用版

  css:
  .div{
      position:absolute;
      top:50%;
      left:50%;
      -webkit-transform:translate(-50%,-50%);
      z-index;10;
  }
  

• flex box版

  css:
  .div{
      display:flex;
      display:-webkit-flex;             
      justify-content:center;           //子元素水平居中
      align-items:center;               //子元素水平居中
  }
  

这种办法就是要解决兼容性问题

Flexbox兼容性

• android4.4以下（旧flexbox布局）

  css:
  .div{
      display:-webkit-flex-box;
      -webkit-flex-box:1;
      box-pack:center;
      box-align:center;
  }
  

• android4.4以上（新flex布局）

  css:
  .div{
      display:-webkit-flex;
      -webkit-flex:1;
      justify-content:center;
      align-items:center;
  }
  

移动开发的一像素边框

    css:
    .div{
        position:relative;
    }
    .div + .div:bofore{
        position:absolute;
        top:-1px;
        left:0;
        content:'';
        width:100%;
        height:1px;
        border-top:1px solid #ccc;
        -webkit-transform:scaleY(0.5);
    }

js部分

随浏览器滚动的js

    css:
    .window_move{
        position:fixed;
        top:60px;
    }

    js:
    $(function(){
        //先获取你选择的盒子
        var $div = $("#per_person");
        //浏览器滚动的事件                   
        $(window).scroll(function(){
            //计算浏览器到这个盒子的高度height
            //$div.offset().top就是浏览器加载出来盒子距离top的高度，不随浏览器滚动改变
            //$(window).scrollTop()浏览器向下滚动了多少距离        
            var height = $div.offset().top - $(window).scrollTop();
            if(height <= 60 ){
                $div.addClass("window_move").removeClass("window_on");
            }
            var height_2 = $div.offset().top;
            if(height_2 < 245){
                $div.addClass("window_on").removeClass("window_move");
            }
        })
    })

该效果是我写个人中心的资料卡，先relative定位，当距离浏览器60px时fixed布局；

不一样的登陆提示框

    html: 
    <div class="div_login">
        <div class="login_close">
            <span id="login_close" class="glyphicon glyphicon-remove"></span>
        </div>
        <div class="login_header">
            <h3>用户登录</h3>
        </div>
        <ul>
            <li>
                <span class="glyphicon glyphicon-user"></span>
                <input type="text" name="username" id="username" class="login_input"/>
                <span class="login_span">用户名/手机/邮箱</span>
            </li>
            <li>
                <span class="glyphicon glyphicon-lock"></span>
                <input type="password" name="password" id="password" class="login_input"/>
                <span class="login_span">请输入密码</span>
            </li>
        </ul>

        <button type="submit" id="login_sub" class="btn">登录</button>     
        <a href="regist.html" id="reg_ontime">立即注册</a>   

    </div>

    css:
    .div_login {
        position: fixed;
        width: 460px;
        height: 326px;
        background-color: white;
        z-index: 10;
        margin-left: 350px;
        border-radius: 6px;
        top: 220px;
        border: 2px solid rgb(27,129,62);
    }
    .div_login h3 {
        margin-top: 0;
        padding: 10px;
        margin-left: 162px;
        color: white;
        letter-spacing: 2px;
        text-shadow: 2px 2px 1px #333;
    }
    .login_header {
        background: rgb(27,129,62);
        border-top-left-radius: 5px;
    }
    .div_login li {
        margin-left: 82px;
        margin-top: 45px;
        display: block;
        position: relative;
    }
    .div_login .glyphicon {
        font-size: 18px;
        color: #444;
        position: absolute;
        top: 4px;
    }
    .div_login .glyphicon:hover{
        cursor: default;
    }
    .div_login input{
        border: none;
        border-bottom: 1px solid #ccc;
        width: 250px;
        padding-left: 10px;
        padding-bottom: 2px;
        margin-left: 30px;
        z-index: 10;
    }
    #login_sub {
        border: 1px solid #ccc;
        height: 34px;
        padding-top: 0;
        line-height: 34px;
        margin-left: 125px;
        width: 203px;
        margin-top: 25px;
        font-size: 16px;
        background-color: rgb(27,129,62);
        color: white;
        text-shadow: 2px 2px 1px #333;
    }
    #reg_ontime {
        position: absolute;
        bottom: 5px;
        right: 11px;
        color: rgb(27,129,62);
    }
    #reg_ontime:hover{
        text-decoration: none;
    }
    .login_span {
        position: absolute;
        color: #888;
        letter-spacing: 2px;
        margin-left: -238px;
    }
    .span_find{
        margin-top: -25px;
    }
    .login_close {
        width: 25px;
        height: 25px;
        position: absolute;
        top: -10px;
        right: -10px;
        background-color: white;
        border-radius: 15px;
    }
    .login_close:hover {
        background-color: #ccc;
    }
    .login_close .glyphicon.glyphicon-remove {
        top: 6px;
        left: 5px;
        color: rgb(34,125,81);
        font-size: 16px;
    }
    .login_close .glyphicon.glyphicon-remove:hover{
        cursor: pointer;
        color: rgb(27,129,62);
    }

    js:
    $(".login_input").click(function(){
        if(this.value==""){
            $(this).css("border-bottom","1px solid rgb(27,129,62)")
                .siblings(".login_span").addClass("span_find");
        }
    });
    $(".login_input").blur(function(){
        if(this.value==""){
            $(this).css("border-bottom","1px solid #ccc");
            $(this).siblings(".login_span").removeClass("span_find");
        }
    });

登陆的输入框里的提示内容鼠标点击时不会消失，而是向上移一格，这里这是部分代码，可能会有一点问题，看全部代码，可以去在github上面看完整的代码，我的仓库（[email protected]:cao029/School-record.git）里面的美发网站。